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

Existen dos formas de conectar los elementos label e input:

Anidamiento

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

En este ejemplo, al hacer clic en el texto de la etiqueta "Nombre", se enfocará automáticamente el campo de entrada correspondiente.

Uso del atributo id

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

En este caso, la etiqueta está asociada con el campo de entrada utilizando el atributo for en la etiqueta y el atributo id en el campo de entrada. Al hacer clic en el texto de la etiqueta "Nombre", también se enfocará el campo de entrada correspondiente.

Nota

Al utilizar estos métodos, se establece una conexión visual y semántica entre el label y el campo input. Sin embargo, pueden existir situaciones en las que envolver el elemento input dentro del label sea imposible debido a restricciones de estilo o lógica del sitio web. En estos casos, comúnmente se recurre a la conexión mediante atributos para mantener la flexibilidad al aplicar estilos e implementar la lógica de fondo.

Examinemos la diferencia entre los dos enfoques analizando el código en la imagen.

Nota

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