HTML: Formulários HTML
Última atualização: 2026-10-13
Formulários (<form>) são a principal forma de as páginas web interagirem com os usuários — login, cadastro, busca e mensagens de contato dependem de formulários para coletar dados.
1. Conceitos Básicos de Formulário
A tag <form> define uma área de formulário que contém vários controles de entrada. Quando os usuários preenchem e enviam o formulário, os dados são enviados ao servidor:
▶ Exemplo
▶ Experimente2. Controles de Entrada Comuns
<input> é o controle mais versátil — seu atributo type o transforma em diferentes formas de entrada:
▶ Exemplo
▶ Experimente💡 Atributos de Formulário:
action especifica a URL de envio; method especifica o método de requisição (get para busca, post para login/cadastro). placeholder mostra dicas de entrada; required marca campos como obrigatórios.
3. Agrupamento de Formulário e Mais Elementos
<fieldset> agrupa controles relacionados, <legend> fornece um título para o grupo. <datalist> oferece uma lista de sugestões pré-preenchida para campos de entrada:
▶ Exemplo
▶ Experimente<fieldset>+<legend>: Agrupa controles de formulário com um título<datalist>+<option>: Fornece sugestões de entrada, usado com o atributolist- Tipos de
<button>:submitenvia,resetlimpa,buttoné um botão genérico
❓ Perguntas Frequentes
P Quais são os atributos
action e method de uma tag <form>?R
action especifica a URL do servidor para onde os dados do formulário são enviados; method especifica como enviar. Dois métodos：GET anexa dados à URL (adequado para consultas de busca), POST coloca dados no corpo da requisição (adequado para login, registro e dados sensíveis). Se não tiver servidor para processar, omita action e use event.preventDefault() do JavaScript para interceptar o envio.P Qual é a diferença entre
radio (escolha única) e checkbox (múltipla escolha)?R
radio é seleção única — apenas uma opção por grupo (agrupado pelo atributo name); checkbox é múltipla seleção — você pode selecionar múltiplas opções simultaneamente. Ponto-chave：radio deve compartilhar o mesmo valor name para ser mutualmente exclusivo; checkbox pode ter nomes iguais ou diferentes. Ambos usam checked para definir seleção padrão.P O que o atributo
type de <button> faz?R
type determina o comportamento do botão：submit (padrão) envia o formulário para a URL action; reset limpa todas as entradas do formulário; button não tem comportamento padrão — você precisa de JavaScript para vincular eventos. Nota：sem type, o padrão é submit, o que pode enviar o formulário acidentalmente. Sempre especifique type explicitamente.P A validação de formulário do HTML5 é suficiente? Ainda preciso de JavaScript?
R O HTML5 fornece validação básica (
required, minlength, pattern, etc.) para cenários simples. Mas tem limitações：1）estilização de mensagem de erro é difícil de personalizar; 2）validação complexa (como senhas coincidentes) não é possível; 3）experiência do usuário não é boa (tempo, inconsistência de estilo). Recomendação：use validação HTML5 para proteção básica, JavaScript para validação aprimorada e melhor experiência do usuário.📖 Resumo
<form>define um formulário;actionemethodcontrolam o comportamento de envio- Tipos de
<input>: text, password, email, number, radio, checkbox <select>+<option>para listas suspensas;<textarea>para texto de várias linhas<fieldset>+<legend>para agrupamento;<datalist>para sugestões de entrada- O tipo de
<button>determina o comportamento: submit / reset / button
📝 Exercícios
- Formulário de cadastro: Crie uma página de cadastro com nome de usuário, e-mail, senha, confirmação de senha, gênero (radio), interesses (checkbox), um botão de envio e um botão de limpar. Use
<fieldset>para agrupamento. - Sugestões de entrada: Use
<datalist>para criar um campo "Selecione a Cidade" que sugira automaticamente São Paulo, Rio de Janeiro, Belo Horizonte e Curitiba conforme você digita.
