Los formularios HTML son elementos esenciales en el desarrollo web, ya que permiten a los usuarios interactuar y enviar datos al servidor. En este artículo, exploraremos cómo crear un formulario básico en HTML y luego le daremos estilo utilizando CSS. Nos centraremos especialmente en el diseño de formularios en CSS Crear un formulario es sencillo, lo que es más complicado es crear un formulario en css que sea bonito, usable y que cumpla con la función principal de su creación. En este artículo, te enseñaré cómo crear un formulario Html básico y a estilizarlo con CSS.
Estilizar formulario con CSS
Creando un formulario HTML
Para crear un formulario HTML, debemos utilizar el elemento <form>. Este elemento contiene todos los controles de formulario, como cuadros de texto, botones y listas desplegables.
Aquí hay un ejemplo básico de un formulario HTML:
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Formulario CSS</title>
<link rel=»stylesheet» href=»styles.css»> <!– Vincula el archivo CSS externo –>
</head>
<body><form action=»#» method=»post» id=»miFormulario»>
<label for=»nombre»>Nombre:</label>
<input type=»text» id=»nombre» name=»nombre» required><label for=»email»>Correo Electrónico:</label>
<input type=»email» id=»email» name=»email» required><label for=»comentarios»>Comentarios:</label>
<textarea id=»comentarios» name=»comentarios» rows=»4″ required></textarea><input type=»submit» value=»Enviar»>
</form></body>
Explicación del Código html del formulario:
- body: Establece algunas propiedades básicas para el cuerpo del documento.
- form: Define el estilo del formulario, estableciendo un ancho máximo, márgenes, color de fondo y sombras.
- label: Agrega espacio y estilo a las etiquetas.
- input y textarea: Establece el ancho, el relleno y el margen para los campos de entrada y la zona de comentarios.
- input[type=»submit»]: Establece el estilo del botón de envío, como el color de fondo y el color del texto.
- input[type=»submit»]:hover: Cambia el color de fondo cuando el usuario pasa el ratón sobre el botón de envío.
Estilizando el Formulario con CSS:
Ahora, creemos un archivo CSS externo llamado «styles.css» para darle estilo al formulario. Vamos a personalizar los colores, márgenes y bordes para que se vea más atractivo. Aquí tienes un ejemplo de CSS:
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}form {
max-width: 400px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}label {
display: block;
margin-bottom: 8px;
}input,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}input[type=»submit»] {
background-color: #4caf50;
color: #fff;
cursor: pointer;
}input[type=»submit»]:hover {
background-color: #45a049;
}
Explicación del Código CSS del formulario:
A continuación te desgranaré cada uno de los códigos CSS que he aplicado al formulario, para que puedas entenderlo punto por punto.
css body del formulario
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
- font-family: Establece la fuente del texto en el cuerpo del documento.
- background-color: Define el color de fondo para el cuerpo del documento.
- margin y padding: Elimina márgenes y rellenos predeterminados del cuerpo del documento.
CSS form del formulario
max-width: 400px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
- max-width: Limita el ancho máximo del formulario a 400 píxeles.
- margin: Añade márgenes de 20 píxeles en la parte superior e inferior y se centra horizontalmente automáticamente.
- background-color: Establece el color de fondo del formulario en blanco (#fff).
- padding: Añade relleno interno de 20 píxeles al formulario.
- border-radius: Agrega esquinas redondeadas al formulario con un radio de 8 píxeles.
- box-shadow: Aplica una sombra sutil alrededor del formulario para darle profundidad.
CSS de la etiqueta label del formulario
display: block;
margin-bottom: 8px;
}
- display: block: Hace que las etiquetas (label) se muestren como bloques, colocándolas en líneas separadas.
- margin-bottom: Añade un margen inferior de 8 píxeles a las etiquetas para separarlas de los elementos siguientes.
CSS del input textarea del formualrio
textarea {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
- width: 100%: Hace que los campos de entrada (input) y la zona de comentarios (textarea) ocupen el ancho completo de su contenedor.
- padding: Añade un relleno de 8 píxeles alrededor de los campos de entrada y la zona de comentarios.
- margin-bottom: Agrega un margen inferior de 16 píxeles para separar los campos de entrada y la zona de comentarios.
CSS etiqueta input submit del formulario
background-color: #4caf50;
color: #fff;
cursor: pointer;
}
- background-color: Establece el color de fondo del botón de envío a verde (#4caf50).
- color: Define el color del texto del botón como blanco (#fff).
- cursor: Cambia el cursor al estilo de un puntero cuando pasa sobre el botón.
CSS etiqueta input submit en hover del formulario
background-color: #45a049;
}
- Cambia el color de fondo del botón de envío cuando se pasa el ratón sobre él a un tono ligeramente más oscuro (#45a049). Esto proporciona un efecto visual para indicar interactividad.
Con estos estilos CSS, hemos mejorado la apariencia del formulario y lo hemos adaptado para que sea más agradable visualmente.
¡Ahora tienes un formulario con CSS y HTML funcional y con un diseño css! Este es solo un ejemplo básico, pero puedes personalizarlo aún más según tus necesidades. Experimenta con diferentes propiedades CSS para obtener el diseño que se adapte mejor a tu sitio web.
Código html y el CSS del formulario en codepen:
Practica hasta que tengas el formulario estilizado con css a tu gusto.
See the Pen
Untitled by gerard (@gerardcoma)
on CodePen.
