HTML Academy · Aula

required pattern min max e maxlength

Adicione restrições de validação integradas aos campos de formulário.

required pattern min max e maxlength é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Validação de formulários com HTML5

O HTML5 adicionou validação integrada de formulários — não é necessário JavaScript:

Os navegadores verificam as restrições antes do envio
Mensagens de erro nativas aparecem automaticamente
Funciona com as pseudoclasses :valid / :invalid do CSS

Obrigatório

O atributo required impede o envio se o campo estiver vazio:

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

Padrão

O atributo pattern valida o texto com base em uma expressão regular:

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

Exemplos comuns de padrões

Padrões de expressão regular úteis para campos de formulário:

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

Mínimo e máximo

Restrinja entradas numéricas, de data e de intervalo:

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

Comprimento máximo e mínimo

Controle o comprimento da entrada de texto:

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

Incremento

O atributo step define incrementos válidos para entradas de número e intervalo:

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSS :valid e :invalid

Estilize os campos com base no estado de validação:

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

title para mensagens de erro personalizadas

O atributo title fornece uma dica no erro de validação do navegador:

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

Combinando restrições

Vários atributos de validação funcionam em conjunto:

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidate e momento da validação

Por padrão, a validação é acionada no envio. Para validar em cada evento de entrada:

<input type="email" id="email">

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

Resumo das pseudoclasses de validação

Pseudoclasses CSS de validação de formulários:

:valid — a validação das restrições foi aprovada
:invalid — uma ou mais restrições falharam
:required — possui o atributo required
:optional — não possui required
:in-range — valor dentro dos limites de min/max
:out-of-range — valor fora dos limites de min/max

Verificação rápida

Qual atributo limita o número máximo de caracteres em uma entrada de texto?

Recapitulação: atributos de validação

Essenciais da validação com HTML5:

required — o campo deve ser preenchido
pattern — valida com base em uma expressão regular
min / max — limites de valor para número/data/intervalo
maxlength / minlength — limites da quantidade de caracteres
step — incrementos válidos
CSS :valid / :invalid para estilização

Perguntas Frequentes

A aula “required pattern min max e maxlength” é grátis?

Sim — o texto completo de “required pattern min max e maxlength” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “required pattern min max e maxlength”?

Adicione restrições de validação integradas aos campos de formulário. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “required pattern min max e maxlength”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

required pattern min max e maxlength
O atributo novalidate
Fundamentos da API de validação de restrições
Validação com HTML5 versus JavaScript: compromissos

← Voltar para HTML Academy