Se você leu, estudou e praticou com os nossos tutoriais sobre formulários em HTML aqui do curso, parabéns! Você já domina a base conceitual de como coletar dados do usuário. Porém, no mercado de trabalho e na criação de projetos reais, apenas entender tags isoladas não basta. É preciso saber como integrá-las de maneira limpa, acessível e otimizada.
Neste tutorial prático, nós vamos juntar tudo o que aprendemos para construir uma página completa de cadastro de usuários. Se você quer entender como estruturar um formulário profissional do zero, mantendo o código limpo e preparado para os padrões modernos da Web, veio ao lugar certo!
Tutorial: Como Criar um Formulário HTML Profissional com a Tag <form>
Para criar um formulário em HTML, usamos a tag principal <form> atuando como um container, combinada com os atributos action (que define para qual script do servidor os dados serão enviados) e method (método HTTP de envio, geralmente GET ou POST).
<table>) para alinhar visualmente os campos de um formulário. Hoje, essa prática é considerada obsoleta e prejudicial para a acessibilidade e o SEO. O padrão moderno dita que a estrutura deve ser puramente semântica em HTML5, deixando o alinhamento visual por conta do CSS Grid ou Flexbox.
A estrutura inicial do nosso formulário usará o método post, que é o mais seguro e recomendado para formulários de cadastro, pois envia os dados encapsulados no corpo da requisição, impedindo que informações sensíveis (como senhas) fiquem expostas na URL do navegador.
<!-- Estrutura básica inicial do formulário -->
<form action="Script_do_Formulario.php" method="post" enctype="multipart/form-data">
<!-- Os campos e blocos de dados do formulário entram aqui -->
</form>Note que adicionamos também o atributo enctype="multipart/form-data". Ele é obrigatório sempre que o seu formulário contiver um campo de upload de arquivos (como fotos de perfil), garantindo que o arquivo seja transmitido corretamente ao servidor.
Quer dominar o Front-End de verdade?
Estude sem interrupções, anúncios ou distrações. Tenha em mãos a nossa apostila oficial completa em formato digital de HTML & CSS e leve seus projetos ao nível profissional.
"Estava travado tentando entender a lógica dos formulários e do posicionamento CSS. Esse material salvou meus projetos de faculdade!" — Carlos, Dev Júnior.
1. Divisão Estrutural com Semântica Modernizada
Para agrupar os campos logicamente e melhorar tanto a experiência do usuário quanto a leitura dos mecanismos de busca, utilizaremos três blocos de <fieldset>, cada um acompanhado da sua respectiva legenda (<legend>):
- Dados Pessoais: Captura as informações de identificação do indivíduo.
- Dados de Endereço: Localização física do usuário utilizando campos unificados e seletores nativos.
- Dados de Login e Segurança: Credenciais de acesso ao ecossistema do portal.
input e utilize o atributo placeholder para sugerir a máscara de digitação correta.
Além disso, ao invés de usar caixas de texto genéricas para datas ou e-mails, o HTML5 nos fornece os tipos nativos type="date" e type="email". Eles trazem o benefício de forçar a validação automática pelo navegador e invocar o teclado correto (como o numérico ou com o símbolo @) quando abertos em smartphones.
Código Fonte Completo e Otimizado (HTML5 e CSS3)
Abaixo está o código completo da página de cadastro. Você pode copiar, salvar com a extensão .html em sua máquina e testar diretamente no seu navegador. Note a ausência total de tabelas para estilização visual!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Como criar um formulário completo em HTML</title>
<meta name="description" content="Aprenda a criar um site completo que usa formulários em HTML">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 750px;
margin: 40px auto;
padding: 0 20px;
background-color: #f8fafc;
color: #0f172a;
}
h1 {
text-align: center;
color: #1e293b;
font-size: 2rem;
margin-bottom: 5px;
}
h2 {
text-align: center;
font-size: 1.1rem;
color: #64748b;
font-weight: normal;
margin-bottom: 35px;
}
fieldset {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
legend {
font-weight: bold;
padding: 0 10px;
color: #1e293b;
font-size: 1.05rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
}
.form-field.full-width {
grid-column: span 2;
}
@media (max-width: 640px) {
.form-field.full-width {
grid-column: span 1;
}
}
label {
margin-bottom: 8px;
font-weight: 600;
font-size: 0.9rem;
color: #334155;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
padding: 10px 14px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 0.95rem;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.buttons-container {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-top: 10px;
}
input[type="submit"], input[type="reset"] {
padding: 12px 28px;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
input[type="submit"] {
background-color: #2563eb;
color: #ffffff;
}
input[type="submit"]:hover {
background-color: #1d4ed8;
}
input[type="reset"] {
background-color: #64748b;
color: #ffffff;
}
input[type="reset"]:hover {
background-color: #475569;
}
</style>
</head>
<body>
<h1>Bem-vindo ao portal Programação Progressiva</h1>
<h2>Preencha o formulário abaixo para participar do curso de HTML & CSS completo, online e grátis</h2>
<form action="Script_do_Formulario.php" method="post" enctype="multipart/form-data">
<!-- DADOS PESSOAIS -->
<fieldset>
<legend>Dados Pessoais</legend>
<div class="form-grid">
<div class="form-field">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" required>
</div>
<div class="form-field">
<label for="sobrenome">Sobrenome:</label>
<input type="text" name="sobrenome" id="sobrenome" required>
</div>
<div class="form-field">
<label for="nascimento">Data de Nascimento:</label>
<input type="date" name="nascimento" id="nascimento" required>
</div>
<div class="form-field">
<label for="rg">RG:</label>
<input type="text" name="rg" id="rg" maxlength="13" placeholder="Apenas números">
</div>
<div class="form-field full-width">
<label for="cpf">CPF:</label>
<input type="text" name="cpf" id="cpf" maxlength="14" placeholder="000.000.000-00">
</div>
</div>
</fieldset>
<!-- ENDEREÇO -->
<fieldset>
<legend>Dados de Endereço</legend>
<div class="form-grid">
<div class="form-field full-width">
<label for="rua">Rua / Logradouro:</label>
<input type="text" name="rua" id="rua">
</div>
<div class="form-field">
<label for="numero">Número:</label>
<input type="text" name="numero" id="numero">
</div>
<div class="form-field">
<label for="bairro">Bairro:</label>
<input type="text" name="bairro" id="bairro">
</div>
<div class="form-field">
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade">
</div>
<div class="form-field">
<label for="estado">Estado:</label>
<select name="estado" id="estado">
<option value="">Selecione...</option>
<option value="ac">Acre</option>
<option value="al">Alagoas</option>
<option value="am">Amazonas</option>
<option value="ap">Amapá</option>
<option value="ba">Bahia</option>
<option value="ce">Ceará</option>
<option value="df">Distrito Federal</option>
<option value="es">Espírito Santo</option>
<option value="go">Goiás</option>
<option value="ma">Maranhão</option>
<option value="mt">Mato Grosso</option>
<option value="ms">Mato Grosso do Sul</option>
<option value="mg">Minas Gerais</option>
<option value="pa">Pará</option>
<option value="pb">Paraíba</option>
<option value="pr">Paraná</option>
<option value="pe">Pernambuco</option>
<option value="pi">Piauí</option>
<option value="rj">Rio de Janeiro</option>
<option value="rn">Rio Grande do Norte</option>
<option value="ro">Rondônia</option>
<option value="rs">Rio Grande do Sul</option>
<option value="rr">Roraima</option>
<option value="sc">Santa Catarina</option>
<option value="se">Sergipe</option>
<option value="sp">São Paulo</option>
<option value="to">Tocantins</option>
</select>
</div>
<div class="form-field">
<label for="cep">CEP:</label>
<input type="text" name="cep" id="cep" maxlength="9" placeholder="00000-000">
</div>
</div>
</fieldset>
<!-- DADOS DE LOGIN -->
<fieldset>
<legend>Dados de Login e Segurança</legend>
<div class="form-grid">
<div class="form-field">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-field">
<label for="login">Nome de Usuário (Login):</label>
<input type="text" name="login" id="login" required>
</div>
<div class="form-field">
<label for="senha">Senha:</label>
<input type="password" name="senha" id="senha" required>
</div>
<div class="form-field">
<label for="confirmar_senha">Confirme a Senha:</label>
<input type="password" name="confirmar_senha" id="confirmar_senha" required>
</div>
<div class="form-field full-width">
<label for="imagem">Foto de Perfil:</label>
<input type="file" name="imagem" id="imagem" accept="image/*">
</div>
</div>
</fieldset>
<!-- BOTÕES DE AÇÃO -->
<div class="buttons-container">
<input type="reset" value="Limpar Campos">
<input type="submit" value="Finalizar Cadastro">
</div>
</form>
</body>
</html>id combinando perfeitamente com o atributo for das suas tags <label>. Isso faz com que, ao clicar no texto da legenda, o foco vá automaticamente para a caixa de entrada, aumentando a área clicável do seu formulário e melhorando de forma drástica a acessibilidade da página para leitores de tela.
Bem-vindo ao portal Programação Progressiva
Preencha o formulário abaixo para participar do curso de HTML & CSS completo, online e grátis
Perguntas Frequentes sobre Formulários HTML (FAQ)
Como centralizar um formulário ou os campos usando CSS?
A maneira mais eficiente e moderna de alinhar elementos é utilizando as propriedades de CSS Grid ou Flexbox no elemento pai. Definir display: flex; flex-direction: column; no container permite organizar rótulos e campos verticalmente com espaçamento simétrico.
Para que serve o atributo enctype="multipart/form-data"?
Este atributo informa ao navegador como codificar os dados que serão enviados ao servidor. O valor multipart/form-data é indispensável quando o seu formulário contém campos de arquivos (como <input type="file">), permitindo que binários complexos de imagens ou mídias sejam transmitidos sem corromper.
Como tornar a validação de um campo do formulário obrigatória?
Basta adicionar o atributo booleano nativo required diretamente na tag do elemento de entrada (ex: <input type="text" required>). Isso impede o envio do formulário caso o campo esteja em branco, emitindo um alerta visual nativo ao usuário.
🚀 O que estudar a seguir:
Não pare seus estudos por aqui! Continue sua jornada para se tornar um desenvolvedor Front-End completo conferindo as próximas aulas da trilha:
- Como usar pseudo-classes CSS (:focus, :hover) para estilizar estados de Inputs
- Introdução ao JavaScript: Como interceptar e validar dados de formulários no lado do cliente
- Integrando formulários HTML com bancos de dados relacionais via scripts PHP modernos
Nenhum comentário:
Postar um comentário