Aula 07 - Formulários 📝

Interatividade e Coleta de Dados

👋 Olá!

Hoje vamos aprender como o usuário "fala" com o nosso site.

Cadastros, logins, buscas e contatos: tudo isso é possível graças aos Formulários! 📥

Agenda de Hoje 📅

1. A Tag
2. Rótulos ()
3. Campos de Entrada ()
4. Tipos de Input (HTML5)
5. Botões de Envio
6. Agrupamento (Fieldset)

📥 1. O Recipiente

• Envolve todos os campos do formulário.
• Gerencia o envio dos dados.

<form action="/enviar" method="POST">
  <!-- Campos aqui -->
</form>

Atributos Principais 📍

• action: Destino dos dados.
• method: Como os dados viajam (GET ou POST).

🙋‍♂️ 2. Rótulos ()

• Identificam o que o usuário deve digitar.
• Aumentam a área de clique.
• Acessibilidade: Vital para cegos.

Conexão Label + Input 🔗

<label for="email">Seu E-mail:</label>
<input type="email" id="email">

⌨️ 3. Campos ()

• A peça fundamental do formulário.
• É uma tag auto-contida (não fecha).

O Poder do type="?" 🎛️

• O atributo type muda completamente o comportamento.
• text: Texto simples.
• password: Oculta caracteres.

🚀 4. Tipos HTML5 Modernos

• email: Valida @ automaticamente.
• date: Abre um calendário nativo.
• color: Abre um seletor de cores.
• number: Abre o teclado numérico no celular.

📊 Fluxo de Interação

graph LR
    U[Usuário] --> L[Clica no Label]
    L --> I[Foca no Input]
    I --> B[Clica no Submit]
    B --> F[Processamento]

🖱️ 5. Botões de Ação

<button type="submit">Cadastrar</button>
<button type="reset">Limpar</button>

📦 6. Agrupamento de Campos

Fieldset e Legend 📋

• fieldset: Cria uma moldura visual.
• legend: Dá um título a essa moldura.

<fieldset>
  <legend>Dados de Acesso</legend>
  <!-- Inputs aqui -->
</fieldset>

🕵️‍♂️ Boas Práticas

• Use o atributo required para campos obrigatórios.
• Use placeholder para dar dicas temporárias.
• Sempre conecte Labels e Inputs via ID.

Resumo da Aula ✅

• <form> agrupa tudo.
• <label> dá nome e acessibilidade.
• <input> recebe os dados.
• type define a função do campo.

💻 7. Prática de Hoje

Criar um formulário de login com campos de "E-mail" e "Senha", e um botão de "Entrar".

Próxima Aula 🏛️

Projeto HTML

Vamos juntar TUDO o que aprendemos e criar uma página real!

Dúvidas? 🤔

"Formulários são o diálogo entre o seu código e o coração (ou os dedos) do usuário."