HTML label

HTML label

A tag HTML <label> é usada para fornecer uma melhoria de usabilidade para usuários de mouse, ou seja, se um usuário clicar no texto dentro do elemento <label>, ele alterna o controle. 

A tag <label> define o rótulo para o elemento <button>, <input>, <meter>, <output>, <progress>, <select> ou <textarea>.

• Primeiramente, use a tag <label> fornecendo o atributo <input> e id. A tag <label> precisa de um atributo for cujo valor seja igual ao ID de entrada.
• Alternativamente, use a tag <input> diretamente dentro da tag <label>. Nesse caso, os atributos for e id não são necessários porque a associação é implícita.

A tag <label> pode ser usada de duas maneiras: 

Valor do atributo: 

• for : Refere-se ao controle de entrada para o qual este rótulo se destina. Seu valor deve ser igual ao valor do atributo “id” do controle de entrada.
• form : Refere-se ao formulário ao qual o rótulo pertence.

Veja como usar a Tag HTML <label>:

<form action="dados.php">
   
   <label for="seunome">Seu Nome: </label>
   <input type="text" name="seunome" id="seunome"><br>
   
   <label for="email">E-mail: </label>
   <input type="text" name="email" id="email"><br>
   
   <input type="submit" value="Enviar">
 
</form>

Veja outro exemplo utilizando a tag <label> dentro da tag <form>.

    <form action="dados.php">
      
      <label>
        <span>Masculino</span>
        <input type="radio" name="sexo" id="masculino" value="masculino" />
      </label>
  
      <label>
        <span>Feminino</span>
        <input type="radio" name="sexo" id="feminino" value="feminino" /> 
      </label>
      
      <label>
         <input type="submit" value="Enviar">
      </label>

    </form>

Neste artigo abordamos sobre a tag HTML label.

Veja outros artigos sobre Relacionados Tags HTML de Formulários !