El elemento <form>
Aquí empieza la conversación con tu usuario. Cada vez que alguien se
registra, hace login o te escribe por un formulario de contacto, sus datos pasan
por un <form>. Es el canal por el que tu app recibe información del mundo.
Todos los controles (cajas de texto, casillas, botones) se agrupan dentro de él:
<form>
<!-- aquí van los controles -->
</form>
El control más básico: <input>
<input> es una etiqueta sin cierre que, según su atributo type, se
convierte en distintos controles (un cuadro de texto, una casilla, etc.). Es el
camaleón del formulario.
El atributo name es la clave con la que viaja el dato. ⚠️ TRAMPA CLÁSICA:
si olvidas el name, el campo se ve, el usuario lo rellena... y no se envía
nada. Como hablar sin que nadie te escuche.
<input type="text" name="ciudad" />
La pareja <label> + <input>: clave de accesibilidad
Un campo sin etiqueta es un examen sin enunciado: el usuario no sabe qué escribir
y un lector de pantalla no sabe anunciar el control. La solución es <label>.
La forma más robusta de unirlos es por referencia: el atributo for del
<label> apunta al id del <input>. ⚠️ TRAMPA CLÁSICA: deben coincidir
exactamente (un for="correo" necesita un id="correo", no id="email").
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo" />
Esto aporta tres ventajas concretas:
- Accesibilidad: los lectores de pantalla leen "Correo electrónico" al enfocar el campo.
- Usabilidad: al pulsar sobre el texto del
<label>, el foco salta al control (muy útil en casillas y radios, que son pequeños). - Claridad semántica: queda explícito qué etiqueta describe qué control.
Regla de oro: todo control de formulario debe tener un
<label>asociado. Si usasfor/id, asegúrate de que los valores sean idénticos y únicos en la página.
También existe la variante envolvente (<label>texto <input /></label>),
pero for/id es más explícita y se valida con mayor fiabilidad. Cógele cariño
a esta pareja: la verás en todos los formularios del mundo.