Como criar formulários HTML: Guia passo a passo
Pré-requisito: Leitura sobre HTML para iniciantes.
Foto de Kelly Sikkema na Unsplash
Formulários são uma das ferramentas mais importantes no desenvolvimento web, eles servem como a ponte entre o usuário e o servidor, permitindo a interação dinâmica em sites e aplicações. Se você já fez um “login”, preencheu um questionário ou até mesmo realizou uma compra online, você já interagiu com um formulário HTML. No entanto, apesar de sua prevalência e importância, a criação de formulários eficientes, acessíveis e amigáveis ao usuário pode ser mais complexa do que parece à primeira vista.
Neste artigo, abordaremos tudo o que você precisa saber para criar formulários bem projetados usando HTML. Desde o básico sobre os elementos que compõem um formulário, às melhores práticas que garantem uma excelente experiência de usuário, este é o seu guia completo para formulários em HTML. Então, se você é um desenvolvedor iniciante querendo aprender o básico, ou um profissional procurando aprimorar suas habilidades, continue lendo para descobrir como dominar a arte dos formulários em HTML.
O que é um Formulário HTML e Por que é Importante?
O que é um Formulário HTML?
Um formulário HTML é uma parte importante de qualquer página web ou aplicação que requer entrada do usuário. É essencialmente, uma maneira de coletar informações dos visitantes. Isso pode variar de algo simples como um campo de busca até um formulário de inscrição ou enquete mais complexo. Um formulário é criado usando o elemento <form > do HTML e pode conter vários tipos de controles de entrada, como campos de texto, caixas de seleção, botões de checkbox e muito mais.
A Importância dos Formulários HTML
Formulários desempenham várias funções importantes em websites e aplicações:
- Interação do Usuário: Eles fornecem um ponto de interação entre o usuário e o site ou aplicativo. Isso pode ser para buscar informações, enviar informações ou ambos.
- Coleta de Dados: Formulários são o “core” de muitos modelos de negócios na web, desde coletar endereços de e-mail para marketing até processar transações de comércio eletrônico.
- Acessibilidade: Um formulário bem projetado é acessível para todos, incluindo usuários com deficiências, proporcionando igualdade de acesso a informações e serviços online.
- Eficiência: Eles podem ser projetados para filtrar e validar entradas, tornando a coleta de dados mais eficiente e precisa.
- Conversões: Um formulário bem projetado e fácil de usar pode significativamente aumentar as taxas de conversão, seja para inscrições em newsletters, vendas ou feedback do usuário.
Agora que você entende o que é um formulário HTML e por que é tão importante, nas próximas seções, vamos mergulhar nos detalhes de como criar formulários eficientes e amigáveis para o usuário.
Os Fundamentos de um Formulário HTML
Formulários são uma das ferramentas mais poderosas quando se trata de coletar informações do usuário em uma página web. Eles são essenciais para uma variedade de interações online, desde inscrever-se para uma newsletter até completar uma compra online. Esta seção aborda os fundamentos para começar a criar seus próprios formulários HTML.
O Elemento <form>
O elemento <form> age como um contêiner para todos os campos do formulário, como input de texto, botões e outros tipos de campos. Este é o esqueleto básico de um formulário HTML:
<form action="/submit" method="post">
<!-- Os elementos do formulário vão aqui -->
</form>
- O atributo action define a URL para o qual os dados do formulário serão enviados quando o usuário enviar o formulário.
- O atributo method especifica como esses dados serão enviados, que pode ser com o uso do GET ou POST.
Métodos
Os métodos GET e POST são as duas formas mais comuns de enviar dados de um formulário para um servidor.
- GET: Este método anexa os dados do formulário ao URL em pares nome/valor e você os verá no navegador na barra de endereços. Pode ser usado para enviar dados não sensíveis e é o método padrão se você não especificar nenhum.
- POST: Este método envia os dados como parte do corpo(body) da solicitação HTTP, tornando-o mais seguro e adequado para o envio de dados sensíveis. Além disso, não há restrições sobre o comprimento dos dados.
<!-- Usando o método GET -->
<form action="/search" method="get">
<!-- Elementos do formulário aqui -->
</form>
<!-- Usando o método POST -->
<form action="/submit" method="post">
<!-- Elementos do formulário aqui -->
</form>
É muito importante escolher o método apropriado com base no tipo de dados que você está manipulando e nas necessidades do seu aplicativo, mas em via de regra utilize POST para ter maior segurança ao trafegar dados dos usuários.
Estruturando um Formulário HTML Eficiente
Entender a estrutura de um formulário HTML é crucial para criar uma experiência de usuário fluida e acessível. Esta seção abordará os principais elementos e atributos que ajudarão você a organizar e rotular seu formulário de maneira eficiente.
Os elementos <fieldset> e <legend>
- O <fieldset> é um contêiner que agrupa elementos de formulário relacionados. Ele é especialmente útil quando você tem formulários longos ou complexos.
- O elemento <legend> pode ser usado dentro de um <fieldset> para fornecer um título ou rótulo para o grupo.
<fieldset>
<legend>Dados pessoais</legend>
<input type="text" name="nome" placeholder="Nome">
<input type="email" name="email" placeholder="Email">
</fieldset>
![Formulário html com fieldset e label aplicados.](https://frontendemfoco.com.br/wp-content/uploads/2023/09/image-7-e1694431772595.png)
Usar o <fieldset> e o <legend> não apenas torna seu formulário mais organizado, mas também melhora a acessibilidade, facilitando a navegação por leitores de tela.
O elemento <label>
O uso de rótulos é fundamental para a acessibilidade e usabilidade de um formulário. O elemento <label> está associado a um campo específico e oferece descrições contextuais.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
![](https://frontendemfoco.com.br/wp-content/uploads/2023/09/image-9.png)
Isso permite que os usuários cliquem no texto do rótulo para focar no campo de entrada associado, o que é especialmente útil em dispositivos móveis com telas menores.
Estruturas Comuns em HTML para Formulários
Dependendo das necessidades do seu site, você pode escolher diferentes layouts de formulário. Aqui estão algumas estruturas comuns:
- Formulário Linear: Todos os elementos do formulário são alinhados verticalmente, um abaixo do outro.
- Formulário em Duas Colunas: Os rótulos estão em uma coluna e os campos de entrada em outra.
- Formulário em Grade: Semelhante a um formulário em duas colunas, mas com múltiplas linhas e colunas.
Cada estrutura tem suas próprias vantagens e desvantagens, então escolha a que melhor se adapta ao seu conteúdo e público-alvo.
Elementos de Entrada e Controles de Formulário HTML
O coração de qualquer formulário HTML é o elemento de entrada, geralmente representado pela tag <input>. Este versátil componente permite aos usuários inserir dados que podem ser enviados para o servidor ou manipulados usando diversas tecnologias no lado do cliente, como JavaScript. Os formulários podem conter diferentes tipos de elementos de entrada, mas o <input> é sem dúvida o mais flexível e amplamente utilizado.
Principais Atributos de <input>
Atributo | Descrição |
---|---|
type | Define o tipo de elemento de entrada (text, password, checkbox, etc.). |
name | Especifica o nome para o elemento, útil para identificar os dados após o envio do formulário. |
value | Define um valor inicial para o elemento, que pode ser modificado pelo usuário ou por scripts. |
placeholder | Fornece uma dica ou descrição para o campo, mostrada até que o usuário comece a digitar. |
required | Um atributo booleano que quando presente indica que um campo deve ser preenchido antes que o formulário possa ser enviado. |
disabled | Um atributo booleano que desativa o campo de entrada. |
Exemplo de Uso de Atributos:
<input type="text" name="username" placeholder="Digite seu nome de usuário" required>
Neste exemplo, o tipo de elemento é um campo de texto. O nome atribuído é “username”, o texto de espaço reservado será “Digite seu nome de usuário”, e é um campo obrigatório para o envio do formulário.
Tipos de Input
Os formulários HTML têm diversos tipos de campos de entrada e escolher o tipo certo para cada informação que você quer coletar é fundamental para a usabilidade. Aqui estão alguns dos mais comuns:
![Exemplo de formulários html com os principais tipos de inputs](https://frontendemfoco.com.br/wp-content/uploads/2023/09/principais-tipos-de-inputs.png)
- Text: Utilizado para capturar uma única linha de texto.
- Password: Semelhante ao tipo de texto, mas oculta os caracteres.
- Radio: Permite ao usuário escolher uma opção entre várias.
- Checkbox: Oferece a opção de selecionar múltiplas escolhas dentro de um conjunto.
- Button: Utilizado para iniciar uma ação no formulário.
- Submit: Botão que envia os dados do formulário para o servidor.
- Select: Permite ao usuário escolher de uma lista de opções.
- Textarea: Usado para coletar múltiplas linhas de texto.
Você pode ver a lista completa de todos os atributos de inputs no MDN
Criando um Formulário HTML: Exemplo Prático
Agora que você já entende o que é um formulário HTML, sua importância, e conhece as tags HTML essenciais para formulários, vamos criar um formulário real do zero. Para este exemplo, vamos criar um formulário simples de “Contate-nos” que incluirá campos para nome, e-mail, assunto e uma mensagem.
Passo 1: Estrutura Básica do Formulário
O primeiro passo é criar a estrutura básica do formulário usando a tag <form>. Para este exemplo, vamos usar o método POST.
<form method="POST" action="/enviar"> </form>
Nota: O atributo action especifica para onde os dados do formulário serão enviados após o envio. Neste exemplo, é um endpoint “/enviar” no nosso servidor.
Passo 2: Adicionar Campos de Input
Dentro da tag <form>, vamos começar adicionando os campos de input para o nome e o e-mail.
<form method="POST" action="/enviar">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</form>
Passo 3: Adicionar o Campo de Assunto
Para o campo de assunto, vamos usar um elemento <select> para dar ao usuário algumas opções predefinidas.
<form method="POST" action="/enviar">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<label for="assunto">Assunto:</label>
<select id="assunto" name="assunto">
<option value="feedback">Feedback</option>
<option value="questao">Questão</option>
<option value="ajuda">Preciso de Ajuda</option>
</select>
</form>
Passo 4: Adicionar o Campo de Mensagem
Para o campo da mensagem, usaremos a tag <textarea>.
<form method="POST" action="/enviar">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<label for="assunto">Assunto:</label>
<select id="assunto" name="assunto">
<option value="feedback">Feedback</option>
<option value="questao">Questão</option>
<option value="ajuda">Preciso de Ajuda</option>
</select>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>
</form>
Passo 5: Botão de Envio
Finalmente, adicionamos um botão de envio ao nosso formulário.
<form method="POST" action="/enviar">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<label for="assunto">Assunto:</label>
<select id="assunto" name="assunto">
<option value="feedback">Feedback</option>
<option value="questao">Questão</option>
<option value="ajuda">Preciso de Ajuda</option>
</select>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>
<input type="submit" value="Enviar">
</form>
Passo 6: Organizando com <fieldset> e <legend>
Uma boa prática ao criar formulários HTML é utilizar as tags <fieldset> e <legend> para agrupar elementos relacionados e melhorar a acessibilidade. Estas tags não apenas tornam o formulário mais organizado para o usuário, mas também oferecem benefícios para a acessibilidade, tornando-o mais fácil de navegar para usuários que utilizam leitores de tela.
Neste exemplo, vamos utilizar <fieldset> para agrupar os campos relacionados e usar <legend> para dar um título a esses grupos.
Código Modificado com <fieldset> e <legend>
Aqui está o nosso formulário atualizado:
<form method="POST" action="/enviar">
<fieldset>
<legend>Informações Pessoais</legend>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Detalhes do Contato</legend>
<label for="assunto">Assunto:</label>
<select id="assunto" name="assunto">
<option value="feedback">Feedback</option>
<option value="questao">Questão</option>
<option value="ajuda">Preciso de Ajuda</option>
</select>
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>
</fieldset>
<input type="submit" value="Enviar">
</form>
Explicação
- O primeiro <fieldset> engloba os campos de “Nome” e “E-mail” e usa o <legend>”Informações Pessoais” para descrever este grupo.
- O segundo <fieldset> contém os campos de “Assunto” e “Mensagem”, e é descrito pelo <legend> “Detalhes do Contato”.
Ao agrupar os elementos de formulário relacionados desta forma, você facilita a vida dos usuários e também de qualquer tecnologia assistiva que eles possam estar usando.
O Formulário Finalizado
Esse é o nosso formulário, agora ainda mais acessível e fácil de entender!
![Formulário de contato completo utilizando as principais tags para formulário html, utilizando também o fieldset e legend para torna-lo mais acessível.](https://frontendemfoco.com.br/wp-content/uploads/2023/09/image-17.png)
E aí está! Você acabou de criar um formulário HTML simples, mas eficiente. Agora você pode aplicar estes conceitos básicos para criar formulários ainda mais complexos e úteis para seus projetos.
Como Manipular Dados de Formulários com JavaScript
Manipular dados de formulários com JavaScript é uma habilidade crucial para qualquer desenvolvedor frontend. Ela permite que você crie experiências de usuário mais dinâmicas e interativas, valide entradas e manipule dados antes de enviá-los ao servidor. Neste tópico, vamos explorar como você pode fazer isso usando o exemplo de formulário criado na etapa anterior.
Obter Valores dos Campos do Formulário
O primeiro passo é saber como acessar os dados inseridos pelo usuário, no JavaScript você pode fazer isso facilmente com a API do DOM. Você pode aprender sobre dom aqui.
Por exemplo, para pegar o valor do campo nome:
const nome = document.getElementById('nome').value;
Trabalhando com Elementos de Seleção <select>
Elementos de seleção, também conhecidos como select no HTML, são usados para criar listas suspensas. Em JavaScript, você pode manipular esses elementos para, por exemplo, pegar o valor selecionado pelo usuário.
// Acessar o elemento de seleção pelo seu ID
const selectElement = document.getElementById('assunto');
// Obter o valor selecionado
const selectedValue = selectElement.value;
// Também é possível obter o índice da opção selecionada
const selectedIndex = selectElement.selectedIndex;
// E até mesmo o objeto da opção selecionada
const selectedOption = selectElement.options[selectedIndex];
Este exemplo demonstra como obter o valor selecionado, o índice da opção selecionada e o objeto da opção selecionada. Saber como manipular elementos select permitirá que você crie formulários mais dinâmicos, onde as escolhas do usuário podem, por exemplo, desencadear a exibição de novas opções ou campos.
Trabalhando com Área de Texto <textarea>
A área de texto, representada pela tag textarea em HTML, é usada para coletar entradas de texto em várias linhas. Em JavaScript, a manipulação de um textarea é muito similar à de um campo de entrada de texto input.
// Acessar o elemento textarea pelo seu ID
const textareaElement = document.getElementById('mensagem');
// Obter o conteúdo da área de texto
const textContent = textareaElement.value;
// Alterar o conteúdo da área de texto
textareaElement.value = "Texto novo";
No exemplo acima, mostramos como acessar o elemento textarea, como obter o texto inserido e como definir um novo texto. O campo textarea são comumente usados para coletar comentários, descrições e outros tipos de informação que exigem entradas mais extensas do usuário.
Validação de Campos
A validação de campos é essencial para garantir que os dados recebidos sejam válidos antes de serem enviados ao servidor. Por exemplo, para validar o campo de nome e e-mail:
const nome = document.getElementById('nome').value;
const email = document.getElementById('email').value;
if(!nome) {
alert('Por favor, preencha o campo nome.');
}
if (!email.includes('@')) {
alert('Por favor, insira um e-mail válido.');
}
Enviar Dados do Formulário
Existem várias maneiras de enviar dados. Uma delas é manipular o evento de envio(submit) do formulário para enviar os dados usando o método fetch ou XMLHttpRequest, nesse exemplo iremos utilizar o fetch.
// Monitora o evento submit que é responsável por fazer o envio do formulário.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // Para prevenir o envio padrão do formulário
const nome = document.getElementById('nome').value;
const email = document.getElementById('email').value;
const assunto = document.getElementById('assunto').value;
const mensagem = document.getElementById('mensagem').value;
// Realizar a validação para o campo nome.
if(!nome) {
alert('Por favor, preencha o campo nome.');
}
// Realizar a validação para o campo e-mail.
if (!email.includes('@')) {
alert('Por favor, insira um e-mail válido.');
}
// Envia os dados
fetch('/enviar', {
method: 'POST',
body: JSON.stringify({ nome, email, assunto, mensagem }),
headers: {
'Content-Type': 'application/json'
}
}).then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Erro:', error));
});
A manipulação de dados de formulário com JavaScript é um tópico amplo e essencial que pode ser estendido ainda mais, considerando validações no lado do cliente, uso de AJAX para atualizações em tempo real e muito mais. No entanto, entender esses fundamentos irá prepará-lo bem para as tarefas mais complexas que você encontrará em seu caminho como desenvolvedor frontend.
Conclusão
Neste guia, abordamos tudo que você precisa saber para criar formulários HTML eficientes. Desde a escolha do elemento <form> até o básico sobre manipulação de dados com JavaScript, oferecemos um roteiro completo para iniciantes e profissionais. Com as dicas e exemplos práticos apresentados você estará bem equipado para criar formulários que não apenas coletam dados de forma eficaz, mas também oferecem uma experiência de usuário positiva. Para aprimorar suas habilidades, explore mais sobre melhores práticas de UX/UI e validação de dados no servidor.
Recursos Externos Recomendados
Para quem deseja se aprofundar ainda mais no mundo dos formulários HTML, aqui estão alguns recursos recomendados que abordam o tópico de diferentes perspectivas:
- MDN Web Docs – HTML Forms Guide: Este é um recurso abrangente que cobre todos os aspectos de formulários HTML, incluindo todos os elementos e atributos relevantes.
- W3Schools – HTML Forms Tutorial: Se você é um iniciante em HTML e formulários, este é um ótimo lugar para começar. O tutorial é fácil de seguir e tem muitos exemplos.
- CSS-Tricks – A Guide to Web Form Usability: Este artigo aborda as melhores práticas de design de formulário, focando na experiência do usuário.
- JavaScript.info – Forms: Controls: Para os que estão interessados em como manipular formulários usando JavaScript, este guia oferece explicações claras e exemplos práticos.
- Stack Overflow – HTML Form Questions: Para dúvidas específicas, a tag ‘html-form’ no Stack Overflow é um excelente recurso. Você pode encontrar uma ampla variedade de perguntas e respostas aqui.