Validação nativa
Todo formulário que aceita um e-mail sem @ ou um campo obrigatório vazio é um formulário deixando de usar um recurso que o próprio navegador já oferece de graça.
Estudar esta lição interativa →Até aqui, todo campo dos formulários que você construiu aceitava qualquer coisa: um e-mail sem @, uma idade negativa, um campo obrigatório deixado em branco. Tecnicamente funcionava, mas na prática esse tipo de formulário empurra para o back-end (ou, pior, para lugar nenhum) um trabalho de checagem que o próprio HTML já sabe fazer sozinho, sem uma linha de JavaScript.
Pense num porteiro na entrada de uma festa, conferindo a lista de convidados antes de deixar alguém passar da porta. Sem porteiro, qualquer pessoa entra e o problema só aparece lá dentro, tarde demais. A validação nativa do HTML é esse porteiro: ela barra o envio do formulário antes de qualquer dado sair do navegador, mostrando na hora, para a própria pessoa, o que precisa ser corrigido.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique em Enviar sem preencher tudo: o navegador bloqueia sozinho e mostra a própria mensagem de erro.
required
requiredImpede o envio se o campo estiver vazio. O mais básico e o mais usado dos atributos de validação.
pattern
pattern="\d{5}-\d{3}"Exige que o valor bata com uma expressão regular. Combine com title="..." para a mensagem de erro explicar o formato esperado.
min / max
min="18" max="120"Em campos number, date e range, limita o intervalo de valores aceitos.
type="email" / "url"
type="email"Ativa uma checagem de formato básica (existe um @ no lugar certo, por exemplo) sem nenhum código adicional.
Repare que o pattern do CEP no exemplo acima só aceita o formato 00000-000: cinco dígitos, um hífen, três dígitos. Se a pessoa digitar diferente, o navegador aponta o campo e usa o texto do atributo title como dica da regra esperada. Essa é uma expressão regular, um assunto que vale a pena aprofundar mais adiante (em JavaScript), mas já dá para usar padrões prontos como este sem entender toda a sintaxe.
Validação no HTML acontece inteiramente no navegador de quem preenche, e qualquer pessoa com um pouco de conhecimento técnico consegue burlar isso (desligando JavaScript não afeta a validação nativa, mas enviar a requisição direto, sem passar pelo formulário, sim). Por isso, validação nativa é uma camada de usabilidade (feedback instantâneo, sem espera de servidor), nunca a única linha de defesa: todo dado que chega a um servidor de verdade precisa ser validado de novo, no back-end. Isso foge do escopo deste curso, mas vale gravar o princípio: nunca confie cegamente em dado vindo do navegador.
Todo campo com regras de validação ganha, automaticamente, dois estados que o CSS consegue enxergar: :valid (o valor atual satisfaz as regras) e :invalid (não satisfaz). Isso permite, por exemplo, pintar a borda de um campo de vermelho quando ele está inválido, sem nenhum JavaScript. Um cuidado: :invalid vale desde o carregamento da página, então um campo required vazio já nasce "inválido" e a página abriria toda vermelha. Por isso, no CSS você vai preferir :user-invalid, que só entra em ação depois que a pessoa interagiu com o campo. Um segundo cuidado: pattern só é conferido quando há algo digitado, então, se o campo também é obrigatório, junte required ao pattern. Para limitar o tamanho do texto existem ainda minlength e maxlength.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste o type e adicione required.