Etiqueta de entrada HTML

Introducción

La etiqueta HTML <label> se utiliza para agregar una leyenda o texto de etiqueta a cualquier elemento HTML en la página web. En este laboratorio, aprenderemos cómo usar la etiqueta <label> en HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

Agregar una etiqueta a un elemento de entrada

1. Abra el archivo index.html en su editor de texto preferido.
2. Agregue el siguiente código para crear un elemento de entrada con una etiqueta:

<label for="name">Nombre:</label> <input type="text" id="name" name="name" />

3. El atributo for del elemento label debe coincidir con el atributo id del elemento de entrada con el que está asociado.

Usar el elemento label para crear un área clicable

1. Abra el archivo index.html en su editor de texto preferido.
2. Agregue el siguiente código para crear un área clicable alrededor de una entrada:

<label>
  <input type="checkbox" />
  Haz clic aquí para seleccionar
</label>

3. Hacer clic en el texto "Haz clic aquí para seleccionar" ahora seleccionará la casilla de verificación.

Asociar una etiqueta con un elemento de formulario

1. Abra el archivo index.html en su editor de texto preferido.
2. Agregue el siguiente código para crear un elemento de formulario con una etiqueta:

<form action="/" method="post">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Enviar" />
</form>

3. El atributo for del elemento label debe coincidir con el atributo id del elemento de formulario con el que está asociado.

Dar estilo a una etiqueta

1. Abra el archivo index.html en su editor de texto preferido.
2. Agregue el siguiente código para crear un elemento de etiqueta con una clase CSS:

<label class="large-label" for="name">Nombre:</label>
<input type="text" id="name" name="name" />

3. Agregue el siguiente CSS a su hoja de estilos para dar estilo a la etiqueta:

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Usar el elemento label para mejorar la accesibilidad

1. Abra el archivo index.html en su editor de texto preferido.
2. Agregue el siguiente código para crear un elemento de entrada con una etiqueta para la accesibilidad de los lectores de pantalla:

<label for="name">Nombre:</label>
<input type="text" id="name" name="name" aria-label="Ingrese su nombre" />

3. El atributo aria-label proporciona una etiqueta textual para el elemento de entrada que es accesible para los lectores de pantalla.

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta HTML <label> para agregar leyendas o texto de etiqueta a los elementos HTML en una página web. La etiqueta <label> es útil para mejorar la accesibilidad y aumentar el área clicable de un elemento. También aprendimos cómo asociar etiquetas con elementos de formulario y dar estilo a las etiquetas usando CSS.