5.1.1.13 - Requisitos para determinação de tipo de campos de formulários
Descrição
Os campos de formulários devem ter seu tipo determinado com base na necessidade de entrada. Deve ser especificado o tipo de campo para a entrada de dados de acordo com a finalidade deste campo. Especificar o tipo de campo de formulário por meio de código de programação oferece uma experiência melhor para o usuário.
Exemplo
Declarar como campos numéricos permite que um teclado apenas numérico seja exibido para o preenchimento do usuário.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Garanta que os campos de formulário sejam desenhados de acordo com o tipo de entrada esperada (como número, texto, e-mail, data), ajudando a guiar o usuário visualmente sobre o que é necessário inserir.
Indique o tipo de dado de cada campo
Especifique no protótipo o tipo de entrada para cada campo.
Certo: Tipo especificado
anotação de especificação
Campo "Celular": tipo telefone, teclado numérico.
Errado: Tipo indefinido
anotação de especificação
Campo "Celular" sem tipo: quem desenvolve usa texto comum.
Utilize atributos HTML corretos, como type="email", type="number", ou type="date", para especificar os tipos de campos de formulário, o que melhora a usabilidade e acessibilidade, além de validar automaticamente o formato da entrada.
O tipo certo abre o teclado certo
Declare o tipo do campo para o celular exibir o teclado adequado.
Certo: E-mail e telefone tipados
<input type="email" autocomplete="email"> <input type="tel" autocomplete="tel">Teclado com @ e teclado numérico.
Errado: Tudo como texto
<input type="text" name="email"> <input type="text" name="celular">Teclado alfabético para digitar números.
Aprenda a fazer com conteúdos selecionados para você
Assegure que haja validação de máscara do campo ou que seja disponibilizado apenas os caracteres permitidos para preenchimento de cada tipo de campo (texto, numérico, data, etc).
Confira o tipo de cada campo
Liste os campos do formulário e o tipo esperado de cada um.
Checklist do requisito 5.1.1.13: formulário "Cadastro"
- tipo correto
E-mail
type="email"
- tipo correto
Celular
type="tel"
- pendente
Data de nascimento
type="date"
2 de 3 campos em conformidade, 1 pendente de revisão.
Verificar a definição correta do tipo de campo
Testar se cada campo de formulário está configurado de acordo com o tipo de dado esperado (por exemplo, e-mail, número, data) e validar se aceita apenas o tipo especificado.
Confirmar usabilidade em dispositivos móveis
Certificar-se de que o teclado correto é exibido para cada tipo de campo em dispositivos móveis (teclado numérico para números, teclado de e-mail para endereços de e-mail, etc.).
Testar a consistência na entrada de dados
Inserir diferentes tipos de dados para confirmar que campos inadequados rejeitam a entrada de informações incorretas, garantindo precisão e segurança na coleta de dados.
Validar a presença de instruções claras
Checar se os campos têm informações claras sobre o tipo de dados esperado e se essas instruções estão visíveis e compreensíveis para os usuários, incluindo aqueles que utilizam tecnologia assistiva.
Teste o teclado no celular
Toque em cada campo num dispositivo móvel e veja qual teclado aparece.
Certo: Teclado adequado
Campo E-mail → teclado com @ e .com
Campo Celular → teclado numérico
Campo Data → seletor de data
Cada campo abre o teclado do seu tipo.
Errado: Teclado genérico
Campo E-mail → teclado alfabético
Campo Celular → teclado alfabético
Campo Data → texto livre
A pessoa precisa trocar de teclado a todo momento.
Garanta que os campos de formulário sejam configurados de acordo com o formato dos dados necessários (texto, números etc).
Deixe claro o formato esperado
O rótulo e a ajuda devem combinar com o tipo do campo.
Certo: Formato explícito
rótulo e ajuda
"Celular com DDD", ex.: (85) 91234-5678
Diz o dado e o formato.
Errado: Formato implícito
rótulo e ajuda
"Contato"
Telefone? E-mail? Não se sabe.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.