Como Criar Formulários em HTML: Guia Completo para Iniciantes

Introdução

Os formulários são essenciais para coletar informações de usuários em qualquer website. Seja para realizar cadastros, enviar mensagens ou fazer pesquisas, os formulários permitem a interação entre o usuário e o sistema. Neste guia, vamos ensinar como criar formulários funcionais usando HTML, explicando cada campo e suas propriedades. Ao final, você saberá como enviar os dados coletados usando os métodos POST e GET.

O Básico dos Formulários HTML

Para criar um formulário básico em HTML, utilizamos a tag <form>, que envolve todos os elementos do formulário. Veja um exemplo simples:

<form action="/enviar-dados" method="POST">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Digite seu nome" required>
    
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" placeholder="Digite seu e-mail" required>
    
    <button type="submit">Enviar</button>
</form>

Explicação:

• action: Define a URL para onde os dados do formulário serão enviados.
• method: Define o método de envio, podendo ser POST ou GET.

Tipos de Campos Comuns em Formulários

Os formulários em HTML oferecem diversos tipos de campos para coletar diferentes tipos de dados. Abaixo, veremos alguns dos mais comuns:

1. Campo de Texto

Usado para entradas de texto como nome, endereço ou qualquer outra informação curta.

<label for="username">Usuário:</label>
<input type="text" id="username" name="username" placeholder="Digite seu nome de usuário">

2. Campo de E-mail

Valida automaticamente se o usuário digitou um endereço de e-mail válido.

<label for="user-email">E-mail:</label>
<input type="email" id="user-email" name="user-email" placeholder="Digite seu e-mail">

3. Textarea

Ideal para entradas de texto longas, como mensagens ou comentários.

<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem" rows="5" placeholder="Escreva sua mensagem aqui"></textarea>

4. Select (Caixa de Seleção)

Permite que o usuário escolha uma opção de uma lista.

<label for="pais">País:</label>
<select id="pais" name="pais">
    <option value="brasil">Brasil</option>
    <option value="portugal">Portugal</option>
    <option value="estados-unidos">Estados Unidos</option>
</select>

5. Checkbox e Radio Button

Checkboxes permitem múltiplas seleções, enquanto Radio Buttons permitem apenas uma seleção entre várias opções.

<label>Selecione suas habilidades:</label>
<input type="checkbox" id="html" name="habilidades" value="HTML">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="habilidades" value="CSS">
<label for="css">CSS</label>

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

<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>

6. Botões de Envio

O botão de envio é essencial para que os dados do formulário sejam enviados.

<button type="submit">Enviar</button>
<input type="reset" value="Limpar">

<button>: Pode ser estilizado e contém texto ou até mesmo ícones.
<input type="reset">: Limpa todos os campos do formulário.

Diferença entre os Métodos POST e GET

Ao criar formulários, escolher o método de envio (POST ou GET) é uma decisão importante. Vamos entender cada um:

Método POST

• Os dados são enviados no corpo da requisição HTTP.
• Ideal para formulários que enviam informações sensíveis (ex.: login, cadastro).
• Não exibe os dados na URL, sendo mais seguro.

Exemplo de um formulário POST:

<form action="/enviar-cadastro" method="POST">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>
    <button type="submit">Cadastrar</button>
</form>

Método GET

• Os dados são enviados diretamente na URL, ficando visíveis.
• Recomendado para pesquisas, pois facilita o compartilhamento da URL.
• Limite de caracteres no envio de dados.

Exemplo de um formulário GET:

<form action="/pesquisar" method="GET">
    <label for="busca">Pesquisar:</label>
    <input type="text" id="busca" name="query">
    <button type="submit">Buscar</button>
</form>

Validação de Formulários

Para melhorar a experiência do usuário e garantir que os dados estejam corretos antes de serem enviados, podemos utilizar atributos de validação como required, minlength, maxlength, e pattern.

Exemplo de campo obrigatório com um padrão de telefone:

<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone" placeholder="(11) 98765-4321" required pattern="\(\d{2}\) \d{4,5}-\d{4}">

required: Torna o campo obrigatório.
pattern: Define um padrão de validação usando expressões regulares.

Conclusão

Com este guia, você aprendeu a criar formulários simples e complexos usando HTML. Os formulários são fundamentais para a interação entre usuários e sistemas, e dominar essa habilidade é essencial para qualquer desenvolvedor web. Agora você pode criar seus próprios formulários e configurá-los para enviar dados de forma eficaz!

Não se esqueça de validar os dados no lado do servidor também, garantindo segurança e integridade da informação. Se você quer explorar ainda mais, veja nossos outros posts sobre CSS para Estilização de Formulários e Validação de Formulários com JavaScript.

Esperamos que este guia tenha sido útil! Compartilhe suas dúvidas nos comentários e continue acompanhando o Blog LCM Websites para mais dicas sobre desenvolvimento web. 😊

O Autor

Luiz Möeller

Luiz Möeller, graduado em Sistemas de Informação pela Anhembi Morumbi, atuo na LCM Sistemas como Desenvolvedor de Software, UI/UX Designer, Redator, Tradutor e Especialista SEO. Com experiência prévia em design gráfico/digital, gestão de tráfego, mídias sociais, edição de vídeo e tecnologia, hoje dedico-me à criação de posts e tutoriais para o blog da LCM Websites. Apaixonado por Desenvolvimento Web, com habilidades em HTML, CSS, JQuery, JavaScript, PHP, API Rest, MySQL, React.js, Kotlin e Java.
Valorizo momentos com a família, amigos e adoro explorar conteúdos variados na Wikipédia nas horas vagas.

See author's posts