HTML – 27/04/2026 – FORMULÁRIOS

Por /

Formulários e Entrada de Dados em HTML

🔹 O que são formulários?

Os formulários em HTML são utilizados para coletar dados dos usuários em páginas web.
Esses dados podem ser enviados para um servidor (como PHP, Java, etc.) para processamento.

Exemplos de uso:

  • Cadastro de usuários
  • Login
  • Pesquisas e questionários
  • Formulários de contato

🔹 Estrutura básica de um formulário

Um formulário é criado com a tag <form>:

<form action="processa.php" method="post">
    
</form>

🔸 Atributos importantes:

  • action → define para onde os dados serão enviados
  • method → define como os dados serão enviados
    • get → dados aparecem na URL
    • post → dados ficam ocultos (mais seguro)

🔹 Principais campos de entrada

🔸 1. Campo de texto

<input type="text" name="nome" placeholder="Digite seu nome">

Usado para:

  • Nome
  • Cidade
  • Informações curtas

🔸 2. Campo de senha

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

Oculta os caracteres digitados.

🔸 3. Campo de e-mail

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

Valida automaticamente o formato do e-mail.

🔸 4. Botões de seleção (radio)

<input type="radio" name="sexo" value="masculino"> Masculino
<input type="radio" name="sexo" value="feminino"> Feminino

Permite escolher apenas uma opção.

🔸 5. Caixa de seleção (checkbox)

<input type="checkbox" name="interesse" value="programacao"> Programação
<input type="checkbox" name="interesse" value="redes"> Redes

Permite selecionar várias opções.

🔸 6. Lista suspensa (select)

<select name="curso">
    <option value="informatica">Informática</option>
    <option value="eletrotecnica">Eletrotécnica</option>
</select>

🔸 7. Área de texto

<textarea name="mensagem"></textarea>

Usada para textos maiores.

🔸 8. Botão de envio

<input type="submit" value="Enviar">

🔹 Exemplo completo de formulário

<!DOCTYPE html>
<html>
<head>
    <title>Formulário</title>
</head>
<body><h2>Cadastro</h2><form action="processa.php" method="post">    Nome: <br>
    <input type="text" name="nome"><br><br>    Email: <br>
    <input type="email" name="email"><br><br>    Senha: <br>
    <input type="password" name="senha"><br><br>    Sexo: <br>
    <input type="radio" name="sexo" value="M"> Masculino
    <input type="radio" name="sexo" value="F"> Feminino <br><br>    Interesses: <br>
    <input type="checkbox" name="interesse[]" value="prog"> Programação
    <input type="checkbox" name="interesse[]" value="redes"> Redes <br><br>    Curso: <br>
    <select name="curso">
        <option>Informática</option>
        <option>Administração</option>
    </select><br><br>    Mensagem: <br>
    <textarea name="mensagem"></textarea><br><br>    <input type="submit" value="Enviar"></form></body>
</html>

🔹 Boas práticas

  • Sempre usar o atributo name (é ele que envia os dados)
  • Utilizar label para acessibilidade
  • Validar dados (HTML + JavaScript)
  • Preferir method="post" para dados sensíveis
  • Organizar o formulário com <br> ou CSS

🔹 Dica importante

HTML não processa dados, ele apenas coleta.
Para salvar ou manipular os dados, você precisa de:

  • PHP
  • Java (Spring Boot)
  • Node.js
  • Python

Questão 1

Crie uma página HTML chamada “form.html” e crie um formulário que contenha:

  • Um campo para digitar o nome do usuário
  • Um botão de envio

Questão 2

Crie um formulário de login contendo: Utilize os tipos corretos (email e password) no “input”

  • Um campo de email
  • Um campo de senha
  • Um botão de envio

Questão 3

Crie um formulário que permita ao usuário:

  • Escolher seu curso (use <select>)
  • Marcar dois interesses (use <input type="checkbox">)
  • insira ao menos menos 2 opções no select
  • insira ao menos 2 opções no checkboxes
Rolar para cima