Os formulários são essenciais para a coleta de dados em páginas web, permitindo a interação direta entre usuários e sites. Neste glossário, você encontrará as principais tags HTML utilizadas para a construção de formulários, com explicações simples e exemplos práticos.

1. <form>

   • Define o início e o fim de um formulário. Contém todos os campos e botões do formulário.

   • Exemplo:

     <form action="envia_dados.php" method="post">
     </form>
     
     

2. <input>

   • Cria diferentes tipos de campos de entrada, como texto, e-mail, senha, etc.

   • Exemplo para campo de texto:

     <input type="text" name="nome">
     
     

   • Principais tipos:

     • text: Campo de texto.
     • email: Campo específico para e-mail.
     • password: Campo para senha.
     • submit: Botão para enviar o formulário.

3. <label>

   • Associa uma descrição a um campo de formulário, facilitando a usabilidade.

   • Exemplo:

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

4. <textarea>

   • Cria uma área de texto para múltiplas linhas de entrada, ideal para mensagens ou comentários.

   • Exemplo:

     <textarea name="mensagem" rows="4" cols="50"></textarea>
     
     

5. <select>

   • Cria uma lista suspensa (dropdown) de opções.

   • Exemplo:

     <select name="opcoes">
       <option value="opcao1">Opção 1</option>
       <option value="opcao2">Opção 2</option>
     </select>
     
     

6. <option>

   • Define cada item dentro de uma lista suspensa (<select>).

   • Exemplo:

     <option value="opcao1">Opção 1</option>
     
     

7. <button>

   • Cria um botão, que pode ser usado para enviar o formulário ou realizar outra ação.

   • Exemplo:

     <button type="submit">Enviar</button>
     
     

8. <fieldset>

   • Agrupa elementos do formulário em um bloco lógico, geralmente com uma borda em volta.

   • Exemplo:

     <fieldset>
       <legend>Informações Pessoais</legend>
       <!-- Campos aqui -->
     </fieldset>
     
     

9. <legend>

   • Adiciona um título a um <fieldset>, explicando o grupo de campos.

   • Exemplo:

     <fieldset>
       <legend>Dados de Contato</legend>
     </fieldset>
     
     

10. <input type="radio">

    • Cria uma opção de escolha única (botão de rádio) em um grupo de opções.

    • Exemplo:

      <input type="radio" name="genero" value="masculino"> Masculino
      <input type="radio" name="genero" value="feminino"> Feminino
      
      

11. <input type="checkbox">

    • Cria uma caixa de seleção, permitindo escolher múltiplas opções.

    • Exemplo:

      <input type="checkbox" name="aceitar" value="sim"> Aceito os termos
      
      

12. <input type="file">

    • Cria um campo para upload de arquivos.

    • Exemplo:

      <input type="file" name="arquivo">
      
      

13. <datalist>

    • Cria uma lista de sugestões para o campo de texto, exibindo opções conforme o usuário digita.

    • Exemplo:

      <input list="sugestoes" name="cor">
      <datalist id="sugestoes">
        <option value="Vermelho">
        <option value="Verde">
        <option value="Azul">
      </datalist>
      
      

Essas tags são essenciais para construir formulários completos e interativos em HTML. Cada uma tem um papel específico para facilitar a coleta de dados e melhorar a experiência do usuário.