DS & II

capitulo_09_formularios_p2

Leitura de 2 min

Capítulo 09: Escolhas do Destino (Formulários P2) 🔘🏹

Neste capítulo, vamos aprender a criar campos de seleção (múltipla escolha e caixas de marcação), usando o tema Escolha de Classe!

📖 Outros Tipos de Input

Além de caixas de texto, podemos deixar o usuário escolher opções prontas:

  • type="radio": Botão de rádio. O usuário só pode escolher UMA opção do grupo.
  • type="checkbox": Caixa de marcação. O usuário pode escolher VÁRIAS opções.
  • <select>: Um menu suspenso (dropdown).

📖 Exemplo Guiado: Escolha seu Destino

Vamos criar um criador de personagens simples.

  1. Crie o arquivo escolha.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Criação de Personagem</title>
</head>
<body>
    <h1>Crie seu Herói</h1>
    
    <form>
        <h2>Escolha sua Classe (Apenas uma)</h2>
        <input type="radio" name="classe" value="mago"> Mago<br>
        <input type="radio" name="classe" value="guerreiro"> Guerreiro<br>
 
        <h2>Habilidades Iniciais (Várias)</h2>
        <input type="checkbox" value="fogo"> Magia de Fogo<br>
        <input type="checkbox" value="espada"> Perícia com Espada<br>
 
        <h2>Cidade Natal</h2>
        <select>
            <option>Gondor</option>
            <option>Mordor</option>
            <option>Shire</option>
        </select>
        <br><br>
        <input type="submit" value="Criar!">
    </form>
</body>
</html>

📊 Ilustração Visual: Radio vs Checkbox

graph TD
    A[Escolhas] --> B[Radio: Apenas 1]
    A --> C["Checkbox: 0 ou Mais"]

🛠️ Prática Obrigatória 1: Quiz Gamer

Crie um arquivo chamado quiz.html. Crie uma pergunta: “Qual seu console favorito?” e dê as opções usando type="radio" (ex: PlayStation, Xbox, PC).

🔑 Gabarito de Código

Prática 1: quiz.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Quiz</title>
</head>
<body>
    <h1>Quiz Gamer</h1>
    <form>
        <p>Qual seu console favorito?</p>
        <input type="radio" name="console" value="ps"> PlayStation<br>
        <input type="radio" name="console" value="xbox"> Xbox<br>
        <input type="radio" name="console" value="pc"> PC<br>
        <br>
        <input type="submit" value="Votar">
    </form>
</body>
</html>

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks