Responder a eventos de formulário
Você pode usar o JavaScript para responder às interações do usuário no formulário, mostrar outros campos, 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 seleciona uma opção,
você quer mostrar outra <input>
para fazer uma pergunta específica relacionada à seleção.
Como você pode mostrar apenas o elemento <input>
relevante?
Você só pode usar o JavaScript para revelar um <input>
quando o <input type="radio">
associado estiver selecionado.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Vamos analisar o
código JavaScript da demonstração.
Você notou 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 extra é mostrado ou ocultado.
Os usuários podem enviar um formulário sem sair da página?
Imagine que você tenha um formulário de comentários. Quando um leitor adiciona um comentário e envia o formulário, seria ideal que ele pudesse conferir o comentário imediatamente sem precisar atualizar a página.
Para isso, detecte o evento onsubmit
e use event.preventDefault()
para impedir o comportamento padrão
e enviar o FormData
usando a API Fetch.
O 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, onde method="post"
) ou do 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 de leitores de tela sobre mudanças dinâmicas no conteúdo.
Adicione um elemento com o atributo aria-live="polite"
ao HTML
e atualize o conteúdo do elemento após uma mudança.
Por exemplo, atualize o texto para "Seu comentário foi postado" depois que um usuário enviar um comentário.
Saiba mais sobre as regiões ativas da ARIA.
Validação com JavaScript
Confira se as mensagens de erro estão alinhadas ao estilo e ao tom do seu site
A redação das mensagens de erro padrão varia de acordo com o navegador.
Como garantir que a mesma mensagem seja mostrada a todos os usuários
e que ela esteja alinhada com o estilo e o tom do seu site?
Use o método setCustomValidity()
da API Constraint Validation
para definir suas próprias mensagens de erro.
Notificar os usuários 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.
Garantir que os usuários possam ver a senha inserida
O texto inserido para <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.
Teste a demonstração. Alterne a
visibilidade do texto inserido usando Mostrar senha <button>
.
Como funciona? Clicar em Mostrar senha
muda o atributo type
do campo de senha de type="password"
para type="text"
,
e o texto <button>
muda para "Ocultar senha".
É importante tornar o botão Mostrar senha acessível.
Conecte o <button>
ao <input type="password">
usando o atributo aria-controls
.
Para notificar os usuários de leitores de tela se a senha está visível ou oculta,
use um elemento oculto com aria-live="polite"
e mude o texto de acordo.
É importante permitir que os usuários de leitores de tela saibam quando uma senha é exibida e visível para outra pessoa que estiver olhando 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 mostrar a senha.