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
- Color: Permite ao usuário selecionar uma cor.
- Date: Cria um campo para que o usuário possa selecionar uma data.
- Datetime: Cria dois campos uma para data e outro da hora (com fuso horário), permitindo assim o usuário selecionar os dois juntos.
- Month: Serve para selecionar um mês e um ano.
- DateTime-Local: Permite ao usuário selecionar uma hora e data (sem fuso).
- E-mail: É um campo de entrada onde deve ser inserido um endereço de e-mail.
- Number: É utilizado para campos que devem apenas conter números, podendo ter seus limites (maior e menor valor aceitos) definidos.
- Range: É utilizado para campos de entrada que devem receber um valor a partir de uma variação de números.
- Search: É usado para fazer pesquisas, mas na pratica se comporta como um campo de texto comum.
- Tel: Serve para números de telefone, mas até o momento nenhum dos principais navegadores oferece suporte a esse tipo.
- Time: Permite ao usuário selecionar hora.
- Url: É usado para campos de entrada onde você recebee um endereço URL, o valor do campo é validado automaticamente quando o formulário é enviado.
- Week: Para definir uma semana e um ano.
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>
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>
Notamos que ao clicar para selecionarmos a cor, abre a uma caixa para a seleção da cor.
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.
