1. O que é um formulário
Formulários são usados para coletar dados do usuário, como nome, e-mail, senha, data de nascimento, opções de escolha e mensagens.
Eles aparecem em diversos contextos, como telas de cadastro, login, pesquisas, avaliações e sistemas escolares.
2. A tag form
A tag <form> agrupa todos os campos do formulário.
<form action="#" method="post">
...
</form>Principais atributos
- action → define para onde os dados seriam enviados.
- method → define a forma de envio dos dados.
Os métodos mais comuns são get e post.
Neste material, usamos action="#" apenas para fins didáticos.
3. Campos de entrada
A tag <input> é usada para criar vários tipos de campos.
Exemplo de sintaxe
<input type="text" id="nome" name="nome" />Tipos comuns de input
- text → texto simples
- email → e-mail
- password → senha
- number → números
- date → data
- radio → escolha única
- checkbox → múltiplas escolhas
Exemplos
<input type="text" placeholder="Digite seu nome" />
<input type="email" placeholder="Digite seu e-mail" />
<input type="password" placeholder="Digite sua senha" />
<input type="number" min="0" max="10" />
<input type="date" />4. Organização e acessibilidade
Label
A tag <label> identifica o campo e melhora a acessibilidade.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" />O valor do atributo for deve ser igual ao id do campo correspondente.
Fieldset e legend
A tag <fieldset> agrupa campos relacionados, e a tag <legend> dá um título a esse grupo.
<fieldset>
<legend>Dados Pessoais</legend>
...
</fieldset>5. Outros elementos do formulário
Select
A tag <select> cria uma lista de opções.
<label for="curso">Curso:</label>
<select id="curso" name="curso">
<option value="">Selecione</option>
<option value="informatica">Informática</option>
<option value="administracao">Administração</option>
</select>Radio
Os campos do tipo radio permitem selecionar apenas uma opção.
<input type="radio" id="manha" name="turno" value="manha" />
<label for="manha">Manhã</label>Checkbox
Os campos do tipo checkbox permitem marcar uma ou mais opções.
<input type="checkbox" id="html" name="disciplinas" value="html" />
<label for="html">HTML</label>Textarea
A tag <textarea> cria uma área de texto maior, ideal para comentários e observações.
<label for="comentario">Comentário:</label>
<textarea id="comentario" name="comentario" rows="5" cols="40"></textarea>6. Botões
Os botões mais comuns em formulários são os de envio e limpeza.
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>- submit → envia os dados do formulário
- reset → limpa os campos preenchidos
7. Exemplo completo
Abaixo está um exemplo prático reunindo os principais elementos apresentados nesta aula.
Conclusão
Nesta aula, vimos como criar formulários em HTML e como usar campos para coletar informações do usuário.
Também conhecemos elementos importantes para organização e acessibilidade, como label, fieldset e legend.