Pular para conteúdo

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">
- O for do label deve ser igual ao id do input.

⌨️ 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>
- submit: Envia o formulário. - reset: Limpa todos os campos.

📦 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."