Tag <label>
ExemplosTrês botões de opção com rótulos: <input type="radio" id="html" name="fav_language" value="HTML"> <form action="/action_page.php"> <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 de Uso
A <label> tag define um rótulo para vários elementos:
- <tipo de entrada="caixa de seleção">
- <tipo de entrada="cor">
- <tipo de entrada="data">
- <input type="datetime-local">
- <tipo de entrada="e-mail">
- <tipo de entrada="arquivo">
- <tipo de entrada="mês">
- <tipo de entrada="número">
- <input type="senha">
- <tipo de entrada="rádio">
- <tipo de entrada="intervalo">
- <input type="pesquisar">
- <input type="tel">
- <tipo de entrada="texto">
- <tipo de entrada="tempo">
- <input type="url">
- <input type="semana">
- <metro>
- <progresso>
- <selecione>
- <área de texto>
O uso adequado de rótulos com os elementos acima beneficiará:
- Usuários de leitores de tela (lerão o rótulo em voz alta, quando o usuário estiver focado no elemento)
- Usuários que têm dificuldade de clicar em regiões muito pequenas (como checkboxes) - pois quando um
usuário
clica no texto dentro do <label>elemento, ele alterna a entrada (isso aumenta a área de acerto).
Suporte para Navegadores
|
Navegadores |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Compatibilidade | Sim | Sim | Sim | Sim | Sim |
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| for | element_id | Especifica o id do elemento de formulário ao qual o rótulo deve ser vinculado |
| form | form_id | Especifica a qual formulário o rótulo pertence |