Novos tipos de input da HTML 5

Veja neste artigo os novos input types da HTML5, treze novos valores possíveis para o atributo type dos inputs que permitem criar tipos de campo que antes só eram obtidos com o auxílio de JavaScript, como calendários e campos para seleção de cor

Introdução

Neste artigo vamos tratar sobre HTM5 e os novos input types que surgiram com ela (antes tarde do que nunca). Agora assim não precisamos mais criar validações em JavaScript para campos numéricos, e-mails, datas, entre outros que estaremos vendo ao decorrer do artigo.

Foram adicionados mais 13 novos tipos de inputs à HTML5, porém como sempre temos problemas de compatibilidade, nem todos os navegadores suportam todos os novos input types. Entretanto podemos começar a usá-los, se por acaso eles não forem suportados, irão se comportar como um campo de texto comum.

Ao todo temos 23 valores possíveis para o atributo type dos inputs, incluindo os que já existiam e mais os treze novos que surgiram com o HTML5. Segue abaixo uma tabela com os tipos de input novos e com os navegadores que tem suporte a cada um.

Input Type IE Firefox Chrome Safari Opera
Input type = Color Não Não Sim Não Sim
Input type = Date Não Não Sim Sim Sim
Input type = Datetime Não Não Não Sim Sim
Input type = Month Não Não Sim Sim Sim
Input type = DateTime-Local Não Não Não Sim Sim
Input type = E-mail Não Não Sim Não Sim
Input type = Number Não Não Sim Sim Sim
Input type = Range Não Não Sim Sim Sim
Input type = Search Não Não Sim Sim Não
Input type = Tel Não Não Não Não Não
Input type = Time Não Não Sim Sim Sim
Input type = Url Não Sim Sim Não Sim
Input type = week Não Não Sim Sim Sim

Descrições dos novos input types

Vamos agora criar alguns exemplos referentes a esses input types novos, apesar de que seu modo de criação é igual aos inputs que já existiam, pois basta usarmos a tag input e determinarmos o type que ela vai possuir. Não podemos esquecer que dependendo do navegador que utilizarmos alguns type não serão reconhecidos, consulte a tabela de suporte logo no início do artigo para ver se certo navegador tem suporte ao type que deseja usar.

Pondo em prática

Date: Calendário é uma coisa muito comum de encontrarmos em formulários de sites e aplicativos, por exemplo, ao realizar uma reserva para um vôo. Existem muitas bibliotecas JavaScript que fazem a criação desses calendários, mas agora com a HTML5 podemos estar criando isso de uma forma muito mais simples e rápida.

A criação desses calendários é idêntica à forma que é usada com as bibliotecas JavaScript, ao clicarmos no campo onde vai a data, o calendário será exibido e assim podemos navegar pelos meses e anos.

Porém os navegadores Chrome, Opera e Safari exibem esse campo de uma maneira diferente, potencialmente levando a inconsistência na experiência tida pelo usuário.

Vamos ver agora como criar e como esse calendário se comporta no Chrome e no Opera.

<html> <head> <meta charset="UTF-8"> <title>Exemplo Imput type = date.</title> </head> <body> <input type="date"> </body> </html>
Listagem 1. Criando input do tipo Date
Figura 1: Input do tipo Date no Google Chrome
Figura 2: Input do tipo Date no Opera

Color: do mesmo modo como o calendário, quando queríamos criar uma opção para escolha de cores nos nosso projetos web, precisávamos estar utilizando bibliotecas JavaScript. Agora não temos mais necessidade disso, podemos criar diretamente através da HTML utilizando cores padrão do navegador. Mas o seu modo de visualização muda de browser para browser, vejamos como criar e a diferença entre a visualização no Chrome e no Opera.

<html> <head> <meta charset="UTF-8"> <title>Exemplo Imput type = date.</title> </head> <body> <input type="date"> </body> </html>
Listagem 2. Criando input do tipo Color
Figura 3: Descrição

Notamos que ao clicar para selecionarmos a cor, abre a uma caixa para a seleção da cor.

Figura 4: Input do tipo color no Google Chrome

Vejamos que no Opera o modo de exibição já é feito como se fosse um menu suspenso com as opções de cores e para abrir aquela janela com mais cores, como no Chrome, precisamos clicar em “Outras...”.

Acabamos de testar dois dos novos recursos disponíveis com a HTML5, podemos assim estar utilizando de nossa criatividade, pondo os outros elementos à prova e vendo que muitas das coisas que apenas podíamos fazer com bibliotecas JavaScripts agora podemos fazer com facilidade usando os novos complementos da HTML5. Dessa forma até as criações de formulários se tornaram mais rápidos.

Conclusão

Com a HTML5 a vida dos desenvolvedores provavelmente ficou mais simples através das introduções dos novos tipos de inputs. Porém, como todos os outros recursos da HTML5, o suporte ainda é muito limitado pela parte dos browsers. Por isso devemos ter cautelas ao usar esse novos recursos.

Mas espero que com esse artigo tenhamos conseguido ter uma visão melhor sobre HTML5. Muito obrigado a todos os leitores por dedicarem um pouco do seu tempo a lendo esse artigo, espero que tenha sido do agrado de todos.

Dessa forma encerro mais este artigo, deixando um abraço a todos e até a próxima publicação, em breve.

Artigos relacionados