WhatsApp

  
Capítulo 2: Estilización de Formularios con CSS

Ahora que hemos creado un formulario funcional con HTML, es el momento de darle estilo para que se vea más atractivo y coherente con el diseño de nuestro sitio web. En este capítulo, exploraremos cómo aplicar estilos utilizando CSS para mejorar la apariencia de nuestros formularios.

1. Selección de elementos de formulario

 Comencemos seleccionando los elementos de nuestro formulario para aplicar estilos. Utilizaremos los selectores CSS para dirigirnos a estos elementos. Creando dentro de nuestro HTML la etiqueta <style> para dentro de ella poner todo nuestros estilos. 

<!DOCTYPE html>
<html lang="es">
<head>   
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Estilización de Formularios con CSS</title>   
         <style>      </style>
      </head>
      <body>
        <h2>Formulario de contacto</h2>
        <form action="" method="post">       
        <label for="nombre">Nombre:</label>       
        <input type="text" id="nombre" name="nombre" required> 
        <br>
        <label for="email">Correo electrónico:</label> 
        <input type="email" id="email" name="email" required>     
        <br> 
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="4" required></textarea>        <br>        <button type="submit">Enviar</button>    </form>
</body>
</html>

2. Estilización de etiquetas y campos de entrada

Aplicamos estilos para mejorar la legibilidad y la apariencia de las etiquetas y los campos de entrada.

<!DOCTYPE html>
<html lang="es">
<head>   
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Estilización de Formularios con CSS</title>   
         <style>       /* Estilo para etiquetas y campos de entrada */       
  label {           
font-weight: bold;           
margin-bottom: 5px;          }

         
input,textarea {   
 width: 100%;
padding: 10px;           
margin-bottom: 10px;           
border: 1px solid #ccc;           
border-radius: 5px;          }
          </style>
      </head>
      <body>
        <h2>Formulario de contacto</h2>
        <form action="" method="post">       
        <label for="nombre">Nombre:</label>       
        <input type="text" id="nombre" name="nombre" required> 
        <br>
        <label for="email">Correo electrónico:</label> 
        <input type="email" id="email" name="email" required>     
        <br> 
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="4" required></textarea>        <br>        <button type="submit">Enviar</button>    </form>
</body></html>

3. Estilización del menú desplegable

Aplicamos estilos para mejorar la apariencia del menú desplegable y hacerlo más coherente con el diseño general del formulario.

<!DOCTYPE html>
<html lang="es">
<head>   
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Estilización de Formularios con CSS</title>   
         <style>       /* Estilo para etiquetas y campos de entrada */       
  label {           
font-weight: bold;           
margin-bottom: 5px;          }

         
input,textarea {   
 width: 100%;
padding: 10px;           
margin-bottom: 10px;           
border: 1px solid #ccc;           
border-radius: 5px;          }  /* Estilo para el menú desplegable*/       
select {         
width: 100%;         
padding: 10px;         
margin-bottom: 10px;         
border: 1px solid #ccc;         
border-radius: 5px;         
background-color: #fff;         
color: #555;        }
          </style>
      </head>
      <body>
        <h2>Formulario de contacto</h2>
        <form action="" method="post">       
        <label for="nombre">Nombre:</label>       
        <input type="text" id="nombre" name="nombre" required> 
        <br>
        <label for="email">Correo electrónico:</label> 
        <input type="email" id="email" name="email" required>     
        <br> 
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="4" required></textarea>        <br>        <button type="submit">Enviar</button>    </form>
</body></html>

4. Estilización del botón de envío

Aplicamos estilos para resaltar el botón de envío y hacerlo más llamativo para los usuarios.

<!DOCTYPE html>
<html lang="es">
<head>   
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Estilización de Formularios con CSS</title>   
         <style>       /* Estilo para etiquetas y campos de entrada */       
  label {           
font-weight: bold;           
margin-bottom: 5px;          }

         
input,textarea {   
 width: 100%;
padding: 10px;           
margin-bottom: 10px;           
border: 1px solid #ccc;           
border-radius: 5px;          }  /* Estilo para el menú desplegable*/       
select {         
width: 100%;         
padding: 10px;         
margin-bottom: 10px;         
border: 1px solid #ccc;         
border-radius: 5px;         
background-color: #fff;         
color: #555;        }
/* Estilo para el botón de envío */
button { 
padding: 10px 20px; 
background-color: #007bff; 
color: #fff; 
border: none; 
border-radius: 5px; 
cursor: pointer;
}
button:hover { 
background-color: #0056b3;
}
          </style>
      </head>
      <body>
        <h2>Formulario de contacto</h2>
        <form action="" method="post">       
        <label for="nombre">Nombre:</label>       
        <input type="text" id="nombre" name="nombre" required> 
        <br>
        <label for="email">Correo electrónico:</label> 
        <input type="email" id="email" name="email" required>     
        <br> 
        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="4" required></textarea>        <br>        <button type="submit">Enviar</button>    </form>
</body></html>

¿Tienes Dudas o Necesitas Aclaraciones?

¡No dudes en ponerte en contacto con nosotros si tienes alguna pregunta o necesitas más información! Estamos aquí para ayudarte en todo lo que podamos. Puedes contactarnos dando click aquí.



En resumen, las listas y las tuplas son estructuras de datos importantes en Python, cada una con sus propias características y casos de uso. La elección entre una lista y una tupla dependerá de los requisitos específicos del programa y la naturaleza de los datos que se están manipulando.
Sebastian Granados 21 marzo, 2024
Compartir
Categorías


Iniciar sesión dejar un comentario

  
Creación de Formularios con HTML y CSS
Capítulo 1: Fundamentos de HTML para Formularios