Label para el Elemento de Input

El elemento <label> se utiliza para asociar una etiqueta a un campo de entrada de un formulario. Esta asociación ayuda a los usuarios a comprender la información que se solicita en el campo del formulario. Cuando un usuario hace clic en la etiqueta, se centra automáticamente en el campo de entrada correspondiente.

Hay dos formas de conectar los elementos de etiqueta (label) y de entrada (input):

Envolver

Al anidar un elemento de formulario, como un campo <input/>, dentro de un elemento <label>, el navegador establece automáticamente un vínculo entre la etiqueta (label) y el campo de entrada (input). Por ejemplo:

En este ejemplo, si hace clic en el texto de la etiqueta "Name", se abrirá automáticamente el campo de entrada correspondiente.

Uso del atributo id

Cuando un elemento de formulario no está anidado dentro de un elemento <label>, los enlazamos manualmente utilizando el atributo id del elemento input y el atributo for de la label. El valor de los atributos for e id debe ser el mismo. Por ejemplo:

En este caso, la etiqueta se asocia al campo de entrada mediante el atributo for de la etiqueta y el atributo id del campo de entrada. Si hace clic en el texto de la etiqueta "Name", también se abrirá el campo de entrada correspondiente.

Nota

Con estos métodos establecemos una conexión visual y semántica entre la etiqueta y el campo de entrada. Sin embargo, puede haber situaciones en las que envolver el elemento input dentro de la label sea imposible debido a restricciones de estilo o a la lógica del sitio web. En estos casos, solemos confiar en las conexiones de atributos para mantener la flexibilidad a la hora de aplicar estilos e implementar la lógica de fondo.

Una vez más, examinemos la diferencia entre los dos enfoques inspeccionando el código de la imagen.

Nota

Desde la perspectiva del navegador, el método elegido para establecer la conexión es intrascendente. Ambos métodos consiguen el mismo resultado de vincular la etiqueta y el campo de entrada para mejorar la usabilidad y la accesibilidad.