Passo 1 de 9
Entender o que o navegador verifica
Identifique quando o formato de um preenchimento bloqueia a tentativa de envio e o que a ausência de bloqueio permite concluir.
Trilha de aprendizado · Nível 6 · Tutorial 8
Ao concluir, você poderá configurar obrigatoriedade e limites de preenchimento, associar instruções aos campos e explicar por que a validação do navegador não garante a segurança dos dados recebidos.
Entender o que o navegador verifica
Identifique quando o formato de um preenchimento bloqueia a tentativa de envio e o que a ausência de bloqueio permite concluir. 2 min
Exigir preenchimento e escolhas de forma clara
Use required para exigir preenchimento ou seleção e comunique a obrigatoriedade conforme o tipo de controle. 3 min
Definir limites de comprimento
Configure minlength e maxlength em campos textuais e preveja como eles afetam o preenchimento. 2 min
Restringir intervalos de números e datas
Use min e max para delimitar quantidades e períodos, incluindo os valores das fronteiras e mantendo as instruções visíveis coerentes. 3 min
Controlar os incrementos permitidos
Combine min, max e step para aceitar valores alinhados ao incremento e comunicar essa regra com clareza. 2 min
Associar instruções visíveis aos campos
Associe orientações persistentes aos controles com aria-describedby, mantendo o rótulo e a coerência com as restrições. 3 min
Testar as restrições no navegador
Teste um formulário no seu computador e diferencie bloqueio do envio, prevenção de entrada e ausência de bloqueio nativo. 4 min
Reconhecer os limites da validação no navegador
Diferencie atender às restrições do formulário, comprovar uma informação e validar os dados no servidor. 2 min
Aplicar e revisar um formulário com instruções claras
Ajuste um formulário local, compare uma tentativa bloqueada com outra sem bloqueio e justifique os limites da validação nativa. 3 min
Passo 1 de 9
Identifique quando o formato de um preenchimento bloqueia a tentativa de envio e o que a ausência de bloqueio permite concluir.
Ao clicar em um botão de envio, o navegador verifica as restrições dos campos sujeitos à validação. Se algum deles não atender às restrições, essa tentativa normal de envio é bloqueada. Essa checagem é chamada de validação nativa e não exige JavaScript.
Leia este trecho de formulário:
<form>
<p>
<label for="email">E-mail (opcional)</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="site">Site (opcional)</label>
<input type="url" id="site" name="site">
</p>
<button type="submit">Enviar</button>
</form>Exemplo
No campo de e-mail, bia.exemplo.com não atende ao formato; bia@exemplo.com atende.
No campo de URL, meu site não atende ao formato; https://exemplo.com atende.
Neste trecho, nenhum campo exige preenchimento. Deixá-los vazios não causa bloqueio. Mas, se forem preenchidos, seus valores precisam atender ao formato do tipo escolhido.
Considere o formulário apresentado, com apenas os campos opcionais E-mail (type="email") e Site (type="url"). Em qual situação o navegador bloqueia a tentativa ao clicar em Enviar?
Quando todos os campos sujeitos à validação atendem às restrições, a validação nativa deixa a tentativa de envio prosseguir.
Isso permite concluir apenas que nenhuma dessas restrições impediu a tentativa. Não é uma confirmação de recebimento, processamento ou armazenamento dos dados.
Um formulário tem apenas dois campos opcionais: E-mail (type="email") e Site (type="url").
bia.exemplo.com; Site está vazio.bia@exemplo.com; Site continua vazio.Ao clicar em Enviar, qual tentativa é bloqueada e por quê? A segunda permite afirmar que os dados foram processados? Explique em poucas frases.
Escreva pelo menos 20 caracteres (0/20).
Passo 2 de 9
Use required para exigir preenchimento ou seleção e comunique a obrigatoriedade conforme o tipo de controle.
required exige preenchimento ou seleção nos controles compatíveis. É um atributo booleano: basta estar presente. Escrever required="false" não desativa a exigência; para removê-la, retire o atributo.
Comunique também a obrigatoriedade no rótulo, na legenda ou em uma instrução próxima. Não dependa apenas de cor ou de um asterisco sem explicação.
<p>
<label for="nome">Nome (obrigatório)</label>
<input type="text" id="nome" name="nome" required>
</p>
<fieldset>
<legend>Turno (escolha obrigatória)</legend>
<p>
<input type="radio" id="manha" name="turno" value="manha" required>
<label for="manha">Manhã</label>
</p>
<p>
<input type="radio" id="tarde" name="turno" value="tarde" required>
<label for="tarde">Tarde</label>
</p>
</fieldset>Dica
Nos radios com o mesmo name, basta um integrante ter required para exigir uma escolha no grupo — não necessariamente daquele integrante. No exemplo, Manhã ou Tarde atende à exigência. Manter required em todos os integrantes deixa a regra consistente e facilita a manutenção.
Em um formulário, os radios “Manhã” e “Tarde” têm o mesmo name="turno". Apenas “Tarde” tem required. O que atende à obrigatoriedade desse grupo?
Em um checkbox, required exige a marcação daquela opção individual. Se você colocar o atributo em três checkboxes, exigirá os três marcados — não “pelo menos um do conjunto”.
<input type="checkbox" id="leitura" name="leitura" value="sim" required>
<label for="leitura">
Li as instruções da oficina (obrigatório)
</label>Em um select simples de seleção única, use uma primeira option com value="", diretamente dentro do select, fora de qualquer optgroup. Ela apresenta a orientação inicial.
Com required, manter essa opção selecionada não atende à exigência: é preciso escolher uma opção com valor não vazio.
<label for="oficina">Oficina (obrigatória)</label>
<select id="oficina" name="oficina" required>
<option value="">Escolha uma oficina</option>
<option value="fotografia">Fotografia</option>
<option value="desenho">Desenho</option>
</select>Associe cada requisito à configuração que o atende. Em todos os casos, a obrigatoriedade também deve ser informada visivelmente.
Toque em um item e depois no par correspondente.
Passo 3 de 9
Configure minlength e maxlength em campos textuais e preveja como eles afetam o preenchimento.
minlength define o comprimento mínimo de um texto preenchido; maxlength, o máximo. Eles funcionam em controles textuais compatíveis, como input type="text" e textarea.
Neste exemplo, o apelido é obrigatório e deve ter de 4 a 12 caracteres, incluindo os dois limites:
<label for="apelido">Apelido (obrigatório)</label>
<p>Use de 4 a 12 caracteres.</p>
<input type="text" id="apelido" name="apelido"
required minlength="4" maxlength="12">Dica
Com maxlength, o navegador frequentemente impede a entrada de caracteres adicionais ao atingir o limite. Não espere necessariamente uma mensagem de erro depois de tentar enviar.
Um código textual obrigatório deve ter de 5 a 8 caracteres. Complete a lacuna com os dois atributos de comprimento, separados por um espaço. Use aspas duplas.
<input type="text" required ____>
Sem required, um campo vazio continua válido mesmo com minlength. Se a pessoa digitar um texto, ele deverá respeitar o mínimo.
Neste textarea, deixar vazio é permitido; digitar menos de 8 caracteres bloqueia a tentativa normal de envio.
<label for="recado">Recado (opcional)</label>
<p>Se preencher, use de 8 a 40 caracteres.</p>
<textarea id="recado" name="recado"
minlength="8" maxlength="40"></textarea>Dica
minlength e maxlength limitam o comprimento do texto, não o valor de uma quantidade. Esses atributos não se aplicam a input type="number".
Considere o campo opcional com minlength="8" e maxlength="40". Relacione cada situação ao comportamento esperado, considerando apenas essas restrições.
Toque em um item e depois no par correspondente.
Passo 4 de 9
Use min e max para delimitar quantidades e períodos, incluindo os valores das fronteiras e mantendo as instruções visíveis coerentes.
Em controles compatíveis, min define o limite inferior e max, o superior. Os próprios limites fazem parte do intervalo permitido, desde que as demais restrições do campo também sejam atendidas.
Para uma quantidade de ingressos de 2 a 6 unidades, mantenha o texto visível e os atributos de acordo:
<label for="ingressos">Quantidade de ingressos (de 2 a 6 unidades)</label>
<input type="number" id="ingressos" name="ingressos"
min="2" max="6">Para o campo com min="2" e max="6", associe cada quantidade à sua posição no intervalo.
Toque em um item e depois no par correspondente.
Em um input type="date", min define a primeira data permitida e max, a última. Neste exemplo de visita a uma exposição, tanto 10/11/2027 quanto 20/11/2027 pertencem ao período.
<label for="visita">Data da visita (de 10/11/2027 a 20/11/2027)</label>
<input type="date" id="visita" name="visita"
min="2027-11-10" max="2027-11-20">Exemplo
Não é obrigatório usar os dois atributos:
min="2" no campo numérico, sem max.max="2027-11-20" no campo de data, sem min.Não invente um segundo limite se o requisito não o exige.
Dica
O calendário ou os botões do campo podem facilitar a escolha, mas nem sempre impedem a digitação de valores fora do intervalo. Se um valor assim permanecer no controle, a validação nativa bloqueia a tentativa normal de envio.
A orientação de um campo type="date" diz: “Escolha uma data de 05/12/2027 a 09/12/2027, incluindo os dois dias”. Quais atributos representam exatamente esse intervalo?
Passo 5 de 9
Combine min, max e step para aceitar valores alinhados ao incremento e comunicar essa regra com clareza.
O atributo step define o incremento entre valores numéricos válidos. Nos exemplos com min explícito, esse mínimo é a base: parta dele e some o incremento até alcançar o limite permitido.
<label for="pecas">Quantidade de peças (obrigatório)</label>
<p>Informe de 2 a 14 peças, em incrementos de 4 a partir de 2.</p>
<input type="number" id="pecas" name="pecas"
min="2" max="14" step="4" required>Exemplo
Os valores permitidos são 2, 6, 10 e 14. O valor 8 está dentro do intervalo, mas viola step e bloqueia a tentativa normal de envio. A restrição também vale para números digitados: não serve apenas para configurar os botões de aumentar e diminuir.
Um campo tem type="number", min="3", max="15" e step="4". Entre 7, 9, 11 e 15, o único valor dentro do intervalo que viola o incremento é ____.
Em input type="number", omitir step mantém o incremento padrão de 1. Com min="0.5" e max="3", isso permite apenas 0,5; 1,5 e 2,5. Para aceitar avanços de meio quilograma, configure step="0.5".
<label for="argila">Quantidade de argila (obrigatório)</label>
<p>Informe de 0,5 a 3 kg, em incrementos de 0,5 kg.</p>
<input type="number" id="argila" name="argila"
min="0.5" max="3" step="0.5" required>Exemplo
Agora são permitidos 0,5; 1; 1,5; 2; 2,5 e 3 kg. Já 1,2 kg continua desalinhado. Nos atributos HTML, escreva decimais com ponto (0.5); no texto visível em português, use vírgula (0,5).
Um campo type="number" terá a instrução: “Informe de 0,5 a 2 litros, em incrementos de 0,25 litro a partir de 0,5”. Qual configuração corresponde ao requisito?
Passo 6 de 9
Associe orientações persistentes aos controles com aria-describedby, mantendo o rótulo e a coerência com as restrições.
Uma orientação útil aparece antes da tentativa de envio e continua visível durante o preenchimento.
Veja como associar uma instrução ao campo:
<label for="apelido">Apelido (obrigatório)</label>
<input id="apelido" name="apelido" type="text"
required minlength="4" maxlength="12"
aria-describedby="apelido-ajuda">
<p id="apelido-ajuda">Use de 4 a 12 caracteres.</p>No controle, aria-describedby="apelido-ajuda" referencia o id do parágrafo, sem o prefixo #. Esse texto fornece uma descrição acessível para tecnologias assistivas, como leitores de tela. A descrição complementa o nome fornecido pelo label; não remova nem substitua o rótulo.
<label for="email">E-mail (obrigatório)</label>
<input id="email" name="email" type="email"
required aria-describedby="___">
<p id="email-ajuda">Use o formato nome@example.com.</p>Complete aria-describedby="___" para associar a instrução ao campo. Digite apenas o valor que falta, sem aspas.
aria-describedby aceita vários valores de id, separados por espaços, sem vírgulas ou #. Assim, dois elementos de orientação podem compor a descrição do mesmo campo.
<label for="quantidade">Quantidade</label>
<input id="quantidade" name="quantidade" type="number"
required min="2" max="10" step="2"
aria-describedby="quantidade-obrigatoria quantidade-limites">
<p id="quantidade-obrigatoria">Preenchimento obrigatório.</p>
<p id="quantidade-limites">Informe de 2 a 10 unidades, de 2 em 2.</p>Dica
A ajuda e sua associação acessível não criam regras de validação. Neste exemplo, as restrições vêm de required, min, max e step. Escrever “de 2 a 10” sem configurar os atributos não limita o valor.
<label for="duracao">Duração da reserva</label>
<input id="duracao" name="duracao" type="number"
required min="30" max="120" step="30"
aria-describedby="duracao-ajuda">
<p id="duracao-ajuda">[orientação a escrever]</p>A duração é informada em minutos. Escreva somente o texto que substituirá “[orientação a escrever]”, mantendo o label e os atributos. Comunique obrigatoriedade, unidade, intervalo e incremento em uma orientação breve.
Passo 7 de 9
Teste um formulário no seu computador e diferencie bloqueio do envio, prevenção de entrada e ausência de bloqueio nativo.
Copie todo o código abaixo, salve como teste-validacao.html no seu computador e abra no navegador.
Use somente dados fictícios. O formulário usa GET sem action, portanto a tentativa de envio aponta para o próprio documento. Não há CSS, JavaScript, serviço remoto nem processamento ou armazenamento no servidor.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste local de validação</title>
</head>
<body>
<main>
<h1>Teste local de validação</h1>
<p>Use apenas dados fictícios. Este formulário não tem um serviço de processamento.</p>
<form method="get">
<div>
<label for="apelido">Apelido (obrigatório)</label>
<input type="text" id="apelido" name="apelido"
required minlength="3" maxlength="8"
aria-describedby="ajuda-apelido">
<p id="ajuda-apelido">Digite de 3 a 8 caracteres.</p>
</div>
<div>
<label for="email">E-mail (obrigatório)</label>
<input type="email" id="email" name="email" required
aria-describedby="ajuda-email">
<p id="ajuda-email">Use um endereço fictício, como lia@example.com.</p>
</div>
<div>
<label for="pagina">Página (obrigatória)</label>
<input type="url" id="pagina" name="pagina" required
aria-describedby="ajuda-pagina">
<p id="ajuda-pagina">Informe uma URL completa, como https://example.com.</p>
</div>
<div>
<label for="quantidade">Quantidade (obrigatória)</label>
<input type="number" id="quantidade" name="quantidade"
required min="2" max="10" step="2"
aria-describedby="ajuda-quantidade">
<p id="ajuda-quantidade">De 2 a 10 unidades, em incrementos de 2.</p>
</div>
<div>
<label for="data">Data (obrigatória)</label>
<input type="date" id="data" name="data"
required min="2027-05-10" max="2027-05-20"
aria-describedby="ajuda-data">
<p id="ajuda-data">De 10/05/2027 a 20/05/2027, incluindo essas datas.</p>
</div>
<button type="submit">Testar envio local</button>
</form>
</main>
</body>
</html>Preencha estes valores de referência, sem clicar no botão ainda:
Lialia@example.comhttps://example.com4Sem editar o HTML, faça cada teste abaixo separadamente. Depois de observar o resultado, restaure o valor de referência antes de seguir. Assim, apenas uma restrição fica em teste por vez.
Exemplo
| Ação no formulário | Resultado esperado |
| --- | --- |
| Apague o e-mail e clique em Testar envio local. | Bloqueio por falta de preenchimento obrigatório. |
| Digite lia no e-mail e tente enviar. | Bloqueio por formato inadequado. |
| Digite pagina no campo Página e tente enviar. | Bloqueio por formato inadequado de URL. |
| Apague o apelido, digite Li e tente enviar. | Bloqueio por comprimento abaixo de 3. |
| Apague o apelido e digite abcdefghi, letra por letra. Não envie ainda. | O navegador normalmente limita a entrada a abcdefgh, sem precisar mostrar uma mensagem de erro. |
Para testar minlength, digite o texto no campo: não substitua esse teste por um value inicial no código.
Dica
Texto, idioma e apresentação das mensagens variam conforme o navegador e o ambiente. Ele também pode indicar um impedimento por vez, sem explicar todos os requisitos. Se outro campo for apontado, restaure os valores de referência e repita o teste.
Exemplo
Continue restaurando os valores de referência entre as tentativas. Faça uma tentativa de envio com cada valor indicado:
| Campo e valor testado | Resultado esperado |
| --- | --- |
| Quantidade: 0; depois, 12. | Bloqueio por estar abaixo de 2 ou acima de 10. |
| Quantidade: 5. | Bloqueio: está no intervalo, mas não se alinha aos incrementos de 2 a partir do mínimo 2. |
| Data: 09/05/2027; depois, 21/05/2027. | Bloqueio por estar fora do período, caso a interface permita inserir essas datas. |
Se o controle impedir a entrada ou a seleção de um valor fora do intervalo, registre isso como prevenção de entrada. Não é necessário forçar a interface.
Restaure todos os valores de referência e clique em Testar envio local.
O esperado é não haver bloqueio nativo. O navegador pode navegar ou recarregar o documento local. Se os campos forem limpos, isso não significa que os dados foram salvos.
Dica
A ausência de bloqueio permite prosseguir com a tentativa de envio. Navegar ou recarregar o arquivo não comprova recebimento nem processamento dos dados.
Informe o navegador usado e relate:
Não é necessário copiar mensagens literalmente. Se algum resultado foi diferente do esperado, descreva a diferença.
Escreva pelo menos 80 caracteres (0/80).
Passo 8 de 9
Diferencie atender às restrições do formulário, comprovar uma informação e validar os dados no servidor.
Um valor pode atender às restrições do campo sem corresponder à realidade ou cumprir todas as regras do serviço.
Exemplo
Na tentativa de envio, o navegador não apontou erros nos campos de e-mail e URL. O que essa verificação permite concluir?
Requisições podem chegar ao servidor sem passar pelas restrições do formulário. Por isso, o servidor precisa validar os dados recebidos e as regras aplicáveis ao serviço, independentemente de o navegador ter apresentado erros.
Por exemplo: além de conferir o limite de quantidade, um serviço de reservas precisa verificar a disponibilidade.
Atenção
HTTPS protege o transporte, mas não torna os valores verdadeiros ou válidos. Validar a entrada é necessário, porém também não garante, por si só, toda a segurança da aplicação.
Um serviço recebe por HTTPS uma reserva de 4 unidades, sem erros no navegador e dentro do limite de 1 a 5 do formulário. Nessas condições, o servidor pode dispensar a validação da quantidade e da disponibilidade.
Passo 9 de 9
Ajuste um formulário local, compare uma tentativa bloqueada com outra sem bloqueio e justifique os limites da validação nativa.
Copie o documento abaixo para um arquivo chamado revisao.html no seu computador. Ele contém divergências intencionais. No seu editor, ajuste os atributos e as instruções conforme os requisitos, preservando os rótulos.
Use apenas dados fictícios. A tentativa de envio aponta para o próprio documento, sem serviço remoto nem processamento no servidor.
Exemplo
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Treino de validação</title>
</head>
<body>
<main>
<h1>Pedido fictício</h1>
<p>Use somente dados fictícios. Este formulário não registra pedidos.</p>
<form method="get">
<p>
<label for="apelido">Apelido (obrigatório)</label>
<input type="text" id="apelido" name="apelido"
minlength="2" maxlength="12"
aria-describedby="ajuda-apelido">
</p>
<p id="ajuda-apelido">Use de 2 a 12 caracteres.</p>
<p>
<label for="email">E-mail (obrigatório)</label>
<input type="email" id="email" name="email" required
aria-describedby="ajuda-email">
</p>
<p id="ajuda-email">Informe um endereço no formato pessoa@example.com.</p>
<p>
<label for="quantidade">Quantidade (obrigatória)</label>
<input type="number" id="quantidade" name="quantidade" required
min="2" max="10" step="1"
aria-describedby="#ajuda-quantidade">
</p>
<p id="ajuda-quantidade">De 2 a 10 unidades, em incrementos de 1.</p>
<button type="submit">Testar preenchimento</button>
</form>
</main>
</body>
</html>Salve as correções e abra ou atualize o arquivo no navegador.
Observe o comportamento, não uma frase específica da mensagem. Um eventual recarregamento local não comprova processamento dos dados. Se o resultado divergir do esperado, revise as correções e repita.
Relate quais atributos e textos você corrigiu e como preservou as associações dos campos. Registre os dados usados, o resultado esperado e o observado em cada tentativa. Por fim, explique por que a tentativa sem bloqueio não dispensa a validação no servidor.
Escreva pelo menos 100 caracteres (0/100).
Resumo
Compare estes critérios com o arquivo que você revisou.
Parabéns! Você concluiu: Aplicar validação nativa com instruções claras
Você concluiu “Aplicar validação nativa com instruções claras”. Leve esta rotina aos seus formulários: configurar restrições, orientar antes do erro, testar e reconhecer o que o navegador não garante.
Você concluiu este nível!
Agora você vai iniciar: Integração e validação de um site
Planejar pastas e navegação de um pequeno siteAo concluir, você será capaz de planejar as páginas, as pastas e as conexões de um pequeno site antes de montar seus documentos.Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks