Os formulários permitem recolher informação do utilizador, como o nome, email ou preferências.
São muito usados em páginas de contacto, inscrições, pesquisas e encomendas online.
Nesta aula vais aprender a criar e organizar formulários simples usando HTML.
Estrutura base de um formulário
Um formulário é criado com o marcador <form> e contém vários campos de entrada.
Exemplo:
<form>→ define o início e fim do formulário.action→ indica o destino dos dados (neste caso#porque não há ligação real).method→ define o modo de envio (getoupost).<label>→ descreve o campo e associa-se aoiddo<input>.<input>→ campo de entrada de dados.
Tipos de campos de entrada (<input>)
| Tipo | Descrição | Exemplo |
|---|---|---|
text | Caixa de texto normal | <input type="text"> |
email | Campo para endereço de email | <input type="email"> |
password | Campo de palavra-passe | <input type="password"> |
number | Introdução de números | <input type="number"> |
radio | Escolha única | <input type="radio" name="sexo" value="M"> |
checkbox | Escolha múltipla | <input type="checkbox" name="hobby" value="desporto"> |
submit | Botão para enviar o formulário | <input type="submit"> |
Campos de seleção (<select> e <option>)
Permitem escolher um item de uma lista.
Área de texto (<textarea>)
Usada para escrever mensagens maiores, como comentários ou descrições.
Exemplo completo
Dicas
- Usa sempre
<label>antes de cada campo. - Agrupa opções relacionadas com o mesmo
name. - Testa o formulário no navegador.
- Mantém o código limpo e indentado.
Conclusão
Os formulários são uma das partes mais importantes das páginas web modernas.
Com eles, é possível recolher informações, fazer inscrições ou criar áreas de contacto.
Mais à frente vais aprender a melhorar o aspeto dos formulários com CSS e a tratar os dados com linguagens de programação.
