Os atributos do elemento HTML podem melhorar seus controles de formulário e <form>
.
Ajudar os usuários a preencher controles de formulários
Para facilitar o preenchimento de formulários,
use um atributo type
adequado nos elementos <input>
.
Os navegadores exibem uma interface do usuário adequada para o type
,
como um seletor de data para uma <input>
do tipo date
.
Os navegadores em dispositivos móveis mostram um teclado na tela adaptado,
como um teclado com o número de telefone do type="tel"
.
Alguns tipos de <input>
também mudam as regras de validação de um elemento quando o formulário é enviado.
<input type="url">
, por exemplo, só é válido se não estiver vazio e o valor for um URL.
Garantir que os usuários insiram dados
Existem atributos diferentes para fornecer um teclado na tela apropriado em dispositivos sensíveis ao toque.
A primeira opção é usar o atributo type
, conforme mencionado acima.
Outra opção é o atributo inputmode
com suporte no
Android e no iOS.
Ao contrário do atributo type
, o atributo inputmode
muda apenas o teclado na tela
fornecido, não o comportamento do elemento em si. O uso de inputmode
é uma boa opção se você quer
manter a interface do usuário e as regras de validação padrão de um <input>
, mas ainda quer um
teclado na tela otimizado.
É possível mudar a tecla Enter
nos teclados na tela com o atributo enterkeyhint
.
Por exemplo, enterkeyhint="next"
ou enterkeyhint="done"
muda o rótulo do botão para um ícone apropriado.
Isso ajuda a esclarecer para os usuários o que acontece quando eles enviam o formulário atual.
Garantir que os usuários possam enviar um formulário
Digamos que você preencha uma <form>
e clique no botão Submit (Enviar), mas nada acontecerá.
O problema pode ser que o botão tenha sido desativado com o atributo disabled
.
É um padrão comum desativar o botão Enviar até que o formulário seja válido.
Teoricamente, isso parece sensato, mas você não deve desativar o botão Enviar enquanto aguarda uma entrada completa e válida do usuário. Destaque os dados inválidos quando eles forem inseridos, e os campos problemáticos para o usuário quando ele enviar o formulário.
No entanto, você pode desativar o botão Enviar quando o formulário for enviado, mas ainda não tiver sido processado. Saiba mais sobre botões desativados.
Ajudar os usuários mostrando os dados que eles digitaram anteriormente
Imagine que você tenha um formulário de finalização de compra com várias etapas.
Como garantir que os valores inseridos anteriormente ainda estejam lá quando o usuário retornar a uma etapa anterior?
Use o atributo value
para mostrar os valores já preenchidos.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
Há várias maneiras de recuperar o valor de um controle de formulário em JavaScript.
É possível usar a propriedade value
ou acessar o valor com getAttribute('value')
.
Há uma grande diferença:
a propriedade value
sempre retorna o valor atual,
e o uso de getAttribute()
sempre retorna o valor inicial.
Faça um teste!
Mude o texto do campo de nome e observe o console.
Observe como a propriedade value
retorna o texto visível no momento,
enquanto getAttribute('value')
sempre retorna o valor inicial.
Saiba mais sobre a diferença entre atributos e propriedades DOM.
Para elementos <input>
do tipo checkbox
ou radio
, use o atributo checked
.
Adicione-o se o usuário tiver selecionado uma opção e remova-o caso contrário.
Garantir que os usuários entendam o formato esperado
O valor do atributo placeholder
é uma dica sobre o tipo de informação esperada.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Isso pode confundir os usuários, pois pode parecer ilógico o motivo pelo qual um controle de formulário parece já estar preenchido. Além disso, adicionar um marcador pode dificultar a visualização de quais campos do formulário ainda precisam ser preenchidos. Além disso, o estilo padrão do texto do espaço reservado pode ser difícil de ler.
Em geral, tenha cuidado ao usar o atributo placeholder
e nunca use o placeholder
para explicar um controle de formulário.
Em vez disso, use o elemento <label>
.
Saiba mais sobre
por que evitar o atributo placeholder
.
Uma maneira melhor de oferecer aos usuários uma dica sobre o tipo de informação esperada é usar um elemento HTML extra abaixo do controle do formulário para adicionar uma explicação ou exemplo.
Verifique se os controles do formulário estão prontos para validação
Há vários atributos HTML disponíveis para ativar a validação integrada.
Use o atributo required
para impedir o envio de campos vazios.
É possível usar o atributo type
para aplicar outras validações.
Por exemplo, o valor de uma <input>
obrigatória de type="url"
precisa ser um URL.
Para garantir que um usuário digite um número mínimo de caracteres,
use o atributo minlength
.
Para proibir qualquer valor com mais do que o número máximo de caracteres,
use o atributo maxlength
.
Para tipos de entrada numérica, como <input type="number">
, use os atributos min
e max
.
Saiba mais sobre validação: Ajude os usuários a inserir os dados certos nos formulários.
Teste seu conhecimento
Teste seus conhecimentos sobre atributos de formulário
Qual atributo pode ser usado para mudar o rótulo da tecla Enter
em um teclado na tela?
enterkey
enterkeyhint
enterkeytext
enterkeylabel
Qual é a diferença entre a propriedade value
e o getAttribute('value')
?
value
retorna o valor atual, e getAttribute('value')
retorna o valor inicial.value
retorna o valor inicial, e getAttribute('value')
retorna o valor atual.value
retorna a chave e o valor, e getAttribute('value')
retorna apenas o valor.