Formulários que ajudam as pessoas a conseguir
Leia a entrada de um formulário, valide-a e informe erros de forma acessível.
- Ler o valor de um campo no envio
- Usar preventDefault num fluxo de formulário no cliente
- Mostrar um status claro de erro ou de sucesso
O HTML dá a um formulário controles com rótulo e validação nativa. O CSS pode destacar o estado dele. O JavaScript trata o evento submit, lê o valor e atualiza o feedback. Comece com <label>, um tipo de campo adequado e restrições nativas. As verificações em JavaScript podem melhorar a experiência, mas um servidor precisa validar os dados de novo antes de confiar neles.
1<form id="signup">
2 <label for="email">Email address</label>
3 <input id="email" name="email" type="email" required>
4 <button type="submit">Join</button>
5 <p id="feedback" role="status"></p>
6</form>
7<script src="signup.js" defer></script>1const form = document.querySelector("#signup");
2const feedback = document.querySelector("#feedback");
3form.addEventListener("submit", (event) => {
4 event.preventDefault();
5 const email = form.elements.namedItem("email").value.trim();
6 feedback.textContent = email ? "Thanks for joining!" : "Enter an email address.";
7});Um aplicativo pode usar role="status" para atualizações não urgentes, para que as tecnologias assistivas possam anunciá-las sem mover o foco. Mantenha as mensagens específicas. Se o servidor rejeitar um formulário, mostre o erro perto do campo e permita a correção. Veja formulários no MDN e mensagens de status do W3C.
Principais conclusões
Use primeiro rótulos semânticos, tipos de campo e restrições nativas.
Trate o submit, impeça o comportamento padrão quando for ficar na página e dê um feedback específico.
Um servidor precisa validar a entrada de novo.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Dê um feedback útil no formulário
O código inicial cria um formulário na página isolada do exercício. No envio, impeça a ação padrão, tire os espaços das pontas da entrada e coloque Enter a name no parágrafo de status se ela estiver em branco; caso contrário, Welcome, NAME!. O teste envia o formulário e imprime o texto do status.
- Nome
- Em branco
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…