Fieldsets, labels y estilos

`04` Fieldsets, labels y estilos

Darle estilo a un formulario puede ser tedioso, pero si usas ciertas etiquetas HTML y un poco de CSS, tu vida será mucho más fácil.

📚 Repaso de etiquetas útiles:

<label>: Se coloca junto a un <input> y le dice al usuario qué representa ese campo. Mejora la accesibilidad y la usabilidad.
<fieldset>: Sirve para agrupar lógicamente varios campos relacionados (por ejemplo, agrupar los radios de “hombre/mujer” dentro de un conjunto de campo “Género”).
<legend>: Es el título o nombre que se muestra para cada grupo de campos (<fieldset>).

📝 Instrucciones paso a paso:

1. Estructura HTML básica

Crea un formulario (<form>) que contenga al menos:

Dos <fieldset> diferentes (por ejemplo: “Datos personales” y “Preferencias”).
Dentro de cada <fieldset>, incluye una <legend> con el título del grupo.
Varios <input> con sus respectivas <label>.
Un botón de envío (<input type="submit">).

2. Estilos CSS (aplica en orden)

Paso 2.1 - Fuente global: Aplica al <body> esta fuente:

font-family: "Lato", sans-serif;

Paso 2.2 - Estilo del formulario: Establece el display de la etiqueta <form> a inline-block.

Paso 2.3 - Limpiar fieldsets:

Elimina los bordes (border) de todos los <fieldset>.
Elimina los márgenes (margin) de todos los <fieldset>.

Paso 2.4 - Relleno (padding) de fieldsets: Aplica un relleno (padding) de 10px en la parte superior e inferior y de 0px a la izquierda y derecha de todos los <fieldset>.

Paso 2.5 - Grosor de fuente en fieldsets: Aplica un grosor de fuente (font-weight) de 800 en todos los <fieldset>.

Paso 2.6 - Grosor de fuente en labels: Disminuye el grosor de la fuente (font-weight) de todas las <label> a 400.

Paso 2.7 - Estilo para inputs de texto: Aplica estas reglas a todas las entradas de tipo texto (input[type=text]):

input[type=text] {
    border: none;
    border-bottom: 1px solid black;
    font-size: 16px;
}

Paso 2.8 - Estilo para el botón de envío: Aplica este estilo al botón de envío (input[type=submit]):

input[type=submit] {
    cursor: pointer;
    border: none;
    padding: 10px;
    background-color: #f65252;
    color: white;
    width: 100%;
}

💻 Resultado Esperado:

Tu formulario debería verse similar a esta imagen:

06-fieldsets-labels-and-styles

💡 Pistas adicionales:

Recuerda que los estilos se aplican en cascada: el orden de las reglas CSS importa.
Puedes agrupar selectores para aplicar el mismo estilo a varios elementos (ej: fieldset, legend { ... }).
El selector input[type=text] solo afecta a inputs de texto, no a radios, checkboxes ni botones.
Si quieres que el botón ocupe todo el ancho del fieldset, el width: 100% funcionará correctamente.

✅ Comprueba tu trabajo:

¿El <body> tiene la fuente Lato?
¿El <form> se muestra como inline-block?
¿Los <fieldset> no tienen bordes ni márgenes?
¿Los <fieldset> tienen el padding correcto?
¿Los <fieldset> tienen font-weight: 800?
¿Las <label> tienen font-weight: 400?
¿Los inputs de texto tienen borde inferior sólido y sin bordes laterales?