HTML <rótulo> Tag
Exemplo
Três botões de opção com rótulos:
<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>
Definição e uso
A <label>tag define um rótulo para vários elementos:
- <input type="checkbox">
- <input type="color">
- <input type="data">
- <input type="datetime-local">
- <input type="email">
- <input type="arquivo">
- <input type="mês">
- <input type="número">
- <input type="senha">
- <input type="radio">
- <input type="intervalo">
- <input type="pesquisa">
- <input type="tel">
- <input type="texto">
- <input type="time">
- <input type="url">
- <input type="semana">
- <metro>
- <progresso>
- <selecione>
- <textarea>
O uso adequado de rótulos com os elementos acima beneficiará:
- Usuários de leitores de tela (lerão em voz alta o rótulo, quando o usuário estiver focado no elemento)
- Usuários que têm dificuldade em clicar em regiões muito pequenas (como caixas de seleção) - porque quando um usuário clica no texto dentro do
<label>elemento, ele alterna a entrada (isso aumenta a área de acerto).
Dicas e Notas
Dica: O atributo for de <label>
deve ser igual ao atributo id do elemento relacionado para vinculá-los. Um rótulo também pode ser vinculado a um elemento colocando o elemento dentro do <label>elemento.
Suporte ao 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 Globais
A <label>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <label>tag também suporta os atributos de evento em HTML .
Páginas relacionadas
Referência HTML DOM: objeto de rótulo
Configurações padrão de CSS
A maioria dos navegadores exibirá o <label>elemento com os seguintes valores padrão:
Exemplo
label {
cursor: default;
}