Curso de HTML / Asociar label e input y distinguir id de name
input recoge un valor y label identifica para qué sirve el control. Una asociación explícita fiable utiliza un id único en el input y el mismo valor en for del label. El atributo name cumple otra función: identifica el dato cuando se envía el formulario.
Crear una asociación y comprobarla
Pon este fragmento dentro de body de un documento HTML completo y ábrelo en el navegador:
<form method="get">
<label for="visitor-name">Name</label>
<input id="visitor-name" name="name" type="text">
<button type="submit">Check</button>
</form>Selecciona el texto “Name”: el foco debe pasar al campo de texto. Poner palabras junto a un control no crea automáticamente la relación. Comprueba después que puedes llegar al input mediante Tab y que su foco es visible.
El id debe ser único en el documento. Si duplicas ese identificador, una etiqueta puede dirigir al control equivocado. El texto de label no es decoración: proporciona un nombre que permite reconocer el campo. La guía de etiquetas de W3C WAI explica por qué deben identificar los controles.
Distinguir el identificador de la clave enviada
| Atributo | Función | En el ejemplo |
|---|---|---|
id |
Identifica un elemento del documento | visitor-name es el destino del label |
for |
Indica qué control etiqueta un label | Coincide con visitor-name |
name |
Da la clave al valor enviado | El servidor recibe el dato bajo name |
Si el clic en la etiqueta no mueve el foco, compara for con id. Si puedes escribir pero el valor no aparece en los datos enviados, revisa name. Son comprobaciones distintas, como muestra la inspección de datos de un formulario.
Puedes cambiar el identificador a person-name si actualizas también for. No hace falta cambiar la clave del envío si el servidor sigue esperando el mismo nombre. A la inversa, cambiar solo name no repara una asociación rota.
Reparar una etiqueta desconectada
El primer fragmento confunde la clave enviada con el identificador. El segundo corrige la asociación:
<!-- Incorrect: for matches name instead of id -->
<label for="full_name">Name</label>
<input id="person-name" name="full_name">
<!-- Correct: for matches the input id -->
<label for="person-name">Name</label>
<input id="person-name" name="full_name">Guarda cada versión en un documento distinto o sustituye por completo una por otra. No las pegues juntas en la misma página, porque duplicarías person-name y dejarías de comparar una asociación válida.
En la versión corregida, seleccionar “Name” lleva el foco al campo person-name; la clave enviada sigue siendo full_name. Prueba un solo cambio, recarga y verifica el foco antes de modificar también estilos o validaciones.
Conservar un nombre visible aunque haya placeholder
Un placeholder es una pista breve dentro del control y desaparece al escribir. No sustituye un nombre de campo que debe seguir siendo comprensible durante la edición.
<label for="email">Email address</label>
<input id="email" name="email" type="email"
placeholder="name@example.com">Introduce una dirección ficticia y comprueba que la etiqueta permanece aunque la pista ya no se vea. Las instrucciones necesarias para completar el valor también deben estar disponibles fuera de una pista temporal; la ayuda persistente con placeholder y aria-describedby desarrolla ese patrón.
Las casillas y los botones de opción pueden estar dentro de un label, por ejemplo una casilla seguida de “Acepto”. Al seleccionar el texto, comprueba que cambia su estado. Si un diseño oculta visualmente una etiqueta, sigue haciendo falta un nombre accesible adecuado; no resuelvas esa necesidad borrándola sin una alternativa comprobada. La referencia de label de MDN describe los métodos de asociación.
