Conhecendo o inputmode
Tags: html, ux, frontend, webdev
Published: 2022-07-12 00:28:13

Uma das coisas que mais me incomoda quando estou preenchendo algum formulário é quando o teclado não condiz com a informação que preciso preencher. 

Se o campo só vai aceitar números, é muito chato ter que ficar mudando entre os teclados.

Seria tão legal se houvesse uma forma de falar pro dispositivo como o teclado deveria aparecer, né?

**O legal é que existe!**

O `inputmode` é um atributo padrão do HTML que já tem [suporte em praticamente todos](https://caniuse.com/input-inputmode) os navegadores. Sua função é basicamente dizer pro dispositivo qual tipo de teclado deve ser exibido.

---

Pode ser usado com um dos seguintes valores:

### none

![Tag input utilizando o inputmode com valor: none](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21zkzh87jnsqvjkcpkgy.png)

O `none` é a forma que temos para desativar o teclado. Geralmente é utilizado quando a entrada de dados vem de algum dispositivo externo (como um leitor de código de barras), ou quando um teclado customizado é criado.   

---

### text

![Tag input utilizando o inputmode com valor: text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/543si50yzqghskmih32t.png)

O `text` é o valor padrão. Com ele, será carregado o teclado padrão do dispositivo, sem muitas surpresas aqui.

![Teclado de texto do iOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aot3ymdb1zy9aohevata.jpeg)

---

### numeric

![Tag input utilizando o inputmode com valor: numeric](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov5axxaee1yyvvvy6a6k.png)

Com o `numeric` teremos o teclado numérico básico, com apenas dígitos de 0 a 9. Também sem nada demais aqui.

![Teclado numérico do iOS.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ephhbyxf1qe8md66wiut.jpeg)

---

### decimal

![Tag input utilizando o inputmode com valor: decimal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e3loz8m79to38mlvl7i.png)

O `decimal` é bem parecido com o `numeric`. A diferença aqui é a presença do separador de decimais, que geralmente será _ponto_ ou _vírgula_.

![Teclado numérico do iOS com vírgula.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzxeep9rr0iekjrnvtje.jpeg)

---

### tel

![Tag input utilizando o inputmode com valor: tel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7on965aohdp3qzay0k9z.png)

O `tel` é mais um da família do `numeric`. A diferença nesse é que teremos alguns caracteres adicionais, como **+**, **\*** e **#**. 

Uma dica aqui é substituir o uso desse _inputmode_ pelo `type="tel"`, que será mais fácil de validar o que foi inserido.

![Teclado numérico do iOS com atalhos de telefone.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/842mkte1z7h8yjo9xzqk.jpeg)

---

### search

![Tag input utilizando o inputmode com valor: search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbns4ozhb6kr6hs7jx8h.png)

O `search` é beeem parecido com o `text` comum, mas ele costuma trazer um atalho para o disparo da busca. Também pode ser substituído pelo `type` com o mesmo valor.

![Teclado de texto do iOS com atalho para disparo da busca.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpejvwb2rnvxvnq5ojom.jpeg)

---

### email

![Tag input utilizando o inputmode com valor: email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqce4itqw9fbz6xd7aun.png)

Seguindo a linha do anterior, o `email` também é um teclado de texto com alguns atalhos. Nesse caso temos o **@** e ponto.

![Teclado de texto do iOS com caracteres úteis para e-mail, como @ e ponto.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cu2o0e53xs090q32g7m.jpeg)

---

### url

![Tag input utilizando o inputmode com valor: url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a8tt5qy61iw8npe5c7k.png)

Fechando a nossa lista, temos o `url`. Nesse teclado, a tecla de espaço geralmente é trocada por outras mais úteis para digitarmos links, como: ponto, barra e _.com_.

![Teclado de texto do iOS com teclas úteis para urls, como ponto, barra e “.com”.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic1m8i9lekmtf21w80he.jpeg)

---


Os `inputmodes` melhoram bastante a experiência do usuário, e acabam até reduzindo a possibilidade de erros ao preencher algum formulário. Mas lembre-se: **o inputmode não faz validação de dados**. Alie o `inputmode` a um _type_ adequado e a alguma outra forma de validação no código, e seus formulários ficarão cada vez melhores! 😃

---
---

## Veja na prática!
Quer ver cada um dos possíveis `inputmode` funcionando? 
Abra o [inputmodes.com](inputmodes.com) no seu celular, e vá tocando em cada um dos inputs disponíveis 😉

---

## Quer ver mais a fundo sobre o inputmode?
Então dá uma olhada [nessa página da MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode), ou veja diretamente a [especificação](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode)!