HTML: Formulário Estruturar, elementos e atributos

Sharing is caring!

Pré-Requisitos

• Introdução ao HTML – veja nosso artigo: Tutorial Passo a Passo: Estrutura Básica do HTML

Objetivo

Compreender como criar e estruturar formulários em HTML, explorando seus elementos e atributos de maneira semântica, para desenvolver formulários funcionais, acessíveis e úteis, alinhados às melhores práticas de desenvolvimento.

Introdução

Os formulários são usados para coletar informações do usuário e enviá-las ao servidor para processamento. Cada elemento de formulário possui uma função específica, como capturar texto, selecionar opções, carregar arquivos ou enviar dados.

A flexibilidade dos formulários HTML faz com que sejam uma das estruturas mais complexas do HTML. Com elementos e atributos exclusivos, é possível construir qualquer tipo de formulário básico. Usar a estrutura correta ao criar um formulário HTML garante que ele seja utilizável e acessível.

Estruturando um Formulário

O Elemento <form>

O elemento <form> formalmente define o formulário e os atributos que determinam seu comportamento. Sempre que desejar criar um formulário HTML, inicie com este elemento, colocando todo o conteúdo relacionado dentro dele. Muitas tecnologias assistivas ou plugins de navegadores podem identificar este elemento e implementar recursos especiais para torná-lo mais fácil de usar.

<form action="/enviar" method="post">
  <!-- Conteúdo do formulário -->
</form>

Principais atributos do <form>

• action: Define a URL para onde os dados do formulário serão enviados após o envio.
  Exemplo: action="/enviar"
• method: Especifica o método HTTP usado para enviar os dados. Os valores mais comuns são:
  • get: Dados enviados na URL (visíveis e limitados em tamanho).
  • post: Dados enviados no corpo da requisição (mais seguro para dados sensíveis). Exemplo: method="post"
• enctype: Define como os dados do formulário serão codificados ao serem enviados ao servidor.
  Usado principalmente com method="post".
  Valores comuns:
  • application/x-www-form-urlencoded (padrão)
  • multipart/form-data (necessário para upload de arquivos)
  • text/plain Exemplo: enctype="multipart/form-data"
• autocomplete: Controla se o navegador pode sugerir preenchimento automático dos campos.
  Valores: on (padrão) ou off. Exemplo: autocomplete="off"
• novalidate: Se presente, desativa a validação automática dos campos pelo navegador ao enviar o formulário. Exemplo: <form novalidate>
• target: Especifica onde exibir a resposta após o envio do formulário.
  Valores comuns: _self, _blank, _parent, _top. Exemplo: target="_blank"

Esses atributos permitem controlar o comportamento do formulário, tornando-o mais seguro, flexível e adequado ao contexto da aplicação.

Organização do formulário com <fieldset> e <legend>

Agrupe campos relacionados para melhorar a legibilidade e acessibilidade do formulário. O <fieldset> cria um agrupamento visual e lógico, enquanto o <legend> fornece uma descrição para o grupo.

<fieldset>
  <legend>Informações Pessoais</legend>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome"><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

2. Elemento <input>

O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web, permitindo receber dados do usuário. A semântica de um <input> varia consideravelmente dependendo do valor de seu atributo type.

Atributos Comuns do input:

• type: Define o tipo de entrada (ex.: texto, senha, e-mail).
• name: Identifica o campo no envio para o servidor.
• value: Especifica o valor padrão do campo.
• placeholder: Mostra uma dica no campo.
• required: Torna o campo obrigatório.
• disabled: Desativa o campo, impedindo interação.
• readonly: Permite visualização, mas não edição.

Principais tipos de input:

Campo de Texto – input type="text"

É um campo de texto com uma só linha; quebras de linha são automaticamente removidas do valor inserido, como nomes ou endereços.

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" maxlength="50" placeholder="Digite seu nome" required>

Campo de Senha – input type="password"

Um campo de texto com uma só linha que esconde os caracteres digitados, ideal para senhas.

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" maxlength="20" required>

Campo de E-mail – input type="email"

Valida o formato de um endereço de e-mail. O valor do campo é validado para estar vazio ou conter um único endereço de e-mail válido antes de ser enviado.

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>

Campo Numérico – input type="number"

Controle que permite inserir apenas números, inclusive números de ponto flutuante.

<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="0" max="120">

Campo de Data – input type="date"

Abre um seletor de datas no navegador. Um controle para inserir uma data (ano, mês e dia, sem horário).

<label for="data">Data:</label>
<input type="date" id="data" name="data">

Campo de Data e Hora – input type="datetime-local"

Abre um seletor de datas e horários no navegador. Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo).

<label for="datahora">Data e Hora:</label>
<input type="datetime-local" id="datahora" name="datahora">

Upload de Arquivos – input type="file"

Um controle que permite ao usuário selecionar um arquivo. Pode usar o atributo accept para definir os tipos de arquivo que o controle pode selecionar.

<label for="arquivo">Selecione um arquivo:</label>
<input type="file" id="arquivo" name="arquivo" accept=".pdf,.doc,.docx,image/*">

Campo de Telefone – input type="tel"

Controle para inserir um número de telefone. Ideal para digitar/capturar números de telefone. Pode usar atributos pattern e maxlength para restringir os valores inseridos no controle.

<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone" placeholder="(XX) XXXXX-XXXX" pattern="\(\d{2}\)\s?\d{4,5}-\d{4}" maxlength="15">

3. Botões de Seleção

Botões de Rádio – input type="radio"

Um botão de escolha. Permite ao usuário escolher apenas uma opção dentro de um grupo. Use o atributo checked para indicar se este item deve estar selecionado por padrão.

<p>Gênero:</p>
<input type="radio" id="masculino" name="genero" value="masculino" checked>
<label for="masculino">Masculino</label><br>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>

Gênero:

Caixas de Seleção – input type="checkbox"

Uma caixa de marcação. Use o atributo checked para indicar se o item está selecionado por padrão.

<p>Interesses:</p>
<input type="checkbox" id="esporte" name="interesses" value="esporte">
<label for="esporte">Esporte</label><br>
<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label><br>
<input type="checkbox" id="cinema" name="interesses" value="cinema">
<label for="cinema">Cinema</label>

Interesses:

Campo de URL – input type="url"

Um campo para editar uma URL.

<label for="url">Site pessoal:</label>
<input type="url" id="url" name="url" placeholder="https://exemplo.com">

Campo de Busca – input type="search"

Um campo de texto com uma só linha para digitar termos de busca.

<label for="search">Pesquisar:</label>
<input type="search" id="search" name="search" placeholder="Digite sua pesquisa">

4. Elemento <select>

Elemento que define uma lista suspensa para seleção.

Mostrar valores simples

<label for="escolaridade">Escolaridade:</label>
<select id="escolaridade" name="escolaridade">
  <option value="medio">Ensino Médio</option>
  <option value="superior">Ensino Superior</option>
  <option value="pos">Pós-Graduação</option>
</select>

Definir valores visíveis

Use o atributo size para especificar o número de valores visíveis:

<label for="escolaridade">Escolaridade:</label>
<select id="escolaridade" name="escolaridade" size="3">
  <option value="medio">Ensino Médio</option>
  <option value="superior">Ensino Superior</option>
  <option value="pos">Pós-Graduação</option>
  <option value="mestrado">Mestrado</option>
</select>

Permitir seleções múltiplas

Podemos usar o atributo multiple para permitir que o usuário selecione mais de um valor:

<label for="escolaridade">Escolaridade:</label>
<select id="escolaridade" name="escolaridade" size="3" multiple>
  <option value="medio">Ensino Médio</option>
  <option value="superior">Ensino Superior</option>
  <option value="pos">Pós-Graduação</option>
  <option value="mestrado">Mestrado</option>
</select>

Campo tipo Cor – <input type="color">

O <input type="color"> é usado para campos de entrada que devem conter uma cor.

<label for="favcolor">Selecione sua cor favorita:</label>
<input type="color" id="favcolor" name="favcolor">

Campo tipo range – <input type="range">

É um controle deslizante que permite ao usuário selecionar um valor dentro de um intervalo definido.

<label for="range">Selecione um número entre 0 e 100:</label>
<input type="range" id="range" name="range" min="0" max="100"><br>

Elemento <textarea>

Usado para entradas de texto longas, como comentários.
O atributo rows especifica o número visível de linhas em uma área de texto.
O atributo cols especifica a largura visível de uma área de texto.

<label for="comentario">Comentário:</label>
<textarea id="comentario" name="comentario" rows="4" cols="50" placeholder="Escreva seu comentário aqui..."></textarea>

Botões

Botão de Envio – <input type="submit">

Define um botão para enviar dados de formulário.

<input type="submit" value="Enviar formulário">

Botão de Redefinição – <input type="reset">

Define um botão de reinicialização que redefinirá todos os valores do formulário para seus valores padrão (limpa o formulário).

<input type="reset" value="Limpar formulário">

Exemplo completo de um formulário

Neste exemplo, apresentamos um formulário completo utilizando os principais elementos do HTML. O objetivo é demonstrar como estruturar um formulário funcional, semântico e acessível, incorporando boas práticas de desenvolvimento.

<form action="/enviar" method="post">
      <fieldset>
       <legend>Exemplo de legenda de formulário</legend>
       <label for="nome">Campo Texto</label>
       <input type="text" id="nome" name="nome" maxlength="50" placeholder="Campo texto" required>
       <label for="senha">Senha:</label>
       <input type="password" id="senha" name="senha" maxlength="20" required>
       <label for="email">Email:</label>
       <input type="email" id="email" name="email" maxlength="50" placeholder="Digite seu email" required>
       <label for="idade">Campo número:</label>
       <input type="number" id="idade" name="idade" min="0" max="120">
       <label for="data">Campo Data:</label>
       <input type="date" id="data" name="data">
       <label for="datahora">Campo Data e Hora:</label>
       <input type="datetime-local" id="datahora" name="datahora">
       <label for="arquivo">Campo arquivo:</label>
       <input type="file" id="arquivo" name="arquivo" accept=".pdf,.doc,.docx,image/*">
       <label for="telefone">Campo Telefone:</label>
       <input type="tel" id="telefone" name="telefone" placeholder="(XX) XXXXX-XXXX"
        pattern="\(\d{2}\)\s?\d{4,5}-\d{4}" maxlength="15">
       <p>Botões de Rádio:</p>
       <input type="radio" id="masculino" name="genero" value="masculino" checked>
       <label for="masculino">Masculino</label>
       <input type="radio" id="feminino" name="genero" value="feminino">
       <label for="feminino">Feminino</label>
       <p>Caixas de Seleção:</p>
       <input type="checkbox" id="esporte" name="interesses" value="esporte">
       <label for="esporte">Esporte</label>
       <input type="checkbox" id="musica" name="interesses" value="musica">
       <label for="musica">Música</label>
       <input type="checkbox" id="cinema" name="interesses" value="cinema">
       <label for="cinema">Cinema</label>
       <label for="url">Tipo URL:</label>
       <input type="url" id="url" name="url" placeholder="https://exemplo.com">
       <label for="search">Campo de Busca:</label>
       <input type="search" id="search" name="search" placeholder="Campo de Busca">
       <label for="escolaridade">Tipo Seleção - Mostrar valores simples:</label>
       <select id="escolaridade" name="escolaridade">
        <option value="medio">Ensino Médio</option>
        <option value="superior">Ensino Superior</option>
        <option value="pos">Pós-Graduação</option>
       </select>
       <label for="escolaridade2">Definir número de valores visíveis (atributo Size):</label>
       <select id="escolaridade2" name="escolaridade2" size="3">
        <option value="medio">Ensino Médio</option>
        <option value="superior">Ensino Superior</option>
        <option value="pos">Pós-Graduação</option>
        <option value="mestrado">Mestrado</option>
       </select>
       <label for="escolaridade3">Permitir que o usuário selecione mais de um valor (atributo multiple):</label>
       <select id="escolaridade3" name="escolaridade3" size="3" multiple>
        <option value="medio">Ensino Médio</option>
        <option value="superior">Ensino Superior</option>
        <option value="pos">Pós-Graduação</option>
        <option value="mestrado">Mestrado</option>
       </select>
       <label for="favcolor">Selecione sua cor favorita:</label>
       <input type="color" id="favcolor" name="favcolor">
       <label for="range">Selecione um número entre 0 e 100:</label>
       <input type="range" id="range" name="range" min="0" max="100">
       <input type="submit" value="Enviar formulário"><br><br>
       <input type="reset" value="Limpar Formulario"<br><br>
      </fieldset>
      </form>

Conclusão

Este guia apresentou os principais elementos dos formulários em HTML, detalhando suas funções e usos. Com base nas explicações e exemplos fornecidos, você estará apto a criar formulários bem estruturados, funcionais e acessíveis, alinhados às boas práticas de desenvolvimento. Caso precise de mais exemplos, orientações específicas ou tenha dúvidas, sinta-se à vontade para entrar em contato. Estou aqui para ajudar!

Referências

• MDN Web Docs: Formulários HTML
• W3Schools: HTML Forms
• HTML Living Standard

Please follow and like us: