En esta clase, vamos a aprender a organizar elementos de formularios, como labels, inputs y botones, utilizando Flexbox. Esto nos permitirá crear formularios más limpios y organizados, donde los elementos se ajusten adecuadamente al tamaño de la pantalla.
Estructura HTML del Formulario
Primero, definimos la estructura HTML de nuestro formulario. Tendrá una clase form-group, un label, un input de tipo texto y un botón de envío.
<div class="form-group">
<label>Email</label>
<input type="text">
<button type="submit">Enviar</button>
</div>Estilos CSS para el Formulario
A continuación, aplicamos estilos para que los elementos del formulario se alineen correctamente y se comporten de manera responsiva.
.form-group{
display: flex;
}
.form-group input{
flex-grow: 1;
flex-shrink: 1;
}
.form-group label{
border: 1px solid gray;
padding: 5px;
}Explicación del Código CSS
Contenedor del Formulario:
.form-groupusadisplay: flexpara disponer los elementos en una fila.
Input del Formulario:
.form-group inputusaflex-grow: 1yflex-shrink: 1para permitir que el input crezca y se reduzca según sea necesario, ocupando todo el espacio disponible mientras el botón mantiene su tamaño fijo.
Label del Formulario:
.form-group labeltiene un borde y padding para destacarse visualmente y separarse del input.
Variaciones del Formulario
También podemos incluir otros elementos, como un icono o diferentes tipos de inputs, y el comportamiento será similar. El uso de Flexbox facilita la organización y alineación de estos elementos sin necesidad de ajustes adicionales.
Ejemplo con Icono
Podemos añadir un icono dentro del contenedor del formulario y seguirá funcionando de la misma manera:
<div class="form-group">
<label>Email</label>
<input type="text">
<button type="submit">Enviar</button>
</div>