HTML – 04/05/2026 – FORMULÁRIOS

Por /

Atributos essenciais dos inputs

AtributoFunção
nameNome do campo (enviado ao servidor)
valueValor enviado
requiredCampo obrigatório
placeholderTexto de ajuda
maxlengthLimite de caracteres
readonlyApenas leitura
disabledDesabilitado

🔹 disabled

<input disabled>
  • Visível
  • Não editável
  • ❌ Não envia valor

🔹 hidden (invisível)

<input type="hidden">
  • Invisível
  • ❌ Não editável
  • ✅ Envia valor

🔸 Extra: readonly

<input type="text" value="Ciro" readonly>

✔ Visível
✔ Não editável
✔ É enviado no formulário

  • disabled → bloqueia e não envia
  • hidden → esconde e envia
  • readonly → mostra, bloqueia e envia

🔹 Validação de formulários

O HTML já permite validação básica:

<input type="text" required>
<input type="email" required>
<input type="number" min="1" max="10">

✔ Impede envio de dados inválidos
✔ Evita erros simples

📌 Para validações mais avançadas → usar JavaScript

🔹 Exemplo completo (melhor estruturado)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Cadastro</title>
</head>
<body>

<h2>Cadastro</h2>

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

    <label>Nome:</label><br>
    <input type="text" name="nome" required><br><br>

    <label>Email:</label><br>
    <input type="email" name="email"><br><br>

    <label>Senha:</label><br>
    <input type="password" name="senha"><br><br>

    <label>Sexo:</label><br>
    <input type="radio" name="sexo" value="M"> Masculino
    <input type="radio" name="sexo" value="F"> Feminino <br><br>

    <label>Interesses:</label><br>
    <input type="checkbox" name="interesse[]" value="prog"> Programação
    <input type="checkbox" name="interesse[]" value="redes"> Redes <br><br>

    <label>Curso:</label><br>
    <select name="curso">
        <option value="info">Informática</option>
        <option value="adm">Administração</option>
    </select><br><br>

    <label>Mensagem:</label><br>
    <textarea name="mensagem"></textarea><br><br>

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

</form>

</body>
</html>

🔹 Boas práticas

✔ Sempre usar name nos campos
✔ Evitar GET para dados sensíveis
✔ Usar nomes claros (nome, email, etc.)

🔹 Dica importante

👉 HTML não salva dados
👉 Ele apenas envia

Para trabalhar com os dados você precisa de:

  • PHP
  • Java
  • Node.js
  • Python

🔹 Fluxo completo de um formulário

  1. Usuário preenche os dados
  2. Clica em Enviar
  3. Navegador envia os dados (GET ou POST)
  4. Servidor recebe os dados
  5. Backend processa (salva, valida, responde)

Detalhes inesquecíveis!

  • <form> → estrutura principal
  • <input> → entrada de dados
  • <textarea> → textos longos
  • <select> → listas
  • name → essencial para envio
  • method → GET ou POST
  • HTML coleta → Backend processa

ATIVIDADE DE LABORATÓRIO

  • Atividade 1: Crie um formulário com nome (disabled), id (hidden=100), cidade (text) e method="get", envie e observe a URL → quais campos foram enviados? o nome foi?
  • Atividade 2: Crie um formulário com <input name="a" value="Aluno" readonly> e <input name="b" value="Professor" disabled>, envie → qual valor foi enviado? qual não foi?
  • Atividade 3: Crie um formulário com checkboxes (HTML, CSS, JS), teste com name="curso" e depois name="curso[]", marque vários e envie → o que mudou? qual forma é correta?

Rolar para cima