Use o Input type apropriado para cada tipo de dado

Blog fellyph cintra - input types para formulários

Com o HTML5 foram introduzidos as novas categorias de input type, isso representou um ganho enorme para a experiência de usuários mobile que utilizam formulários na sua aplicação e site, utilizar o input type correto é muito importante para acessibilidade e experiência do usuário.

Eles podem melhorar a experiência do usuário especialmente quando o usuário cadastra informações em dispositivos móveis. Como? Quando você escolhe um tipo de input o sistema operacional do celular irá tentar exibir o melhor teclado para o campo.

Exemplo do input type date no iOS

O que são input type?

O HTML é formado por tags, elementos que possuem um significado para o navegador. As tags são usadas para marcar o conteúdo da página, como títulos, parágrafos e imagens e até itens para entrada de informação.

Com o avanço da web, cada vezes mais a internet passou a ser um ambiente de troca de informações, e os campos de entrada de dados passam a ter uma participação importante nisso.

Anteriormente tinhas tipos simples como texto, checkbox, radio-button, mas essas entradas não eram suficientes para web moderna e os novos dispositivos com formatos e telas diferentes. Dai então surgiu uma série de novos campos de entrada de informações como data, cores entre outros valores.

Cada tag possui um atributo, sendo uma característica adicional da tag. Por exemplo, a tag img, possui o atributo src, que indica qual imagem deve ser exibida na página. O mesmo vale para campos de formulários que podem possuir uma propriedade type, id, name, value, e outras informações mais específicas ao tipo do campo de entrada(input).

Neste artigo aprenderemos sobre os diferentes valores do atributo type nas tags input introduzidos no HTML5. Para os testes eu vou utilizar diferentes browser de acordo com o seu suporte.

input type date

Este campo é preparado para receber uma data, será exibido para o usuário um calendário para cadastrar a informação. O resultado da utilização do input é o seguinte:

exemplo do input type date no safari iOS
<label>Input tipo date</label> <input type="date" name="data-teste" />
Code language: HTML, XML (xml)

datatime-local

Campo de entrada de informações de data e hora em simultâneo, a sua exibição irá depender do sistema operacional a seguir eu irei exibir dois exemplos no iOS e o chrome desktop:

<input type="datetime-local" name="data-teste" />
Code language: HTML, XML (xml)
A exibição de campo datatime-local no iOS
Exibição do input type datatime-local no chrome desktop

time

Este campo é utilizado para realizar cadastro de hora. Da mesma forma do date ele irá habilitar um interface adaptada para cadastro da informação.

<input type=”time” id=”hora”>
Code language: HTML, XML (xml)

month

Campo é similar ao date, mas resgata apenas a entrada de mês e ano sem a seleção de data, no iOS o scroll de meses será exibido.

input type month para selecionar meses no iOS
<input type="month" name="mes" id="mes">
Code language: HTML, XML (xml)

number

Input para cadastro específico de números, para o usuário mobile ele exibe apenas o teclado numérico como a imagem a seguir:

Input type number no iOS
<input type="number" name="num" id="num">
Code language: HTML, XML (xml)

range

Cria um elemento slide para receber um valor dentro de um intervalo especificado pelas propriedades min e max.

Input type range no chrome desktop
<input type=”range” name=”media” id=”media” min="0" max="100">
Code language: HTML, XML (xml)

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal. Como podemos ver abaixo na plataforma iOS temos a opção de escolher diferentes tipos de ferramentas para seleção de cores.

input type color – campo de entrada de cores no iOS
<input type="color" name="color-teste" />
Code language: HTML, XML (xml)

url

Este elemento cria uma validação para URL em invoca um teclado específico para o cadastro da informação.

<input type="url" name="url-teste" />
Code language: HTML, XML (xml)
input type URL em ação no iOS

email

Assim como o type url tem um teclado especial para email com as letras e o “@” e “.” disponíveis no teclado, esse item também realiza uma validação esperando um texto com @. Caso o usuário cadastrará uma informação inválida teremos um alerta para usuário, mas nesse caso fica a cargo do desenvolvedor do formulário definir o que irá acontecer após esse alerta.

Campo de entrada de email conta com uma validação nativa do browser
<input type="email" name="email-teste" />
Code language: HTML, XML (xml)

tel

Input irá exibir apenas números, em alguns sistemas operacionais o teclado do number tem um comportamento similar, mas no caso do iOS o number vem com mais caracteres disponíveis, mas com o teclado do tel vem apenas o discador, como na imagem a seguir:

campo para entrada de dados de telefone

O campo tel pode ser usado para outros cenários onde apenas a entrada de números são relevantes.

<input type="tel" name="tel-teste" />
Code language: HTML, XML (xml)

search

Neste campo pode ter um comportamento totalmente diferente entra os sistemas operacionais no Chrome desktop é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Já no iOS temos a exibição de uma lupa. Como o nome sugere este Input é utilizado em campos de busca.

<input type="search" id="busca">
Code language: HTML, XML (xml)
Input search no Chrome Desktop
Input type search no iOS

Recentemente um comitê chamado interop 2022, com os principais navegadores da internet reuniram-se para tentar normalizar alguns pontos entre os navegadores e um dos pontos discutidos foi a questão da padronização os campos de formulários.

O código dos exemplos confere aqui, ou confira mais conteúdo relacionado a HTML5 aqui:

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.