JavaScript

Responder a eventos de formulário

Você pode usar o JavaScript para responder a interações do usuário no formulário, revelar outros campos do formulário, enviar um formulário e muito mais.

Ajudar os usuários a preencher outros controles de formulário

Imagine que você criou um formulário de pesquisa. Depois que um usuário selecionar uma opção, você quer mostrar mais uma <input> para fazer uma pergunta específica relacionada à seleção. Como mostrar apenas o elemento <input> relevante?

Você pode usar o JavaScript para revelar uma <input> somente quando a <input type="radio"> associada estiver selecionada.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Confira o código JavaScript para a demonstração. Você percebeu os atributos aria-controls e aria-expanded? Use esses atributos ARIA para ajudar os usuários de leitores de tela a entender quando um controle de formulário adicional é mostrado ou ocultado.

Garantir que os usuários possam enviar um formulário sem sair de uma página

Imagine que você tenha um formulário de comentários. Quando um leitor adiciona um comentário e envia o formulário, o ideal seria ver o comentário imediatamente sem atualizar a página.

Para fazer isso, detecte o evento onsubmit, use event.preventDefault() para evitar o comportamento padrão e envie FormData usando a API Fetch.

Compatibilidade com navegadores

  • 42
  • 14
  • 39
  • 10.1

Origem

Seu script de back-end pode verificar se uma solicitação POST parece ser do navegador (usando o atributo action de um elemento de formulário, em que method="post") ou de JavaScript, como uma solicitação fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Sempre notifique os usuários do leitor de tela sobre alterações no conteúdo dinâmico. Adicione um elemento com o atributo aria-live="polite" ao HTML e atualize o conteúdo desse elemento após uma mudança. Por exemplo, atualize o texto para "Seu comentário foi postado com êxito", depois que um usuário enviar um comentário.

Saiba mais sobre as regiões ativas ARIA.

Validação com JavaScript

Garanta que as mensagens de erro estejam alinhadas com o estilo e o tom do site

O texto das mensagens de erro padrão varia de acordo com o navegador. Como você pode garantir que a mesma mensagem seja exibida para todos os usuários e que ela esteja alinhada com o estilo e tom do seu site? Use o método setCustomValidity() da API Constraint Validation para definir suas próprias mensagens de erro.

Garantir que os usuários sejam notificados sobre erros em tempo real

Os recursos HTML integrados para validação de formulários são ótimos para notificar os usuários sobre campos de formulário inválidos antes que os dados sejam enviados ao back-end. Não seria ótimo notificar os usuários assim que eles saírem de um campo de formulário?

Detecte o evento blur, que é acionado quando um elemento perde o foco, e use a interface ValidityState para detectar se um controle de formulário é inválido.

Verifique se os usuários conseguem ver a senha que digitaram

O texto inserido em <input type="password"> é obscurecido por padrão para respeitar a privacidade dos usuários. Ajude os usuários a digitar a senha, mostrando um <button> para alternar a visibilidade do texto digitado.

Confira a demonstração. Para ativar a visibilidade do texto digitado, use Mostrar senha <button>. Como isso funciona? Clicar em Show Password, muda o atributo type do campo de senha de type="password" para type="text", e o texto <button> muda para 'Hide Password'.

É importante que o botão Mostrar senha fique acessível. Conecte o <button> ao <input type="password"> usando o atributo aria-controls.

Para notificar os usuários do leitor de tela se a senha estiver sendo mostrada ou oculta no momento, use um elemento oculto com aria-live="polite" e mude o texto correspondente. É importante permitir que os usuários de leitores de tela saibam quando uma senha é exibida e fica visível para outra pessoa que esteja olhando para a tela.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Saiba mais sobre como implementar uma opção de programa de senha.

Recursos