Etiqueta HTML <etiqueta >
Ejemplo
Tres botones de opción con etiquetas:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio"
id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Definición y uso
La <label>etiqueta define una etiqueta para varios elementos:
- <tipo de entrada="casilla de verificación">
- <tipo de entrada="color">
- <tipo de entrada="fecha">
- <input type="datetime-local">
- <tipo de entrada="correo electrónico">
- <tipo de entrada="archivo">
- <tipo de entrada="mes">
- <tipo de entrada="número">
- <tipo de entrada="contraseña">
- <tipo de entrada="radio">
- <tipo de entrada="rango">
- <tipo de entrada="buscar">
- <tipo de entrada="tel">
- <tipo de entrada="texto">
- <tipo de entrada="hora">
- <tipo de entrada="url">
- <tipo de entrada="semana">
- <metro>
- <progreso>
- <seleccionar>
- <área de texto>
El uso adecuado de etiquetas con los elementos anteriores beneficiará:
- Usuarios de lectores de pantalla (leerán en voz alta la etiqueta, cuando el usuario esté enfocado en el elemento)
- Usuarios que tienen dificultades para hacer clic en regiones muy pequeñas (como casillas de verificación), porque cuando un usuario hace clic en el texto dentro del
<label>elemento, cambia la entrada (esto aumenta el área de impacto).
Consejos y notas
Sugerencia: el atributo for de <label>
debe ser igual al atributo id del elemento relacionado para unirlos. Una etiqueta también se puede vincular a un elemento colocando el elemento dentro del <label>elemento.
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Atributos globales
La <label>etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <label>etiqueta también es compatible con los atributos de eventos en HTML .
páginas relacionadas
Referencia HTML DOM: objeto de etiqueta
Configuración predeterminada de CSS
La mayoría de los navegadores mostrarán el <label>elemento con los siguientes valores predeterminados:
Ejemplo
label {
cursor: default;
}