A validação que o navegador já faz sozinho · HTML do zero

O navegador já sabe conferir

Sem uma linha de JavaScript:

<label for="email">E-mail</label>
<input type="email" id="email" name="email" required />

Se a pessoa deixar vazio ou digitar algo que não é e-mail, o navegador barra o envio, rola até o campo, põe o foco nele e mostra uma mensagem.

Isso é muito por um atributo. E num portfólio, é toda a validação que existe: o formulário de contato não tem JavaScript nenhum por trás.

Os atributos de validação

<!-- Não pode ficar vazio -->
<input type="text" id="nome" name="nome" required />

<!-- Precisa ter formato de e-mail -->
<input type="email" id="email" name="email" required />

<!-- Tamanho do texto -->
<input type="text" id="nome" name="nome" minlength="3" maxlength="120" />

<!-- Faixa numérica -->
<input type="number" id="orcamento" name="orcamento" min="0" max="1000000" />

<!-- Faixa de datas -->
<input type="date" id="prazo" name="prazo" min="2026-01-01" />

<!-- Formato próprio -->
<input
  type="tel"
  id="telefone"
  name="telefone"
  pattern="\(\d{2}\) \d{5}-\d{4}"
  title="No formato (97) 99999-8888"
/>

`maxlength` não é detalhe

Todo campo de texto merece um teto. O motivo não é estético: é o texto colado por engano.

Alguém copia um documento inteiro, clica no campo errado e cola. Sem maxlength, isso vai para o servidor, e se a coluna do banco não comportar, a resposta é um erro genérico em vez de um aviso claro.

Num formulário de contato de portfólio, o teto tem um segundo uso: o campo de mensagem com maxlength="2000" avisa a quem escreve que aquilo não é o lugar de um documento inteiro - e a pessoa manda o resumo, que é o que você queria.

O piso do campo de mensagem

<label for="mensagem">Mensagem</label>
<textarea
  id="mensagem"
  name="mensagem"
  rows="6"
  required
  minlength="10"
  maxlength="2000"
></textarea>

Dez caracteres de piso barram o "oi" solto - aquele que obriga você a responder "oi, em que posso ajudar?" e esperar mais um dia. Não barram quem tem pouco e direto a dizer.

A validação do navegador não protege nada

Este é o ponto mais importante da aula.

A validação do HTML é conveniência para quem preenche: avisa o erro antes de enviar, sem esperar a viagem até o servidor e de volta.

Ela não é segurança. Qualquer pessoa consegue:

abrir as ferramentas do navegador e apagar o required;
enviar dados direto ao servidor, sem abrir a página.

Ajudando o preenchimento automático

<input type="text" id="nome" name="nome" autocomplete="name" />
<input type="email" id="email" name="email" autocomplete="email" />
<input type="tel" id="telefone" name="telefone" autocomplete="tel" />

O autocomplete diz ao navegador o que aquele campo é, e ele oferece o valor que a pessoa já usou antes. Num formulário preenchido no celular, isso pode ser a diferença entre a mensagem enviada e a aba fechada.

O formulário de contato validado

<form action="https://formulario.exemplo/contato" method="post">
  <fieldset>
    <legend>Quem está falando</legend>

    <label for="nome">Nome completo</label>
    <input
      type="text"
      id="nome"
      name="nome"
      required
      minlength="3"
      maxlength="120"
      autocomplete="name"
    />

    <label for="email">E-mail</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      maxlength="160"
      autocomplete="email"
      placeholder="[email protected]"
    />
  </fieldset>

  <fieldset>
    <legend>Sobre o que</legend>

    <label for="assunto">Assunto</label>
    <select id="assunto" name="assunto" required>
      <option value="">Selecione</option>
      <option value="projeto">Um projeto</option>
      <option value="vaga">Uma vaga</option>
      <option value="duvida">Uma dúvida técnica</option>
    </select>

    <label for="mensagem">Mensagem</label>
    <textarea
      id="mensagem"
      name="mensagem"
      rows="6"
      required
      minlength="10"
      maxlength="2000"
    ></textarea>
  </fieldset>

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

Onde o erro vai aparecer

O navegador mostra a mensagem numa bolha, no campo, e ela some sozinha. É pouco: quem usa leitor de tela pode não ouvi-la, e quem se distraiu não a vê de novo.

Com HTML puro, é o que há. O que você pode fazer hoje, e vai fazer no curso de CSS, é deixar o campo com erro visualmente distinto - :invalid é um seletor de CSS, e existe justamente para isso. E o que vai faltar - a mensagem escrita embaixo do campo, que fica lá até a pessoa corrigir - é trabalho de JavaScript.

No portfólio

O formulário da aula passada ganha as regras:

required nos campos sem os quais a mensagem não serve;
minlength e maxlength em todos os campos de texto;
type certo em cada campo, para o teclado do celular e para a conferência;
autocomplete em nome, e-mail e telefone;
<option value=""> como primeira opção de todo <select> obrigatório.

Depois, tente enviar o formulário vazio. Depois com um e-mail sem @. Depois com "oi" na mensagem. Cada tentativa mostra uma mensagem diferente do navegador, e é assim que você confere que as regras estão onde você pensa que estão.

Exercícios

Marque como required só os campos sem os quais você não consegue responder à mensagem. Justifique cada um que ficou de fora.
Ponha minlength e maxlength em todos os campos de texto do seu formulário.
Escreva um pattern para o telefone, com title explicando o formato.
Adicione autocomplete nos campos de nome, e-mail e telefone, e teste no celular.
Envie o formulário vazio, depois com e-mail inválido, depois com mensagem de dois caracteres. Anote a mensagem que o navegador mostrou em cada caso.
Abra as ferramentas do navegador, apague um required e envie. Escreva com suas palavras por que o servidor precisa conferir de novo.

Referências

Validação de formulário - MDN - os atributos e os limites deles
autocomplete - MDN - a lista completa de valores
HTML Input Attributes - W3Schools - exemplos de cada atributo