Formulários no HTML: Guia Completo
Formulários HTML são a principal forma de um usuário inserir e enviar dados em uma página web, seja para fazer um cadastro, deixar um feedback ou concluir uma compra. Essa interação direta é essencial para a coleta de informações e para a interatividade online.
No decorrer deste artigo, vamos explorar como construir formulários básicos e entender o papel dos elementos form, input, label e button. Além disso, vamos ver diferentes tipos de entrada, desde campos de texto e senha até botões de opção e caixas de seleção.
Por fim, vamos dedicar uma boa parte do texto à acessibilidade. Ou seja, você vai sair daqui com basicamente todo o contexto de que precisa para usar formulários no dia a dia.
O que são formulários HTML?
O formulário representa um recipiente, uma parte da página destinada a coletar e encaminhar os dados que os usuários informam. Basicamente, ele mostra uma área na qual o usuário pode inserir texto, fazer seleções e marcar opções.
Quando o usuário clica em enviar, o navegador reúne os valores de todos os campos e os envia para um endereço definido por você. Em seguida, um servidor ou um script recebe essas informações e decide o que fazer com elas.
Por isso, formulários HTML estão por trás de quase toda ação importante na web. Login, busca, cadastro, checkout e páginas de contato usam a mesma base que veremos aqui.
O elemento form
Ao iniciar a construção de formulários HTML, o principal elemento é o form. Ele cria um container para todos os outros elementos relacionados ao formulário.
Seu uso é de extrema importância para estruturar e organizar as diversas partes que compõem a interação. Além disso, é ele que define para onde e como os dados serão enviados.
<form action="/register" method="post">
<!-- Todos os elementos do formulário ficam aqui -->
</form>
O atributo action indica a URL que vai receber os dados. Já o atributo method define o método HTTP do envio, normalmente get ou post.
Na prática, use get para buscas e filtros, em que os valores podem aparecer na URL. Por outro lado, use post para cadastros, senhas e qualquer dado que altere informações no servidor.
O elemento input nos formulários HTML
O elemento input é responsável por capturar as informações de entrada do usuário, como nome ou endereço de e-mail. Nos formulários HTML, você cria esses campos com o input e configura o atributo type de acordo com o dado esperado.
Para um texto simples, o tipo é text. Veja um exemplo com um rótulo associado ao campo.
<form action="/register" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</form>
No código acima, o atributo for do elemento label estabelece uma ligação com o campo de entrada que tem o mesmo id. Assim, quando o usuário clica no texto "Name", o cursor vai direto para o campo.
O atributo name
Repare também no atributo name. Segundo a documentação da MDN, todo campo precisa dele para identificar o dado enviado, porque o servidor recebe os valores como pares de chave e valor.
Em outras palavras, um campo sem name até aparece na tela, mas o valor dele não vai junto no envio. Esse é um dos erros mais comuns de quem está começando.
Outros tipos de input
Além do text, o HTML oferece tipos específicos para dados comuns, como email, number, date, tel e url. Com eles, o navegador já valida o formato básico e, em celulares, exibe o teclado mais adequado.
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
O atributo required também merece atenção. Ele impede o envio enquanto o campo estiver vazio e faz o navegador mostrar uma mensagem de aviso, sem nenhuma linha de JavaScript.
O campo de senha em formulários HTML
Os campos de senha funcionam como campos de texto normais. Porém, eles se diferenciam pelo fato de que os caracteres digitados ficam ocultos, exibidos como pontos ou asteriscos, para proporcionar maior segurança.
Para implementar um campo de senha em formulários HTML, basta definir o atributo type como password. O navegador cuida do mascaramento sozinho, sem nenhuma configuração extra.
<form action="/register" method="post">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
</form>
Somente uma observação: esse é um processo muito comum de cadastro, pois praticamente todo sistema pede uma senha. Por isso, já temos um tipo específico para isso, sem precisar de nenhum código adicional.
Vale lembrar que ocultar os caracteres protege apenas contra quem olha a tela. Dessa forma, a senha ainda precisa trafegar por HTTPS e ser tratada com cuidado no servidor.
Botões de opção com radio
Os botões de opção são muito importantes quando você quer que o usuário escolha uma única opção a partir de uma lista. Cada opção aparece como um botão individual.
Nos formulários HTML, a implementação usa o elemento input com o atributo type configurado como radio. Além disso, todos os botões do mesmo grupo precisam compartilhar o mesmo name.
<form action="/checkout" method="post">
<fieldset>
<legend>Choose a payment method</legend>
<input type="radio" id="bank-slip" name="payment" value="bank-slip">
<label for="bank-slip">Bank slip</label>
<input type="radio" id="credit-card" name="payment" value="credit-card">
<label for="credit-card">Credit card</label>
</fieldset>
</form>
É justamente o name em comum que faz o navegador entender que as opções pertencem ao mesmo grupo. Sem ele, o usuário consegue marcar as duas, e o comportamento deixa de ser o de um radio.
O value de cada botão define o que será enviado ao servidor. Se ele estiver ausente, o navegador envia o texto padrão on, o que dificulta saber qual opção foi escolhida.
Já o fieldset com legend agrupa as opções e dá a elas um título que os leitores de tela anunciam junto com cada item.
Caixas de seleção com checkbox em formulários HTML
As caixas de seleção, ou checkboxes, servem para permitir que o usuário escolha uma ou mais opções de uma lista. Cada opção aparece como uma caixa individual.
Para implementar caixas de seleção nos formulários HTML, use o elemento input e configure o atributo type como checkbox.
<form action="/preferences" method="post">
<fieldset>
<legend>Choose your favorite genres</legend>
<input type="checkbox" id="rock" name="genres" value="rock">
<label for="rock">Rock</label>
<input type="checkbox" id="heavy-metal" name="genres" value="heavy-metal">
<label for="heavy-metal">Heavy Metal</label>
<input type="checkbox" id="pop-rock" name="genres" value="pop-rock">
<label for="pop-rock">Pop Rock</label>
</fieldset>
</form>
Diferença entre checkbox e radio
A grande diferença entre o checkbox e o radio button é que o checkbox permite seleção múltipla. Ou seja, o usuário consegue marcar mais de um item da lista ao mesmo tempo.
Com o radio button, acontece o contrário, porque só um item pode ficar selecionado. Se o usuário marcar uma segunda opção do grupo, o navegador desmarca a primeira automaticamente.
Portanto, pense na pergunta que o formulário faz. Se a resposta é única, como forma de pagamento, use radio; se aceita várias respostas, como gêneros musicais, use checkbox.
Botão de envio nos formulários HTML
O botão de envio é a principal funcionalidade para o usuário submeter as informações inseridas. Em outras palavras, é a forma que temos para enviar todos os dados para processamento.
Nos formulários HTML, você cria esse botão com o elemento button e configura o atributo type como submit.
<form action="/preferences" method="post">
<input type="checkbox" id="rock" name="genres" value="rock">
<label for="rock">Rock</label>
<input type="checkbox" id="heavy-metal" name="genres" value="heavy-metal">
<label for="heavy-metal">Heavy Metal</label>
<button type="submit">Send data</button>
</form>
Segundo a MDN, um button sem o atributo type dentro de um formulário já se comporta como submit. Mesmo assim, deixar o tipo explícito evita surpresas, principalmente quando você adiciona outros botões.
Além do submit, existem os tipos reset, que volta os campos aos valores iniciais, e button, que não faz nada sozinho e depende de JavaScript. Na maioria dos casos, o reset atrapalha mais do que ajuda, porque o usuário pode apagar tudo sem querer.
Boas práticas antes de enviar
Muitas vezes, na criação de formulários, é fundamental validar os dados tanto no cliente quanto no servidor. Assim, você garante a integridade das informações e não depende apenas do navegador.
Além disso, é uma prática recomendada incluir labels descritivos para cada campo. Eles orientam o usuário sobre o que deve ser digitado em cada lugar.
O atributo placeholder também pode oferecer dicas visuais sobre o formato esperado, como um exemplo de data. No entanto, ele complementa o label e nunca o substitui, porque desaparece assim que o usuário começa a digitar.
Acessibilidade em formulários HTML
Depois de entender os conceitos básicos, é essencial ir um pouco mais a fundo em um tema que afeta todo formulário: a acessibilidade. Verifique sempre se o seu formulário é amigável para todas as pessoas que vão usá-lo.
A acessibilidade implica garantir que todos os usuários, independentemente de suas habilidades ou deficiências, consigam perceber, compreender, navegar e interagir com o conteúdo. Com isso, você melhora a usabilidade e, ao mesmo tempo, amplia o alcance do seu público.
Nas seções a seguir, você encontra os pontos que mais fazem diferença nos formulários HTML.
HTML semântico
O HTML é composto por diversas tags que podemos usar a qualquer momento. Não existe a necessidade de criar novas tags nem novos comportamentos para montar um formulário.
Cada tag tem a sua função principal, e isso impacta diretamente a acessibilidade dos formulários HTML. Por exemplo, um div com aparência de botão não recebe foco pelo teclado, enquanto um button de verdade já vem com esse comportamento.
Portanto, sempre utilize a tag correta para o tipo de marcação que você precisa fazer. Se quiser revisar essa base, leia também o artigo sobre o que você precisa saber antes de aprender HTML.
Sempre utilize o label
É de extrema importância associar todos os campos de formulário a labels. Para isso, o valor do atributo for no label precisa ser igual ao id do input correspondente.
<form action="/register" method="post">
<label for="first-name">First name</label>
<input type="text" id="first-name" name="firstName" placeholder="Enter your first name">
</form>
Repare que for e id têm exatamente o mesmo valor. Se eles forem diferentes, a ligação se perde, e o leitor de tela anuncia o campo sem nenhum nome.
O name, por sua vez, pode ter outro valor, porque ele serve ao envio dos dados e não à associação com o label.
Texto descritivo
Essa orientação complementa o ponto anterior, uma vez que atribuir nomes significativos a cada elemento é sempre fundamental. Afinal, o texto do label é o que a pessoa ouve ao chegar no campo.
Evite termos genéricos como "campo1" ou "campo2". Em vez disso, use descrições coerentes, como "Nome" e "Sobrenome", e aplique a mesma ideia aos id e name no código.
Acessibilidade pelo teclado
Faça testes em seus formulários HTML usando exclusivamente o teclado para navegar. Verifique se o usuário consegue interagir com todos os elementos, incluindo botões de opção e caixas de seleção, por meio das teclas Tab, Enter e Espaço.
A ordem do foco também importa. Na prática, ela deve seguir a ordem visual dos campos, de cima para baixo e da esquerda para a direita.
Quando você usa os elementos nativos, o navegador já cuida da maior parte disso. Por isso, os problemas costumam aparecer justamente em componentes criados com div e span.
Controle de erros em formulários HTML
Ao lidar com erros cometidos por usuários, é de extrema importância exibir mensagens claras e informativas. Além disso, use o atributo aria-invalid para indicar que uma entrada contém um erro.
<form action="/register" method="post">
<label for="email-field">E-mail</label>
<input type="email" id="email-field" name="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Please enter a valid e-mail address.</p>
</form>
Essa abordagem ajuda bastante o usuário a compreender o erro e corrigir o campo sem frustração. No exemplo, o aria-describedby liga o campo à mensagem, então o leitor de tela lê o texto do erro junto com o nome do campo.
A documentação da MDN sobre o atributo aria-invalid traz um alerta importante. O atributo não deve vir marcado por padrão, mas apenas depois que a validação acontecer, como na saída do campo ou na tentativa de envio.
Playlist: fundamentos do front no YouTube
Se você prefere aprender por vídeo, a playlist abaixo cobre os fundamentos do front-end, incluindo a base de HTML que sustenta os formulários.
Depois de assistir, vale continuar com o artigo Pense de forma responsiva, que ajuda a adaptar seus formulários para telas pequenas.
Curso gratuito de fundamentos do HTML e CSS
Para praticar tudo o que vimos aqui, o balta.io oferece um curso gratuito de fundamentos do HTML e CSS. Nele, você constrói a base necessária para montar páginas e formulários completos.
Confira o curso gratuito e aproveite para colocar em prática os exemplos deste guia.
O que podemos concluir sobre formulários HTML?
Em resumo, a criação de formulários HTML é uma habilidade essencial para desenvolvedores web. Com form, input, label e button, você já cobre a grande maioria dos cenários do dia a dia.
Além de conhecer os elementos, é preciso considerar a acessibilidade com cuidado. Práticas como usar tags semânticas, associar labels de forma consistente e escrever textos descritivos garantem formulários que todos conseguem usar.
A acessibilidade atende a obrigações éticas e legais e, ao mesmo tempo, contribui para uma experiência mais inclusiva. Portanto, ao criar formulários HTML, adote uma abordagem que leve em conta a diversidade de usuários e ajude a construir uma web acessível a todas as pessoas.
Eu espero que você tenha gostado desta leitura. Bons códigos e até a próxima!
FAQ
Qual a diferença entre GET e POST em um formulário?
Com GET, os dados vão na URL e ficam visíveis, o que serve para buscas. Com POST, os dados vão no corpo da requisição, o que é mais indicado para cadastros e senhas.
Por que o valor do meu campo não chega ao servidor?
Na maioria dos casos, falta o atributo name no campo. Sem ele, o navegador não inclui o valor no envio.
O placeholder pode substituir o label?
Não. O placeholder some quando o usuário digita e nem sempre é anunciado pelos leitores de tela, então o label continua obrigatório.
Como fazer os botões de radio funcionarem como grupo?
Dê o mesmo name a todos os botões do grupo. Assim, o navegador permite apenas uma opção marcada por vez.
Quando usar aria-invalid?
Use depois que a validação identificar um erro no campo, junto com uma mensagem clara ligada por aria-describedby.