Pular para conteúdo

Aula 07 - Formulários 📝

Objetivo

Objetivo: Compreender como coletar dados do usuário utilizando a tag <form>, associar rótulos com <label> e utilizar os diversos tipos de <input> disponíveis no HTML5.

1. O Recipiente de Dados: <form> 📥

Todo formulário deve estar envolvido pela tag <form>. Ela é responsável por agrupar os campos e definir para onde os dados serão enviados.

<form action="sucesso.html" method="GET">
    <!-- Campos aqui -->
</form>
  • action: Define a URL ou página que vai receber os dados.
  • method: Define como os dados são enviados (GET aparece na URL, POST é oculto).

2. Rótulos e Inputs: O Par Perfeito 💑

Nunca use um campo de entrada sem um rótulo explicativo.

  • <label>: Define o nome do campo.
  • <input>: Onde o usuário digita ou seleciona.

Atributo for e id:

Para "ligar" o label ao input, usamos o id. Isso melhora a acessibilidade: se o usuário clicar no texto do label, o cursor pula para o input automaticamente.

<label for="nome">Nome Completo:</label>
<input type="text" id="nome" name="nome_usuario">

3. Principais Tipos de Input 🎛️

O HTML5 introduziu tipos específicos que facilitam a vida do usuário (como abrir o teclado numérico no celular).

Tipo (type) Descrição
text Texto simples curto.
password Oculta os caracteres (bolinhas).
email Valida se há um "@" e um domínio.
number Permite apenas números.
date Abre um calendário para seleção.
color Abre um seletor de cores.

4. Botões de Ação 🔘

Para "enviar" o formulário, precisamos de um botão do tipo submit.

<button type="submit">Enviar Cadastro</button>
<button type="reset">Limpar Tudo</button>

5. Visualizando a Conexão 📊

graph LR
    U[Usuário] --> L[Label clicável]
    L -- For/ID --> I[Input focado]
    I --> B[Botão Submit]
    B --> F[Form Envies]

6. Prática: Formulário de Contato 🚀

Vamos criar uma página de contato no terminal:

$ mkdir aula-07
$ cd aula-07
$ touch index.html
$ # No seu HTML, crie um form com:
$ # Nome (text), Email (email) e Mensagem (textarea)

7. Mini-Projeto: Cadastro de Alunos 🎓

  1. Crie um formulário de cadastro completo.
  2. Campos obrigatórios: Nome, Email, Senha, Data de Nascimento e Nota Final (número).
  3. Use a tag <fieldset> e <legend> para agrupar e dar um título visual ao formulário.
  4. Adicione um botão de "Salvar" e um de "Limpar".
  5. Dica: Use o atributo required nos inputs para torná-los obrigatórios!

8. Exercícios Progressivos 📝

Básicos

  1. Qual a tag usada para criar um rótulo para um campo de entrada?
  2. Para que serve o atributo type="password"?

Intermediários

  1. Explique por que é importante usar o id no input associado ao for do label.
  2. Qual a diferença entre os métodos GET e POST em um formulário?

Desafio 🧠

  1. Pesquise sobre as tags <select> e <option>. Como você criaria uma lista de seleção para o usuário escolher o seu estado (UF)?

Próxima Aula: Vamos consolidar tudo no Projeto HTML! 🏛️