Validação nativa e envio

O navegador valida por você (de graça)

Boa notícia: antes de escrever uma única linha de JavaScript, o navegador já faz o papel de porteiro pra você. Com alguns atributos nos controles, ele confere os dados no seu lugar; se algo não cumpre, bloqueia o envio e mostra a clássica mensagem vermelha. Você só precisa pedir.

required: campo obrigatório

required impede enviar o formulário se o campo estiver vazio:

<input type="text" name="nome" required />

O type também valida

Um type="email" exige um formato de e-mail válido (deve conter @, etc.):

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

pattern: a sua própria regra

Quando nenhum type encaixa, pattern deixa você inventar a regra com uma expressão regular. Por exemplo, um CEP de 5 dígitos:

<input type="text" name="cep" pattern="[0-9]{5}" />

Faixas e comprimentos

• min / max: valores mínimo e máximo (úteis em number e datas).
• maxlength: número máximo de caracteres em um campo de texto.

<input type="number" name="idade" min="18" max="120" />
<input type="text" name="apelido" maxlength="20" />

O fluxo de envio: action e method

Quando um formulário válido é enviado, o navegador empacota os pares name=valor e os manda a um servidor. Dois atributos do <form> o controlam:

• action: a URL que receberá os dados.
• method: como eles são enviados. get os adiciona à URL (buscas, dados não sensíveis); post os manda no corpo da requisição (cadastros, senhas).

<form action="/cadastro" method="post">
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Criar conta</button>
</form>

Em alto nível: o HTML define o que é enviado e para onde; o servidor decide o que fazer com esses dados. ⚠️ E atenção: a validação nativa é a primeira barreira, mas nunca a única. Um usuário mal-intencionado a burla em dois cliques, então o servidor sempre deve revalidar. Confie, mas verifique.