EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Formulários HTML

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.

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

HTML 
<form action="/submit" method="post">
<label>Nome de usuário: <input type="text" name="username"></label>
<label>Senha: <input type="password" name="password"></label>
<button type="submit">Entrar</button>
</form>
▶ Experimente

Controles de Entrada Comuns

<input> é o controle mais versátil — seu atributo type o transforma em diferentes formas de entrada:

Exemplo

HTML 
<!-- Entrada de texto -->
<input type="text" placeholder="Digite seu nome">

<!-- E-mail -->
<input type="email" placeholder="voce@exemplo.com">

<!-- Número -->
<input type="number" min="1" max="100">

<!-- Botões de opção -->
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="feminino"> Feminino

<!-- Caixa de seleção -->
<input type="checkbox" name="hobby" value="programacao"> Programação

<!-- Lista suspensa -->
<select>
<option>Selecione uma cidade</option>
<option>São Paulo</option>
<option>Rio de Janeiro</option>
</select>

<!-- Área de texto -->
<textarea rows="4" placeholder="Digite sua mensagem..."></textarea>
▶ 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.

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

HTML 
<form>
<fieldset>
<legend>Informações Pessoais</legend>
<label>Nome: <input type="text" name="name" list="nomes"></label>

<label>Gênero:
<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="feminino"> Feminino
</label>
</fieldset>

<datalist id="nomes">
<option value="Alice">
<option value="Bob">
<option value="Carlos">
</datalist>

<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
<button type="button" onclick="alert('Você clicou em mim!')">Botão Normal</button>
</form>
▶ Experimente

❓ 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

📝 Atividades

  1. 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.
  2. 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.
100%