Como construir ótimos controles de formulário HTML

Hoje vou mostrar a você tudo o que deve ser considerado ao criar a entrada HTML perfeita. Apesar de sua natureza aparentemente simples, na verdade há muita coisa envolvida.

Como fazer o controle

Bem, precisamos começar de algum lugar. Pode muito bem começar com o próprio controle.

O HTML oferece três controles de formulário diferentes para escolher: <input>, <textarea> e <select>. Hoje, usaremos <input>, mas as mesmas regras se aplicarão aos outros.

<input />

Como fazer o <input>trabalho

As entradas são geralmente usadas para capturar dados do usuário. Para fazer isso, eles devem ser colocados dentro de um  <form>  elemento, mas isso não é suficiente. Quando o formulário for enviado, ele não saberá como rotular os dados da entrada.

Para que um formulário inclua os dados de uma entrada quando o formulário é enviado, a entrada precisa de um name atributo. Você não precisa de gerenciamento de estado ou vinculação de dados. Apenas um name.

<input name="data" />

Como tornar a entrada acessível

Agora que deixamos os robôs felizes, é hora de focar nos humanos.

Cada entrada também precisa de um rótulo, tanto para clareza quanto para acessibilidade. Existem algumas opções:

• Adicione um <label> elemento com um for atributo e atribua-o à entrada id (rótulo explícito).
• Envolva a entrada com um <label>elemento (rótulo implícito).
• Adicione um aria-label atributo à entrada.
• Adicione um aria-labeledby atributo à entrada e atribua-o ao idde outro elemento.

De todas essas opções, a mais confiável é um rótulo explícito, pois funciona na maioria dos navegadores, tecnologias assistivas e interfaces de controle de voz. Rótulos implícitos não funcionam no Dragon Speech Recognition. Os atributos ARIA são meticulosos.

Os atributos placeholder e title não são rótulos apropriados.

Eu recomendo não envolver tudo em uma <label>tag porque:

1. É provável que inclua mais conteúdo do que seria considerado pelo rótulo. Isso resulta em uma experiência ruim para usuários de leitores de tela.
2. É comum adicionar estilos ao elemento wrapper da entrada. Esses estilos podem entrar em conflito com o comportamento padrão de um arquivo <label>.

Em geral, prefiro usar a <div> para isolar o controle.

<div>
    <label for="input-id">Label</input>
    <input id="input-id" name="data" />
</div>

Se você quiser uma entrada que não mostre o rótulo, não remova o rótulo do HTML. Em vez disso, oculte-o com CSS ou use uma opção menos confiável. Mantenha o rótulo na marcação e oculte-o visualmente com um classdesses estilos. Esses estilos o mantêm acessível à tecnologia assistiva, além de removê-lo visualmente:

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
}

Observe que geralmente ainda é recomendável incluir um rótulo visível para evitar qualquer confusão. A placeholdernão deve servir como um rótulo.

Como escolher um tipo (ou não)

Além das diferentes tags listadas acima, você pode alterar o comportamento do controle definindo um typeatributo de entrada. Por exemplo, se você quiser aceitar o e-mail de um usuário, poderá definir o typeatributo como “email”.

Os tipos de entrada podem alterar o comportamento ou a aparência da interface do usuário. Aqui estão alguns exemplos:

• O tipo “número” altera o comportamento impedindo entradas de valores não numéricos.
• O tipo “color” altera a interface do usuário adicionando um botão que abre um seletor de cores.
• O tipo “data” melhora a experiência de entrada de dados oferecendo um seletor de data.
• O tipo “email” reforça a validação de restrição integrada no envio do formulário.

No entanto, alguns tipos de entrada podem ser falsos amigos .

Considere uma entrada que solicita um código postal dos EUA. Somente entradas numéricas são válidas, portanto, pode fazer sentido usar um “número” type. No entanto, um problema com a entrada “número” é que ela adiciona um recurso de evento de rolagem de forma que um usuário possa rolar a entrada para cima para incrementar o valor ou para baixo para decrementá-lo.

Para uma entrada de código postal, é possível que um usuário clique na entrada, insira seu código postal e tente rolar a página para baixo. Isso diminuiria o valor inserido e é muito fácil para o usuário perder essa alteração. Como resultado, o número digitado pode estar errado.

Nesse caso, pode ser melhor evitar typecompletamente o atributo e usar um pattern como [0-9]*se você deseja limitar a entrada apenas a valores numéricos. Na verdade, o tipo “number” costuma ser mais problemático do que vale a pena.

Seja descritivo

Já que abordamos brevemente a validação de restrições, é um bom momento para mencionar as descrições.

Embora o HTML tenha atributos de validação integrados e existam várias bibliotecas de validação de JavaScript mais robustas, há outra abordagem eficaz para fazer com que os usuários preencham os dados adequados que podem ser menos irritantes.

Diga a eles exatamente o que você quer.

Alguns controles de formulário como “nome” ou “email” podem ser óbvios, mas para aqueles que não são, forneça uma descrição clara do que você precisa.

Por exemplo, se você estiver solicitando aos usuários que criem uma nova senha, diga a eles quais são os requisitos antes de tentarem enviar o formulário. E não se esqueça dos usuários de tecnologia assistiva.

Podemos associar uma entrada a uma descrição por meio da proximidade visual, bem como usando o aria-describedby atributo.

<div>
    <label for="password">Password</input>
    <input id="password" name="password" type="password" aria-describedby="password-requirements" />
    <p id="password-requirements">Please create a new password. Must contain at least 8 characters, one uppercase letter, one lowercase letter, and one special character.</p>
</div>

As descrições também são um local eficaz para colocar mensagens de feedback de validação.

Seja flexível

Ao criar entradas, muitas vezes é tentador adicionar restrições para os valores aceitáveis ​​para garantir que o usuário envie apenas dados bons. Mas ser muito rigoroso pode levar a uma experiência de usuário ruim.

Por exemplo, se você pedir ao usuário para inserir um número de telefone, considere que existem vários formatos diferentes aceitáveis:

• 8008675309
• 800 867 5309
• 800-867-5309
• 800.867.5309
• (800) 867-5309
• +1 (800) 867-5309
• 001 800 867 5309

Todos os itens acima representam o mesmo número de telefone. Idealmente, um usuário poderia inserir qualquer um desses formatos e ainda enviar o formulário sem problemas.

Se você deseja que sua entrada envie apenas caracteres numéricos, é possível permitir que o usuário digite em qualquer formato que desejar. Em seguida, você pode usar JavaScript para adicionar um manipulador de eventos ao blurevento e remover quaisquer caracteres indesejados (espaço, hífen, ponto e assim por diante) do valor da entrada. Isso deixaria apenas os números.

Tornar mais fácil

Se você já preencheu um formulário usando um dispositivo móvel, deve ter notado que o teclado do seu telefone parece diferente em diferentes entradas.

Para uma entrada de texto básica, você vê o teclado padrão, para entradas de e-mail, você pode ver o símbolo @ colocado de forma mais conveniente e, para entradas numéricas, você pode ver o teclado substituído por um teclado numérico.

Em muitos casos, o navegador escolherá um teclado mais apropriado para mostrar aos usuários se a entrada typeestiver definida. Mas, como vimos acima, geralmente é melhor usar apenas uma entrada de texto básica.

Ainda podemos oferecer uma experiência de usuário mais agradável para usuários móveis, solicitando ao navegador que mostre teclados específicos, apesar de faltar um typeatributo na entrada. Podemos fazer isso com o inputmode atributo que aceita oito opções diferentes.

• texto (valor padrão)
• Nenhum
• decimal
• numérico
• tel
• procurar
• o email
• url