Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação.

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:

IMG_00000575

<input type=”date” id=”data”>

time

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

IMG_00000576

<input type=”time” id=”hora”>

month

Campo é similar ao date mas resgata apenas a entrada de mês e ano sem o time zone.

IMG_00000572

<input type="month" name="mes" id="mes">

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_number

<input type="number" name="num" id="num">

range

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

range

<input type=”range” name=”media” id=”media” min="0" max="100">

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal.

IMG_00000571

<input name="cor" id="cor" type="color" >

url

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

<input name="mail" id="mail" type="email">

email

Assim como o type url esse item realiza uma validação esperando uma info com @. Caso o usuário tente cadastrar uma informação inválida teremos o seguinte alerta:

IMG_00000582

<input name="mail" id="mail" type="email">

tel

Input Similar ao number com apenas números, mas com o teclado semelhante ao discador:

IMG_00000581

<input name="phone" id="phone" type="tel">

search

Neste campo é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Como o nome sugere este Input é utilizado em campos de busca.

search

<input type="search" id="busca">

Esse itens além de ter o suporte no Blackberry 10 também tem suporte nas maiorias dos browsers e muito coisa nova esta vindo por ai. Além de novos inputs temos novas propriedades que será o tema do próximo post sobre input.

O código dos exemplos confere aqui :

https://github.com/fellyph/Tutorial-bbUI/tree/master/tutorial-input/www

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.