.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Nesta etapa, você vai aprender como criar formulários em HTML de forma simples e prática, entendendo como funciona sua estrutura e quais são os principais elementos utilizados.
Você conhecerá campos essenciais como <input>, <select> e <textarea>, além de entender como organizar essas informações para criar formulários claros, funcionais e fáceis de usar.
Os formulários são fundamentais em qualquer site, pois permitem a interação com o usuário, seja para cadastros, login, envio de mensagens ou coleta de dados.
Ao final deste guia, você será capaz de criar seus próprios formulários em HTML, aplicando boas práticas para desenvolver interfaces mais profissionais e eficientes.
🧩 Estrutura básica de um formulário
Todo formulário em HTML é delimitado pela tag <form>, que contém todos os campos e botões.
Ela é a “embalagem” que envia os dados inseridos pelo usuário para um servidor ou arquivo de destino.
💡 Exemplo:
<form action="processa.php" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Enviar">
</form>
🧱 Atributo e Função
action → Define para onde os dados serão enviados (página ou script).
method → Define o método de envio: get ou post.
💬 Dica:
● Use method="get" para testes e buscas (dados aparecem na URL).
● Use method="post" para envio de dados confidenciais (cadastros, logins, etc.).
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧱 O elemento <input>
A tag <input> é a mais versátil do HTML, pois serve para diversos tipos de entrada de dados. Seu comportamento muda conforme o valor do atributo type. Veja os Tipo (type), Descrições e exemplos visuais.
text → Campo de texto livre
A tag é → <input type="text">
email → Campo específico para e-mail (validação automática)
A tag é → <input type="email">
password → Campo de senha (oculta os caracteres)
A tag é → <input type="password">
number → Campo numérico
A tag é → <input type="number">
tel → Campo para números de telefone
A tag é → <input type="tel">
url → Para endereços de site
A tag é → <input type="url">
date → Selecionador de data
A tag é→ <input type="date">
time → Selecionador de horário
A tag é → <input type="time">
color → Escolha de cor
A tag é → <input type="color">
file → Upload de arquivos
A tag é → <input type="file">
checkbox → Caixa de seleção múltipla
A tag é → <input type="checkbox">
radio → Botão de seleção única
A tag é → <input type="radio">
range → Seletor de intervalo (ex. volume)
A tag é → <input type="range" min="0" max="100">
submit → Botão de envio
A tag é → <input type="submit">
reset → Botão para limpar formulário
A tag é → <input type="reset">
button → Botão genérico (usado com scripts)
A tag é → <input type="button" value="Clique aqui">
💬 Rotulando Campos com <label>
A tag <label> associa um texto descritivo ao campo correspondente. Isso melhora significativamente a acessibilidade e a experiência do usuário.
💡 Exemplo:
<label for="email">Digite seu e-mail:</label>
<input type="email" id="email" name="email">
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
O atributo for do <label> deve sempre coincidir com o id do <input> vinculado.
🧠 Campos de Seleção (<select> e <option>).
Usados para criar menus suspensos (dropdown menus).
💡 Exemplo:
<label for="curso">Escolha um Post:</label>
<select id="Post" name="Post">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
</select>
A tag <option> define cada item de escolha.
Você pode adicionar o atributo selected em um item para deixá-lo marcado por padrão.
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧾 Caixa de Texto Multilinha (<textarea>)
Usada para comentários, descrições, mensagens longas etc.
💡 Exemplo:
<label for="mensagem">Mensagem:</label><br>
<textarea id="mensagem" name="mensagem" rows="5" cols="30">
Digite sua mensagem aqui...
</textarea>
🔎 Veja como fica no VScode
📺 Campos de Seleção: checkbox e radio.
Checkbox — múltiplas escolhas
<p>Selecione suas linguagens favoritas:</p>
<input type="checkbox" id="html" name="linguagens" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="linguagens" value="CSS">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="linguagens" value="JS">
<label for="js">JavaScript</label>
O usuário pode marcar várias opções ao mesmo tempo.
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
📺 Radio escolha única
<p>Escolha seu gênero:</p>
<input type="radio" id="masc" name="genero" value="M">
<label for="masc">Masculino</label>
<input type="radio" id="fem" name="genero" value="F">
<label for="fem">Feminino</label>
🔎Observe que todos têm o mesmo atributo name — isso agrupa os botões, permitindo escolher apenas um.
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
💡 Botões (<button>)
Embora <input type="submit"> já funcione, a tag <button> permite personalizar o conteúdo interno (como ícones ou imagens).
💡 Exemplo:
<button type="submit">Enviar Formulário</button>
<button type="reset">Limpar Campos</button>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
Você pode também incluir ícones SVG ou texto formatado dentro de <button>.
Embora <input type="submit"> já funcione, a tag <button> permite personalizar o conteúdo interno (como ícones ou imagens).
💡 Exemplo:
<button type="submit">Enviar Formulário</button>
<button type="reset">Limpar Campos</button>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🔒 Validação de Campos e Atributos Importantes
O HTML5 oferece validações automáticas, que podem ser ativadas com atributos simples:
required → Torna o campo obrigatório
placeholder → Mostra um texto de ajuda dentro do campo
maxlength → Limita o número máximo de caracteres
min / max → Limita valores numéricos ou de data
pattern → Define uma expressão regular para validação personalizada
readonly → Impede a edição do campo
disabled → Desabilita o campo (não será enviado)
autocomplete → Sugere valores anteriores digitados
O HTML5 oferece validações automáticas, que podem ser ativadas com atributos simples:
required → Torna o campo obrigatório
placeholder → Mostra um texto de ajuda dentro do campo
maxlength → Limita o número máximo de caracteres
min / max → Limita valores numéricos ou de data
pattern → Define uma expressão regular para validação personalizada
readonly → Impede a edição do campo
disabled → Desabilita o campo (não será enviado)
autocomplete → Sugere valores anteriores digitados
💡 Exemplo completo:
<input
type="text"
id="usuario"
name="usuario"
placeholder="Digite seu nome de usuário"
required
maxlength="20">
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
<input
type="text"
id="usuario"
name="usuario"
placeholder="Digite seu nome de usuário"
required
maxlength="20">
🔎 Veja como fica no VScode
🧱 Estrutura de Formulário Completa
A seguir, um exemplo prático unindo todos os conceitos desta aula:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
</head>
<body>
<h1>Entre em Contato</h1>
<form action="enviar_dados.php" method="post">
<label for="nome">Nome completo:</label><br>
<input type="text" id="nome" name="nome" placeholder="Seu nome" required><br><br>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" placeholder="[email protected]" required><br><br>
<label for="assunto">Assunto:</label><br>
<select id="assunto" name="assunto">
<option value="duvida">Dúvida</option>
<option value="elogio">Elogio</option>
<option value="reclamacao">Reclamação</option>
</select><br><br>
<label for="mensagem">Mensagem:</label><br>
<textarea id="mensagem" name="mensagem" rows="5" cols="40" placeholder="Escreva sua mensagem aqui"></textarea><br><br>
<input type="checkbox" id="novidades" name="novidades" value="sim">
<label for="novidades">Desejo receber novidades por e-mail</label><br><br>
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</form>
</body>
</html>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
A seguir, um exemplo prático unindo todos os conceitos desta aula:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
</head>
<body>
<h1>Entre em Contato</h1>
<form action="enviar_dados.php" method="post">
<label for="nome">Nome completo:</label><br>
<input type="text" id="nome" name="nome" placeholder="Seu nome" required><br><br>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" placeholder="[email protected]" required><br><br>
<label for="assunto">Assunto:</label><br>
<select id="assunto" name="assunto">
<option value="duvida">Dúvida</option>
<option value="elogio">Elogio</option>
<option value="reclamacao">Reclamação</option>
</select><br><br>
<label for="mensagem">Mensagem:</label><br>
<textarea id="mensagem" name="mensagem" rows="5" cols="40" placeholder="Escreva sua mensagem aqui"></textarea><br><br>
<input type="checkbox" id="novidades" name="novidades" value="sim">
<label for="novidades">Desejo receber novidades por e-mail</label><br><br>
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</form>
</body>
</html>
🔎 Veja como fica no VScode
🔎 Veja como fica o resultado no Live Server
🧠 Boas práticas para formulários
1. Sempre use <label> para identificar cada campo.
2. Adicione placeholder, required e mensagens claras ao usuário.
3. Teste a usabilidade do formulário em dispositivos móveis.
4. Agrupe campos relacionados com <fieldset> e <legend> para organização.
5. Use método POST sempre que enviar dados sensíveis.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
💻 Exercício
Crie um arquivo chamado formulario.html contendo:
1. Campos para nome, e-mail, senha, seleção de curso e mensagem.
2. Inclusão de checkboxes para marcar interesses (HTML, CSS, JavaScript).
3. Um botão de envio e um botão de limpeza.
4. Campos obrigatórios usando o atributo required.
5. Um fieldset com legend descrevendo o grupo de informações pessoais.
✅ Desafio Extra:
Adicione uma validação simples usando pattern (por exemplo, apenas letras no nome, formato de e-mail correto etc.).
❓ Perguntas Frequentes (FAQ)
O que é um formulário em HTML?
Um formulário em HTML é uma estrutura usada para coletar dados dos usuários em um site, como nome, e-mail, senha, mensagens e opções de seleção. Ele é criado principalmente com a tag <form> e pode conter diversos campos de entrada.
Qual a diferença entre os métodos GET e POST?
O método GET envia os dados pela URL, sendo mais indicado para pesquisas e testes simples. Já o método POST envia os dados de forma mais segura, sendo recomendado para cadastros, logins e informações confidenciais.
Para que servem as tags <label>, <select> e <textarea>?
<label> → identifica e descreve os campos do formulário, melhorando a acessibilidade;
<select> → cria menus suspensos com opções de escolha;
<textarea> → permite inserir textos longos, como comentários e mensagens.
Qual a diferença entre os métodos GET e POST?
O método GET envia os dados pela URL, sendo mais indicado para pesquisas e testes simples. Já o método POST envia os dados de forma mais segura, sendo recomendado para cadastros, logins e informações confidenciais.
Para que servem as tags <label>, <select> e <textarea>?
<label> → identifica e descreve os campos do formulário, melhorando a acessibilidade;
<select> → cria menus suspensos com opções de escolha;
<textarea> → permite inserir textos longos, como comentários e mensagens.
📚 Continue aprendendo HTML:
Siga para a próxima etapa e continue avançando na sua jornada pelo desenvolvimento web!
🟠 Etapa 01 👉 O que é HTML e como a Web funciona
🟠 Etapa 02 👉 Textos, Parágrafos e Quebras de Linha
🟠 Etapa 03 👉 Listas
🟠 Etapa 04 👉 Imagens, Vídeos e Mídias Incorporadas
🟠 Etapa 05 👉 Links e Navegação no HTML
🟠 Etapa 06 👉 Você está nessa Aula
🟠 Etapa 07 👉 Estrutura Semântica
🟠 Etapa 08 👉 Tabelas e Organização de Dados
🟠 Etapa 09 👉 Layouts e Responsividade (com CSS introdutório)
🟠 Etapa 10 👉 CSS Moderno: Layout no HTML
.png)
Este conteúdo faz parte do Academy Code Christ.
Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.
Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e sem enrolação.
Você pode apoiar o projeto se quiser com um café.
.png)
.png)
.png)
Postar um comentário