DS & II

capitulo_08_formularios_p1

Leitura de 2 min

Capítulo 08: Pergaminhos de Inscrição (Formulários P1) 📜🖊️

Neste capítulo, vamos aprender a criar campos onde o usuário pode digitar textos e enviar informações, usando o tema Cadastro de Recrutas!

📖 Formulários e Inputs

Para que o usuário envie dados (como login ou cadastro), usamos a tag <form>. Dentro dela, usamos a tag <input> para criar os campos de digitação.

A tag <input> precisa do atributo type para saber que tipo de dado vai receber:

  • type="text": Texto normal.
  • type="password": Texto escondido (bolinhas).
  • type="submit": Um botão para enviar o formulário.

Também usamos a tag <label> para dar um nome ao campo!

📖 Exemplo Guiado: Cadastro de Guerreiro

Vamos criar um formulário de alistamento.

  1. Crie o arquivo cadastro.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alistamento</title>
</head>
<body>
    <h1>Aliste-se na Guilda</h1>
    
    <form>
        <label>Nome do Recruta:</label><br>
        <input type="text"><br><br>
 
        <label>Senha Secreta:</label><br>
        <input type="password"><br><br>
 
        <input type="submit" value="Enviar Inscrição">
    </form>
</body>
</html>

📊 Ilustração Visual: Fluxo do Formulário

graph LR
    A[Usuário digita] --> B[Formulário]
    B -->|Clique em Enviar| C[Servidor]

🛠️ Prática Obrigatória 1: Login do Jogador

Crie um arquivo chamado login.html. Crie um formulário com dois campos: “Usuário” (texto) e “Senha” (password). Adicione o botão de enviar!

🔑 Gabarito de Código

Prática 1: login.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Acesse sua Conta</h1>
    <form>
        <label>Usuário:</label><br>
        <input type="text"><br><br>
        
        <label>Senha:</label><br>
        <input type="password"><br><br>
        
        <input type="submit" value="Entrar">
    </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