Rótulo de Entrada HTML

Introdução

A tag HTML <label> é usada para adicionar uma legenda ou texto de rótulo a qualquer elemento HTML na página web. Neste laboratório, aprenderemos como usar a tag <label> em HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionando um Rótulo a um Elemento de Entrada

1. Abra o arquivo index.html no seu editor de texto preferido.
2. Adicione o seguinte código para criar um elemento de entrada com um rótulo:

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

3. O atributo for do elemento label deve corresponder ao atributo id do elemento de entrada ao qual ele está associado.

Usando o Elemento Label para Criar uma Área Clicável

1. Abra o arquivo index.html no seu editor de texto preferido.
2. Adicione o seguinte código para criar uma área clicável ao redor de uma entrada:

<label>
  <input type="checkbox" />
  Click here to select
</label>

3. Clicar no texto "Click here to select" agora selecionará a caixa de seleção (checkbox).

Associando um Label a um Elemento de Formulário

1. Abra o arquivo index.html no seu editor de texto preferido.
2. Adicione o seguinte código para criar um elemento de formulário com um rótulo:

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

3. O atributo for do elemento label deve corresponder ao atributo id do elemento de formulário ao qual ele está associado.

Estilizando um Label

1. Abra o arquivo index.html no seu editor de texto preferido.
2. Adicione o seguinte código para criar um elemento de rótulo com uma classe CSS:

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

3. Adicione o seguinte CSS à sua folha de estilo para estilizar o rótulo:

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

Usando o Elemento Label para Melhorar a Acessibilidade

1. Abra o arquivo index.html no seu editor de texto preferido.
2. Adicione o seguinte código para criar um elemento de entrada (input) com um rótulo para acessibilidade de leitores de tela:

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />

3. O atributo aria-label fornece um rótulo textual para o elemento de entrada que é acessível para leitores de tela.

Resumo

Neste laboratório, aprendemos como usar a tag HTML <label> para adicionar legendas ou texto de rótulo a elementos HTML em uma página web. A tag <label> é útil para melhorar a acessibilidade e aumentar a área clicável de um elemento. Também aprendemos como associar rótulos a elementos de formulário e estilizar rótulos usando CSS.