Tag HTML <rótulo>

Estamos falando de Tag label com exemplos . Isso preencherá os requisitos para o aprendizado.

A tag HTML <label> define um rótulo para um elemento de formulário HTML, como <input> , <textarea> , <select> , etc.

Quatro botões de opção com rótulos:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<form action="https://mrexamples.com/html/tags/tag-label/">
<label for="paypal">PayPal</label>
<input type="radio" name="payment" id="paypal" value="paypal"><br>
<label for="visa">Visa</label>
<input type="radio" name="payment" id="visa" value="visa"><br>
<label for="mastercard">Master Card</label>
<input type="radio" name="payment" id="mastercard" value="mastercard"><br>
<label for="cod">Cash on Delivery</label>
<input type="radio" name="payment" id="cod" value="cod"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca <rótulo> HTML:

Uso de etiquetas de tags

Um rótulo de tag <label> fornece um rótulo para os seguintes elementos:

<tipo de entrada=”caixa de seleção”>
<tipo de entrada=”cor”>
<tipo de entrada=”data”>
<tipo de entrada=”data-hora-local”>
<tipo de entrada=”e-mail”>
<tipo de entrada=”arquivo”>
<tipo de entrada=”mês”>
<tipo de entrada=”número”>
<tipo de entrada=”senha”>
<tipo de entrada=”rádio”>
<tipo de entrada=”intervalo”>
<tipo de entrada=”pesquisar”>
<tipo de entrada=”tel”>
<tipo de entrada=”texto”>
<tipo de entrada=”tempo”>
<tipo de entrada=”url”>
<tipo de entrada=”semana”>
<metro>
<progresso>
<selecione>
<área de texto>

Ao aplicar rótulos adequadamente com os elementos acima, você será capaz de:

Um usuário de leitor de tela (ao se concentrar no elemento, ele lerá o rótulo em voz alta).
Usuários que têm problemas para clicar em elementos minúsculos (por exemplo, caixas de seleção) – porque quando o usuário pressiona o texto dentro do elemento <label>, ele ativa a entrada (expandindo assim a área de acerto).

Conselho: Um <label> para um atributo deve corresponder ao atributo id do elemento associado para vinculá-los coletivamente. Como alternativa, um rótulo pode ser anexado a um elemento colocando o elemento dentro do elemento <label> .

Vantagens do rótulo HTML

Usar a tag <label> em HTML tem várias vantagens:

A tag <label> é um elemento crucial para a acessibilidade na web. Ele ajuda os leitores de tela e outras tecnologias assistivas a entender a relação entre o rótulo e o controle de formulário, facilitando o preenchimento de formulários da web por usuários com deficiência.
Quando você usa o atributo for para vincular a tag <label> ao controle de formulário correspondente, clicar no rótulo definirá o foco no controle de formulário. Isso facilita a interação dos usuários com o formulário, especialmente em dispositivos móveis com tamanhos de tela menores.
A tag <label> fornece um rótulo visual para controles de formulário, o que torna mais fácil para os usuários entenderem quais informações devem inserir. Isso é especialmente importante para formulários mais longos com muitos campos.
A tag <label> pode ser estilizada com CSS para melhorar sua aparência, tornando mais fácil combinar o design do formulário com o design geral do site.

Atributos

Global

Em HTML, a Tag <label> aceita Atributos Globais .

Evento

Em HTML, a Tag <label> também aceita Atributos de Evento .

Compatibilidade do navegador

Elemento
<rótulo>	Sim	Sim	Sim	Sim	Sim

Lista de Atributos

Atributo	Valor	Visão geral
forma	form_id	Indica a forma da etiqueta.
para	element_id	Define o id do elemento de formulário no qual o rótulo deve ser aplicado.

CSS predefinido

A maioria dos navegadores mostrará o elemento <label> com os seguintes valores por padrão no Tag Label:

label {
cursor: default;
}

Se você achar este artigo informativo, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.