Melhore formulários para usuários mobile

Celular é um lugar especial e divertido para ser um desenvolvedor web. Por um lado, praticamente todos os navegadores são novos e suportam coisas legais. Por outro, processadores, gráficos e rede são lentos, e você deve se preocupar com a duração da bateria. Além disso, a entrada, até mesmo nos melhores aparelhos, ainda é desagradável e propensa a erros.

Mas, porque os navegadores são novos, podemos fazer as coisas bem melhores.

Validação

Desde que você esteja fazendo a validação de entrada do lado do servidor de qualquer maneira (certo?), a validação do lado do cliente é só para tornar a experiência do usuário↳UX33 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025UX, IA e Front-End: quando experiência, inteligência e código se encontram para criar o futuro digitalProduto & UX · jul 2025Novidades em UX/UI para 2025: O futuro do design de experiências digitaisProduto & UX · abr 2025Ver tudo em Produto & UX → melhor. Mas, carregar um monte de JavaScript↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) → para fazer isso, vai tornar o site mais lento.

Felizmente, você pode pode deixar uma série de validações no próprio formulário e deixar o browser fazer isso por você.

Existem vários novos tipos de input em HTML5 e, para tipos comuns, há um bom suporte em navegadores móveis.

Primeiro, vamos dar uma olhada no atributo pattern. O valor deve ser uma expressão regular que corresponda aos valores permitidos. Isso funciona em text, research, tel, url, e campos email. Por exemplo:

<input type=”text” pattern=”\d+ \w+”>

Quando um usuário digita o texto que não corresponde ao padrão, o navegador irá aplicar a pseudoclasse :invalid ao elemento, ao qual você pode dar estilo com CSS da maneira que gostaria. Aqui, eu defino o background de rosa.

Há também uma pseudoclasse :valid que você pode usar.

Os navegadores aplicam a pseudoclasse imediatamente, por isso, se você quiser deixar que o usuário termine de digitar o texto antes de chamá-los, você pode usar um seletor tipo este: input:invalid:not(:focus). (Isso funcionou para mim no iOS, mas não no FirefoxOS.)

Ou, use especificidade para reiniciar a mudança:

input:invalid {
    /* Set something here. */
}

input:focus {
    /* Undo the something from above. */
} 

Existe um valor especial para os padrões de correspondência, que são apenas números correspondentes:

\d*
[0-9]*

Inserção de dados

Você pode agora ignorar o grande download do JS para validar seus formulários. Faça isso em HTML e CSS e deixe o navegador lidar com isso.

Outra parte de formulários que acaba sendo difícil em dispositivos móveis é a inserção de dados. Os teclados são pequenos e digitar muita coisa é um sofrimento. É aqui que os tipos de input se tornam realmente valiosos.

Os navegadores móveis vão mudar o seu teclado em resposta a certos tipos de input. É assim que ele é com um regular <input type=”text” />:

Aqui está como ele fica com <input type=”email” />:

A diferença é sutil, mas ambos os teclados tornaram o símbolo @ mais fácil de ser alcançado. Agora aqui está <input type=”url” />:

As barras de espaço se foram. Agora nós temos ., / e .com prontamente disponíveis.

<input type=”number” /> é um caso interessante. Nós precisamos adicionar um padrão apenas para dígitos (pattern=”\d*” or pattern=”[0-9]*”) para o OS reconhecê-lo, mas aí a gente tem isso:

Um bom e grande teclado numérico.

Alguns navegadores suportam ainda mais. Aqui estão <input type=”range” /> (obviamente esse precisa de algum feedback visual adicional) e <input type=”datetime-local” />:

 

Use-o hoje

Isso tudo funciona hoje, agora mesmo, no navegador no meu celular real.

Se um navegador não sabe o que fazer com um tipo de valor, o padrão é type = “text”, por isso ainda funciona bem – assim, convém carregar um script, nesse caso, para fazer a validação do cliente.

Se você já está usando todas as ferramentas disponíveis, faça com que os seus amigos e colegas de trabalho usem também. A pressão dos colegas é uma coisa boa. Tenho visto algumas assim por aí, mas não está em todos os lugares ainda.

***

Artigo de James Socol, traduzido pela Redação iMasters. Publicado originalmente em http://webadvent.org/2012/better-forms-for-mobile-users-by-james-socol