🏗️ Anatomia de um Formulário
<form action="processar.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>Informações Pessoais</legend>
<label for="nome">Nome Completo:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</fieldset>
</form>
<!-- Atributos importantes do form:
- action: URL de destino dos dados
- method: GET (URL) ou POST (corpo da requisição)
- enctype: codificação (multipart/form-data para arquivos)
- autocomplete: on/off para preenchimento automático
- novalidate: desabilita validação HTML5
-->
📋 Formulário Completo
🎯 Elementos importantes: Fieldset para agrupamento, legend para títulos, label sempre associado ao input, e validação nativa do HTML5.
♿ Acessibilidade em Formulários
label + for
Associa rótulo ao campo
<label for="nome">Nome:</label>
<input type="text" id="nome">
fieldset + legend
Agrupa campos relacionados
<fieldset>
<legend>Contato</legend>
<!-- campos... -->
</fieldset>
placeholder
Exemplo do que digitar
<input type="email"
placeholder="exemplo@email.com">
aria-describedby
Descrição adicional
<input type="password"
aria-describedby="help">
<div id="help">Mín. 8 caracteres</div>
autocomplete
Facilita preenchimento
<input type="email"
autocomplete="email">
tabindex
Ordem de navegação
<input type="text" tabindex="1">
<input type="text" tabindex="2">
💡 Boas práticas:
✅ Use sempre label com for
✅ Agrupe campos com fieldset
✅ Forneça feedback claro de erro
✅ Use autocomplete para facilitar
✅ Teste com teclado (Tab, Enter, Esc)
✨ Exemplo Prático Completo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
<style>
.formulario {
max-width: 600px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
fieldset {
border: 2px solid #007bff;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
legend {
background: #007bff;
color: white;
padding: 8px 15px;
border-radius: 5px;
font-weight: bold;
}
.campo {
margin: 15px 0;
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
margin-bottom: 5px;
color: #333;
}
input, textarea, select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0,123,255,0.3);
}
.required {
color: red;
}
.erro {
color: red;
font-size: 14px;
margin-top: 5px;
}
.botoes {
text-align: center;
margin-top: 20px;
}
button {
background: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 0 10px;
font-size: 16px;
}
button:hover {
background: #218838;
}
button[type="reset"] {
background: #dc3545;
}
button[type="reset"]:hover {
background: #c82333;
}
</style>
</head>
<body>
<div class="formulario">
<form action="enviar.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>📧 Entre em Contato</legend>
<div class="campo">
<label for="nome">
Nome Completo <span class="required">*</span>
</label>
<input type="text" id="nome" name="nome"
required minlength="3" maxlength="50"
placeholder="Seu nome completo"
autocomplete="name">
</div>
<div class="campo">
<label for="email">
E-mail <span class="required">*</span>
</label>
<input type="email" id="email" name="email"
required placeholder="seu@email.com"
autocomplete="email">
</div>
<div class="campo">
<label for="assunto">Assunto</label>
<select id="assunto" name="assunto" required>
<option value="">Selecione...</option>
<option value="duvida">Dúvida</option>
<option value="sugestao">Sugestão</option>
<option value="reclamacao">Reclamação</option>
<option value="elogio">Elogio</option>
</select>
</div>
<div class="campo">
<label for="mensagem">
Mensagem <span class="required">*</span>
</label>
<textarea id="mensagem" name="mensagem"
rows="5" required minlength="10"
placeholder="Descreva sua mensagem..."></textarea>
</div>
<div class="campo">
<label for="anexo">Anexar arquivo (opcional)</label>
<input type="file" id="anexo" name="anexo"
accept=".pdf,.doc,.docx,.jpg,.png">
<small>Formatos aceitos: PDF, DOC, JPG, PNG (máx. 5MB)</small>
</div>
<div class="campo">
<label>
<input type="checkbox" name="newsletter" value="sim">
Quero receber atualizações por e-mail
</label>
</div>
</fieldset>
<div class="botoes">
<button type="submit">📤 Enviar Mensagem</button>
<button type="reset">🗑️ Limpar Formulário</button>
</div>
</form>
</div>
</body>
</html>