HTML: Formulário Estrutura, elementos e atributos
Não existe aplicação web sem um formulário. Seja para login, cadastro, contato ou pesquisa, os formulários são essenciais para a interação do usuário com o site. Por isso, é fundamental entender como criar e estruturar formulários de maneira eficaz.
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.
Pré-Requisitos
- Para um melhor aproveitamento, é recomendado ter um entendimento básico de HTML. Veja nossos artigos de introdução ao HTML, começando pela estrutura essencial: HTML: Estrutura essencial — tutorial passo a passo
Objetivo
O objetivo dessa tutoria é 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.
Estruturando um Formulário
O Elemento <form>
O elemento pai <form> formalmente define a estrutura do 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 para processamento, pode incluir parâmetros de consulta e outras informações. Ele determina o destino do processamento dos dados, geralmente um script no servidor (ex: .php, .asp, API)
Exemplo:action="/enviar.php" - 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, método padrão).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 commethod="post".
Valores comuns:application/x-www-form-urlencoded(padrão): Codifica todos os caracteres antes do envio. Ideal para formulários simples de texto.multipart/form-data: Necessário para upload de arquivos. Envia os dados em partes, permitindo o envio de arquivos binários.text/plain: Envia os dados sem codificação, não recomendado para uso geral, pois pode dificultar a interpretação pelo servidor.
- autocomplete: (ou autopreenchimento) Controla se o navegador pode sugerir preenchimento automático dos campos. É uma funcionalidade que identifica campos padrões (nome, e-mail, endereço) e sugere dados salvos anteriormente no navegador.
Valores:
on(padrão) ouoff. Exemplo:autocomplete="off" - novalidate: Ativa ou desativa a validação automática, padrão dos campos pelo navegador ao enviar o formulário. Exemplo:
<form novalidate> - target: Especifica onde exibir a resposta após o envio, submissão do formulario.
Valores padrão do Atributo Target em Form:
- _self (Padrão): Carrega o resultado na mesma aba/janela.
- _blank: Abre a resposta do formulário em uma nova aba ou janela.
- _parent: Carrega a resposta no frameset pai.
- _top: Carrega a resposta no corpo completo da janela, cancelando frames.
- Nome/ID de Iframe: Pode-se usar o atributo name de um
<iframe>para exibir a resposta dentro dele.
Organização do formulário com <fieldset> e <legend>
Os atributos <fieldset> e <legend> ajudam a agrupar campos relacionados para melhorar a legibilidade e acessibilidade do formulário.
-
<fieldset>Agrupa campos relacionados dentro de um formulário, criando uma seção lógica e desenhando uma borda ao redor deles para melhor organização visual. <legend>Usada para definir um título ou legenda para um grupo de campos relacionados, definido pela tag
<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>Principais Elementos de um Formulário
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 funcionalidade 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.
Como usar 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>
Como usar 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>
Como usar 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="exemplo@dominio.com" required>
Como usar 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">
Como usar 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">
Como usar 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">
Como usar campo 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/*">
Como usar 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">
Botões de Seleção
Como usar 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:
Como usar 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>Assunto de interesses:
Como usar 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">
Como usar 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">
Como usar o 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>
Como permitir seleções múltiplas em um select
Podemos usar o atributo multiple para permitir que o usuário selecione mais de um valor, Para seleção múltipla, é recomendado usar o atributo size para mostrar mais opções ao mesmo tempo, evitando a necessidade de rolagem:
Obs: Para selecionar múltiplas opções, o usuário pode usar Ctrl (Windows) ou Command (Mac) enquanto clica nas opções desejadas.
<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>
Como usar 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" value="#ff0000">
Como usar 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>
Como usar 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>Como usar 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">Como usar 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 como usar 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.
Veja aqui no meu CodePen o exemplo prático.
Que aprender mais sobre, veja abaixo nossos artigos de como melhorar seus formulários, de forma prática e detalhada: o primeiro mostra como validar formulários com JavaScript, e o segundo, como estilizar com CSS3 e o terceiro, como utilizar o Bootstrap 5 para estilização e validação.
Conclusão
Agora você domina os principais elementos dos formulários em HTML! Com este conhecimento completo sobre inputs, labels, textareas, selects, buttons e validação, você está preparado para criar formulários profissionais, acessíveis e otimizados para conversão.
Os formulários bem estruturados são fundamentais para capturar dados de usuários, melhorar a experiência do visitante e aumentar as taxas de conversão do seu site. Lembre-se de sempre priorizar a acessibilidade, semântica HTML adequada e validação tanto no cliente quanto no servidor.
Próximos passos: combine este conhecimento com JavaScript para validação dinâmica e CSS para estilização responsiva. Explore também as práticas de UX/UI para melhorar ainda mais a experiência dos seus usuários ao preencher formulários.
Tem dúvidas ou precisa de ajuda com formulários mais complexos? Entre em contato comigo – estou pronto para auxiliar no desenvolvimento de soluções robustas e eficientes!
Comentários
Não foi possível carregar os comentários no momento.
Deixe seu comentário