Formulários em HTML

1. Introdução aos Formulários

Formulários em HTML são uma ferramenta importante para interagir com os usuários em páginas web. Eles permitem que você colete informações dos usuários, seja texto, seleção de opções, arquivos ou outros dados, que podem então ser enviados para o servidor para processamento. Em HTML, os formulários são criados usando diversos elementos, cada um deles projetado para receber um tipo específico de entrada. O elemento principal dos formulários é o <form>, que inclui outros elementos como <input>, <textarea>, <button>, <select> e outros.

Elementos principais de um formulário

Os elementos de formulário permitem criar campos de entrada, botões, menus suspensos e outros elementos de interface que os usuários podem usar para fornecer dados. As tags principais usadas nos formulários são:

• <form> — o contêiner principal para todos os elementos do formulário. Ele define para onde e como os dados serão enviados.
• <input> — um elemento universal para criar campos de entrada de diversos tipos (texto, senha, botões de rádio, checkboxes, etc.).
• <label> — um elemento associado a um campo de entrada, que descreve o propósito do campo.
• <textarea> — um campo para entrada de texto com várias linhas.
• <button> — botão para enviar o formulário ou realizar outras ações.
• <select> e <option> — uma lista suspensa onde o usuário pode selecionar uma ou várias opções.

Exemplo de um formulário simples

      
    <form action="/submit" method="post">
      <label for="name">Nome:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Enviar</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Enviar</button>
</form>

• action no <form> define a URL para onde os dados do formulário serão enviados.
• method indica o método de envio dos dados: post ou get.

HTML <input>

A tag <input> é um dos elementos mais universais de um formulário HTML. Ela suporta diferentes tipos de entrada, cada uma destinada a um tipo específico de dado.

A sintaxe da tag <input>:

<input type="tipo" name="nome_do_campo" id="identificador" value="valor">

<input type="tipo" name="nome_do_campo" id="identificador" value="valor">

Atributos usados na <input>:

• type — tipo de entrada (ex.: texto, senha, email, etc.).
• name — nome do campo, usado pelo servidor para identificar os dados.
• id — identificador único, usado para associar ao <label>.
• value — valor que aparece no campo de entrada por padrão (ex.: texto padrão em um campo de texto).

Tipos principais de <input>

• Campo de texto type="text" — para entradas curtas de texto, como nome ou sobrenome.
  HTML

        
          <label for="username">Nome de usuário:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Nome de usuário:</label>
          <input type="text" id="username" name="username">
        
      
• Senha type="password" — para entrada de senhas. Os caracteres inseridos aparecem como pontos ou asteriscos.
  HTML

        
          <label for="password">Senha:</label>
  <input type="password" id="password" name="password">
        
      

  HTML

        
          <label for="password">Senha:</label>
  <input type="password" id="password" name="password">
        
      
• Email type="email" — para entrada de endereço de email. Este campo verifica a formatação correta do email inserido.
  HTML

        
          <label for="email">Email:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">Email:</label>
  <input type="email" id="email" name="email">