Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Uso de Etiquetas para Mejorar la Accesibilidad de Formularios | Formularios HTML y Entrada de Usuario
HTML Definitivo
course content

Contenido del Curso

HTML Definitivo

HTML Definitivo

1. Comprensión del Desarrollo Web
2. Etiquetas y Atributos HTML
3. Estructura del Documento HTML
4. Trabajando con Medios y Tablas

book
Uso de Etiquetas para Mejorar la Accesibilidad de Formularios

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:

html

index.html

copy

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:

html

index.html

copy

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.

question mark

¿Cuál es el propósito del elemento <label> en los formularios HTML?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 3
Lamentamos que algo salió mal. ¿Qué pasó?
some-alt