Aula 06

📌 Explicação Rápida

• A tag <div> organiza cada parte do formulário como uma "caixa".

• O CSS interno permite aplicar estilos sem misturar com o HTML.

• As classes permitem aplicar os mesmos estilos em mais de uma div.

1. Campo de texto (type="text)

📝 Exercício:
Crie uma página chamada cadastro_nome.html com um campo de texto onde o usuário deve digitar o nome completo.
Adicione um rótulo (<label>) e centralize o conteúdo com CSS.

<div class="form-item">

  <label for="nome">Nome:</label>

  <input type="text" id="nome" name="nome">

</div>

2. Campo de e-mail (type="email")

📝 Exercício:
Crie um arquivo newsletter.html com um campo de e-mail para assinar uma newsletter.

<div class="form-item">

  <label for="email">E-mail:</label>

  <input type="email" id="email" name="email">

</div>

3. Campo numérico (type="number")

📝 Exercício:
Monte o arquivo idade.html, com um campo numérico para o usuário informar sua idade.

<div class="form-item">

  <label for="idade">Idade:</label>

  <input type="number" id="idade" name="idade">

</div>

4. Área de texto (<textarea>)

📝 Exercício:
No arquivo mensagem.html, crie um formulário com um campo para que o usuário escreva uma mensagem para o diretor da escola.

<div class="form-item">

  <label for="mensagem">Mensagem:</label>

  <textarea id="mensagem" name="mensagem" rows="4"></textarea>

</div>

5. Campo de senha (type="password")

📝 Exercício:
Crie a página login.html, com campos de usuário (texto) e senha (password).

<div class="form-item">

  <label for="senha">Senha:</label>

  <input type="password" id="senha" name="senha">

</div>

6. Botão de envio (<button type="submit">)

📝 Exercício:
Em botao_envio.html, crie um formulário simples com nome e e-mail, e um botão estilizado com cores personalizadas ao passar o mouse (hover).

<div class="form-item">

  <button type="submit">Enviar</button>

</div>

7. Botão de escolha única (type="radio")

📝 Exercício:
No arquivo perfil.html, crie uma pergunta: “Você é aluno ou professor?”
Apresente duas opções usando radio.

<div class="form-item">

  <label>Gênero:</label>

  <input type="radio" id="masc" name="genero" value="masc">

  <label for="masc">Masculino</label>

  <input type="radio" id="fem" name="genero" value="fem">

  <label for="fem">Feminino</label>

</div>

8. Caixa de seleção múltipla (type="checkbox")

📝 Exercício:
Em interesses.html, crie uma pergunta: “Quais linguagens você quer aprender?”
Dê pelo menos 3 opções com checkbox.

<div class="form-item">

  <label>Interesses:</label>

  <input type="checkbox" id="html" name="interesse" value="html">

  <label for="html">HTML</label>

  <input type="checkbox" id="css" name="interesse" value="css">

  <label for="css">CSS</label>

</div>

9. Campo de data (type="date")

📝 Exercício:
Na página agenda.html, crie um campo para o usuário escolher a data de uma visita escolar.

<div class="form-item">

  <label for="nascimento">Data de nascimento:</label>

  <input type="date" id="nascimento" name="nascimento">

</div>

10. Menu suspenso (<select>)

📝 Exercício:
Em localidade.html, crie um menu suspenso com pelo menos 4 cidades brasileiras para o usuário selecionar onde mora.

<div class="form-item">

  <label for="curso">Escolha o curso:</label>

  <select id="curso" name="curso">

    <option value="html">HTML</option>

    <option value="css">CSS</option>

    <option value="js">JavaScript</option>

  </select>

</div>

💡 Desafio – Cadastro para um Clube de Aventuras

🎯 Objetivo:

Criar uma página chamada cadastro_aventura.html contendo um formulário organizado com <div> e estilizado com CSS interno, usando pelo menos 4 tipos diferentes de campos de formulário.

📜 Cenário:

Você está criando a página de cadastro para um Clube de Aventuras, onde os usuários precisam preencher um formulário com seus dados para participar das atividades.

✅ Requisitos obrigatórios:

O formulário deve conter pelo menos os seguintes 4 tipos de campos:

1. Campo de texto – para nome completo.

2. Campo de número – para idade do participante.

3. Caixa de seleção múltipla (checkbox) – para selecionar os tipos de aventura preferidos (ex: trilha, escalada, acampamento).

4. Campo de texto maior (textarea) – para o usuário contar uma experiência radical que já viveu.