Módulo 6: Formulários e Interatividade
2. Resumo da Aula Anterior
No último módulo, aprendeste a organizar dados em Tabelas. Agora, vamos aprender a parte mais emocionante: como permitir que o utilizador fale com o teu site! Os formulários são a porta de entrada para dados, logins e compras.
3. O Que Vais Aprender Hoje
Nesta primeira parte sobre formulários, vais aprender a criar a base da comunicação:
- ✅ A estrutura mestre do
<form>. - ✅ Como ligar etiquetas a campos de forma acessível (
label). - ✅ Domínio dos tipos de
input(texto, password, email). - ✅ Organização visual com
fieldsetelegend. - ✅ Validação nativa (impedir erros sem JavaScript).
4. Teoria: A Ficha de Diálogo
O Contentor Mestre: <form>
Tudo o que o utilizador escreve deve estar dentro de um <form>. Ele tem dois atributos cruciais:
- action: Para que página ou servidor os dados são enviados.
- method: Como os dados viajam (
GETpara buscas,POSTpara dados sensíveis como senhas).
Acessibilidade: Label e Input
Nunca coloques um input sem um <label>. O atributo id do input deve coincidir exatamente com o for do label. Isto permite que, ao clicar no texto do label, o cursor salte automaticamente para o campo.
🏢 Analogia: O Balcão da Repartição
Imagina que estás a preencher um formulário oficial em papel:
- <fieldset>: É uma moldura que agrupa perguntas relacionadas (ex: "Dados Pessoais" ou "Morada").
- <legend>: É o título escrito na borda dessa moldura.
- <input type="password">: É como escreveres com uma caneta de tinta invisível que só o rececionista consegue ler.
- Placeholder: É aquele texto cinzento "ex: João Silva" que desaparece mal começas a escrever. Não substitui o label!
Validação Nativa (HTML5)
Podes obrigar o utilizador a preencher um campo apenas adicionando o atributo required. Se usares type="email", o browser verifica automaticamente se falta o "@" ou o domínio!
5. Exemplos de Código
Exemplo 1: O Formulário de Registo Perfeito
<form action="/registo" method="POST">
<fieldset>
<legend>Dados de Acesso</legend>
<label for="user">Utilizador:</label>
<input type="text" id="user" name="username" required minlength="4">
<label for="pass">Senha:</label>
<input type="password" id="pass" name="senha" required>
</fieldset>
<button type="submit">Criar Conta</button>
</form>Exemplo 2: Datalist (Sugestões)
<label for="cidade">Cidade:</label>
<input list="cidades" id="cidade" name="cidade">
<datalist id="cidades">
<option value="Lisboa">
<option value="Porto">
<option value="Faro">
</datalist>6. Agora é a Tua Vez! (Formulário de Feedback)
Vamos criar um formulário para os utilizadores avaliarem o teu site. Segue estes passos:
- Contentor: Abre o teu
index.htmle cria um<form>. - Identificação: Cria um campo para o nome e outro para o email. Lembra-te de usar os
<label>ligados corretamente. - Opinião: Adiciona um
<textarea>com o atributorows="4"para o utilizador escrever a sua opinião detalhada. - Obrigatório: Torna o email e o comentário campos obrigatórios (
required). - Botão: Adiciona um
<button type="submit">com o texto "Enviar Feedback". - Teste: Tenta enviar o formulário sem preencher nada e vê o browser a dar um erro automaticamente!
7. Verificação de Conhecimento
Será que o teu formulário está bem estruturado? Vamos testar a tua lógica!
8. Resumo do Que Aprendemos
- 📌 <form> define a área interativa.
- 📌 label + input é a base da acessibilidade (use
foreid). - 📌 required, minlength e type="email" fazem validação nativa.
- 📌 fieldset agrupa campos; legend dá o título ao grupo.
- 📌 textarea é para mensagens longas, input para linhas curtas.
9. Desafios Práticos
Desafio 1: O Seletor de Cores
Descobre como criar um input que abre uma palete de cores para o utilizador escolher uma cor favorita.
Desafio 2: Limitações Numéricas
Cria um campo para "Idade" que só aceite números entre 18 e 100.
Desafio 3: O Botão de Limpar
Como criarias um botão que apaga tudo o que o utilizador escreveu no formulário instantaneamente (sem recarregar a página)?