Summary  
The chapter covers associating text labels with form input elements by matching a label’s for attribute to an input’s id attribute, enhancing accessibility and focus control.

General domain of usage  
Web forms in HTML-based user interfaces.


<u>Las etiquetas (`<label>`) son esenciales para vincular los textos descriptivos con los elementos de entrada de formularios</u>, mejorando la accesibilidad y la facilidad de uso. Es fundamental que **el atributo `for` de la etiqueta** `<label>` **coincida con el atributo** `id` **del elemento** `input` **asociado.** <br>**Ejemplo**:
```html
<label for="username">Username:</label>
<input type="text" id="username" />
```
En el ejemplo anterior:
- Al hacer clic en la etiqueta `Username:`, el foco se desplazará automáticamente al campo de entrada correspondiente;
- La `label` y el `input` están vinculados mediante los atributos `for` e `id`, respectivamente;
- Ambos atributos `for` e `id` tienen el mismo valor (`username`).

Facilitar el llenado del formulario añadiendo etiquetas a los campos de entrada del ejemplo anterior.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9InRleHQtaW5wdXQiPkVudGVyIHlvdXIgbmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InRleHQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQtaW5wdXQiPkVudGVyIHlvdXIgcGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0ibWFpbCI+RW50ZXIgeW91ciBlbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBob25lIj5QaG9uZSBudW1iZXI6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRlbCIgaWQ9InBob25lIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iY2hlY2tib3gtaW5wdXQiPkFncmVlIHdpdGggdGVybXMgYW5kIGNvbmRpdGlvbnM6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBpZD0iY2hlY2tib3gtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icmFkaW8taW5wdXQiPlNlbGVjdCB5b3VyIGdlbmRlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIGlkPSJyYWRpby1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJmaWxlLWlucHV0Ij5VcGxvYWQgYSBmaWxlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJmaWxlIiBpZD0iZmlsZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRlLWlucHV0Ij5TZWxlY3QgYSBkYXRlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJkYXRlIiBpZD0iZGF0ZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJ0aW1lLWlucHV0Ij5TZWxlY3QgYSB0aW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0aW1lIiBpZD0idGltZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRldGltZS1pbnB1dCI+TWFrZSBhbiBhcHBvaW50bWVudCBhdDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZGF0ZXRpbWUtbG9jYWwiIGlkPSJkYXRldGltZS1pbnB1dCIgLz4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

¿Qué atributo de la etiqueta `<label>` se utiliza para asociarla con un elemento `<input>` específico en un formulario?

¿Qué atributo falta en el elemento input que necesita asociarse con el elemento label?

Domina los conceptos esenciales de HTML para crear contenido web bien estructurado y accesible. Aprende a estructurar documentos utilizando etiquetas, elementos y atributos. Trabaja con confianza con texto, listas, imágenes, audio y video para enriquecer las páginas web. Crea tablas para organizar datos y formularios para la entrada e interacción del usuario. Descubre el HTML semántico para mejorar la accesibilidad y construye estructuras completas y funcionales de sitios web desde cero.

Master the essentials of HTML to build well-structured and accessible web content. Learn how to structure documents using tags, elements, and attributes. Work confidently with text, lists, images, audio, and video to enrich web pages. Create tables for organized data and forms for user input and interaction. Discover semantic HTML to enhance accessibility and build complete, functional website structures from the ground up.

Etiquetado de Campos de Formulario

1. ¿Qué atributo de la etiqueta `<label>` se utiliza para asociarla con un elemento `<input>` específico en un formulario?

2. ¿Qué atributo falta en el elemento input que necesita asociarse con el elemento label?

Etiquetado de Campos de Formulario

1. ¿Qué atributo de la etiqueta <label> se utiliza para asociarla con un elemento <input> específico en un formulario?

2. ¿Qué atributo falta en el elemento input que necesita asociarse con el elemento label?

1. ¿Qué atributo de la etiqueta `<label>` se utiliza para asociarla con un elemento `<input>` específico en un formulario?