Atributos do formulário em detalhes

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

Recursos

• <input> atributos HTML
• Atributos HTML globais