A HTML5 trouxe vários novos tipos de input, com eles não é mais necessário o uso de scripts para validar campos que contém números, datas, e-mais, etc., porém como nem tudo são flores nem todos os navegadores tem suporte para os novos input (principalmente navegadores antigos), mas nada impede de usá-los, pois mesmo que eles não sejam suportados por determinados navegadores eles serão atribuidos como type text, ou seja, o seu formulário continuará funcionando sem causar problemas.

Até a chegada da HTML5 existiam apenas alguns tipos de input, sendo eles:

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

A HTML5 trouxe os seguintes input:

• color
• date
• datetime
• datime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Vamos conhecer um pouco sobre esses novos campos.

Color

O input color permite selecionar uma cor .

Marcação HTML:

input type="color">

Modelo:

Date

O input date cria um campo para selecionar data com ano, mês e dia.

Marcação HTML:

input type="date">

Modelo:

Datetime

O input datetime cria um campo para inserir data e horário (hora, minuto, segundo e fração de segundo) no fuso horário UTC.

input type="datetime">

Modelo:

Datetime-local

O input datetime-local cria um campo para inserir data e horário (hora, minuto, segundo e fração de segundo) sem fuso horário.

input type="datetime-local">

Modelo:

Email

O input email cria um campo para entrada de e-mail.

input type="email" placeholder="exemplo@modelo.com.br">

Modelo:

Month

O input month cria um campo para inserir mês e anos (sem dias ou horário).

input type="month">

Modelo:

Number

O input number cria um campo para inserir números, que podem ser limitados usando as propriedades max e min.

input type="number" min="1" max="9">

Modelo:

Range

O input range cria um campo para receber um valor a partir de uma variação de números, onde o número exato não é importante.

input type="range" min="1" max="5">

Modelo:

Search

O input search cria um campo parecido com o input text, mas é um campo especifico para buscas, as quebras de linha são altomaticamente removidas nesse campo.

input type="search" placeholder="Digite sua busca aqui">

Modelo:

Tel

O input tel cria um campo para inserir números de telefone, nele as quebras de linha são altomaticamente removidas.

input type="tel" placeholder="(00) 99999-9999">

Modelo:

Time

O input time cria um campo para inserir horas (horas e minutos), sem fuso horário.

input type="time">

Modelo:

Url

O input url cria um campo para inserir endereços URL.

input type="url" placeholder="http://www.exemplo.com.br">

Modelo:

Week

O input week cria um campo para inserir semana e ano, sem dia, mês ou horário.

input type="week">

Modelo:

Esses foram os input types que vieram com a HTML5, infelizmente, como falado anteriormente, alguns navegadores ainda não suportam alguns desses input types, mas ainda assim eles falicitam muito a vida dos desenvolvedores e até mesmo a dos usuários (nos navegadores que tem suporte), principalmente aqueles que acessarem os formulários pelo smartphone, pois quando os input type são reconhecidos o teclado do smartphone se adapta ao tipo de input aparecendo um @ nos campos de email, ou o teclado numérico para campos como number ou tel, por exemplo.