Melhorando a UX de digitação no mobile
Tags: ux, html, braziliandevs, webdev
Published: 2022-05-24 19:12:00

## Introdução
Quando construímos formulários com HTML, é importante se preocupar com o fluxo de preenchimento. Isso implica em conhecer, além da linguagem, também os recursos oferecidos pelos navegadores e dispositivos que serão usados pelo seu usuário.

Um bom uso da linguagem HTML somado ao conhecimento das plataformas que a executam, torna a experiência de preenchimento de um formulário muito mais produtiva e pode aumentar os índices de conversão.

## Teclado nos dispositivos móveis

{% spoiler **Está com pressa?** %}
```html
<input inputmode="numeric" type="text" />
```
{% endspoiler %}

Sabe quando você está preenchendo um formulário pelo celular e ao chegar a um campo cujo o valor será exclusivamente numérico (ex.: telefone, cpf, cep, cartão de crédito...) mas o teclado invocado é aquele tradicional alfanumérico?

![Print do teclado alfanumérico no Android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5mc14mgwj0kd02a9pn9.jpeg)

Temos de convir que a experiência é horrível. Nós, como desenvolvedores certamente devemos evitar essa situação. Mas como?

A primeira coisa que normalmente pensamos, é no atributo **type** da tag **input**, ele pode ser definido de forma a dar uma melhor experiência tanto de validação, quanto de usabilidade. 
Quando definimos o atributo **type** como **'numeric'**, o teclado apresentado ao usuário será o numérico, o que já eleva muito a experiência de preenchimento.

![Print do teclado numérico no Android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmb09dvd4m91jw1cjqbr.jpeg)

Pronto! Agora tudo está perfeito né? Bem, nem tudo. O problema é que quando alteramos o type do input o teclado que surge muda, [mas o tipo do dado colhido muda também](). Existem validações específicas que o navegador faz para cada type, antão alterar de text para number não é apenas uma alteração de usabilidade, isso tem um efeito também na validação dos inputs.

E ai temos a questão semântica dos dados. _Nem tudo que é composto por números, deve ser tratado como número_. Se você não precisa realizar cálculos, não tem por que armazenar um dado como numérico. Na verdade, tratando como string, você evita problemas como zero-trailing, por exemplo.
O CEP é um caso de informação que sofre com esse problema, se você coloca um type=number para colher o cep, não vai conseguir preencher um zero à esquerda, 'proibindo' todos os ceps da cidade de São Paulo.
Outro exemplo, o número de um cartão de crédito é composto exclusivamente por números (🤯), mas você nunca vai precisar realizar alguma operação matemática com ele.

Por fim, o input numeric tem um visual específico, que pode mais atrapalhar do que ajudar. Ele traz botões que permitem incrementar ou decrementar seu valor, e isso não é o que esperamos em um campo de CEP ou do cartão de crédito, por exemplo.

Mas então como resolvemos isso? Deixamos a usabilidade de lado e mantemos a semântica dos tipos de dados? Ou ignoramos a semântica e preservamos a usabilidade?

## Conheça o inputmode
Aqui está o **pulo do gato**. Com o atributo **inputmode** dos inputs, você consegue pedir para o navegador que abra um teclado específico, que atenda melhor sua necessidade. Ou até mesmo para não abrir nenhum teclado, caso sua aplicação implemente um customizado.

```html
<input inputmode="numeric" type="text" />
```

Note que toda a problemática desenvolvida anteriormente, nasce da confusão entre o tipo dos dados e o formato deles. E essa confusão não é culpa minha nem sua, na verdade isso é um ótimo exemplo, de como precisamos conhecer tanto a linguagem, quanto as plataformas que a executam. Esse problema não existiria se não existissem navegadores em dispositivos móveis.
Se você usa um computador com um teclado físico para preencher um formulário, o **inputmode** não tem nenhum significado. Você não precisa dele! Mas o cenário muda quando olhamos para dispositivos móveis com seus teclados virtuais.

Os valores possíveis para o inputmode são:

`none`
Não abre o teclado padrão do sistema operacional.

`text` (padrão)
Abre o teclado padrão, baseado nas configurações do usuário.

`decimal`
Abre o teclado numérico com os sepradores de decimal do idioma do usuário (normalmente o ponto ou a vírgula). Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

`numeric`
Na maioria dos casos, vai abrir o mesmo teclado do decimal, mas pode ser que não traga a tecla de separador decimal. Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

`tel`
Abre um teclado numérico (0-9) e pelo menos mais dois botões, o asterisco (\*) e a cerquilha (#).

`search`
Um teclado virtualmente otimizado para buscas. Em muitos casos, será identico ao teclaod text (padrão do sistema), mas podes ser que o navegador use essa informação para alterar o 'submit key' (falamos sobre isso em outro artigo). instead.

`email`
Abre um teclado textual, mas com teclas para @ e . mais acessíveis (sem que o usuário tenha que procurar nos símbolos).

`url`
Abre um teclado textual, com com teclas comuns em urls, como barra, ponto, dois pontos entre outras possibilidades.

## Conclusão

Pensar nos detalhes durante a criação de uma aplicação pode ser o diferencial para o seu sucesso. Aqui estamos falando de um atributo que não tem efeitos colaterais, você adiciona ela ao seu input e ele não muda estilo nem validação, mas trás um benefício gigante para quem usa seu site.


REFERÊNCIAS:
[inputmode - HTML: HyperText Markup Language | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
[HTML Standard, Edition for Web Developers (whatwg.org)](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode)