Há muitos novos tipos de inputs de formulários HTML5 que tornam a criação de forms envolvente de se fazer e fácil de se usar. Os novos tipos de inputs em HTML5 oferecem validação de dados, seleção de datas, controles para selecionar cores, textos de ajuda e muito mais! Continue lendo e saiba mais sobre os novos tipos de campos de formulários de HTML5.

Vantagens dos novos tipos de input HTML5

Os benefícios dos novos tipos de campos em HTML5 são inúmeros, tanto para quem desenvolve a web, quanto para as pessoas que acessam os têm presentes e implementados corretamente. Para começar, os novos tipos de input reduzem a dependência de scripts (server-side e cliente-side) para a validação de tipos de dados comuns, como datas, endereços de e-mail e URLs – mas, de maneira alguma, as boas práticas de segurança “tradicionais” devem ser deixados de lado e/ou negligenciadas (pelo menos, por enquanto).

Para desenvolvedores web com foco em interfaces para mobile, as surpresas podem ser ainda mais agradáveis, já que muitos dos novos tipos de campos facilitam a interação de pessoas que usam dispositivos móveis como smartphones e tablets. Por exemplo, um formulário desenvolvido com HTML5 pode indicar ao agente de usuário de um dispositivo móveis para tipos de teclados específicos, dependendo do tipo de entrada que esteja sendo solicitada.

Veja um exemplo de uso de inputs de HTML4 (à esquerda) para inserir datas em um formulário web e; à direita, um input do tipo date de HTML5:

HTML5 input type date

O teclado do smartphone muda automaticamente para o selecionador nativo de datas

Veja mais exemplos:

HTML5 input type email

HTML5 novo input: email

HTML5 input type url

HTML5 novo input: url

Se você está se perguntando o que acontece quando um navegador que não suporta esses novos tipos de campo acessa uma página em que eles estão presentes, o que acontece é bem simples: o tipo específico de campo HTML5 é ignorado e, em seu lugar, é usado o tradicional text. Quer dizer, você já pode usar os novos tipos hoje que, ainda assim, sua página não vai “quebrar”, continuando sendo válida e usável até em navegadores que não dão suporte ao novos tipos de input.

Novos tipos de campos HTML5

input type Descrição Marcação HTML
date Um controle para inserir data <input type="date">
datetime Data e hora usando o formato UTC <input type="datetime">
datetime-local Data e hora segundo a hora local <input type="datetime-local">
month Mês e ano <input type="month">
time Hora do dia <input type="time">
week Permite escolher a semana e ano <input type="week">
color Permite selecionar um valor de cor (hexadecimal) <input type="color">
email Valida o valor informado usando o formato padrão de email <input type="email">
tel Valida formato de números verificando num padrão <input type="tel">
search Procura um conjunto de dados (como num elemento HTML <datalist>) <input type="search">
range Controle deslizante para escolher um valor entre 2 números <input type="range">
number Aceita somente números <input type="number">
url Aceita somente o formato de URL <input type="url">

Demo dos novos tipos de input HTML5

HTML5 novos inputs: demonstração

Clique na imagem para ver uma demonstração dos novos tipos de campo HTML5

Existe uma página com a demonstração de todos os novos campos mostrados na tabela acima: veja a página com demonstração dos novos tipos de inputs HTML5.

Essa página de demonstração só funciona em navegadores que suportam esses tipos de campo, por isso, tenha certeza de usar um bom navegador ao acessá-la.

Também é interessante visualizar essa página de demonstração em diferentes navegadores para que você possa ver como cada browser trata esses tipos de entrada, pois eles diferem drasticamente em alguns casos.

Conclusão

Esses novos tipos de campo em HTML5 ajudam a desenvolver formulários web mais centrados nas pessoas, proporcionando uma melhor experiência, agilidade no preenchimento e trazendo outros benefícios. Perceba que, apesar de ser comum enfatizar seus benefícios em dispositivos móveis, não há dúvidas de que a pessoa acessando uma página com esses tipos de campos por qualquer meio também será beneficiada.

Como visto, não há problema algum em já implementá-los imediatamente, já que não há o perigo de as páginas que os contêm não ficarem inacessíveis. Certamente o fato de os browsers mais antigos/ruins interpretarem o desconhecido como um campo do tipo texto foi uma boa estratégia e garante que o site esteja adequado a diversas situações e diversos casos e tipos de acesso.

Portanto, esteja à vontade para usar os novos tipos de campos de HTML5 em seus projetos web e, caso saiba de alguma novidade/mudança na especificação, sintaxe ou forma de uso, por favor, avise nos comentários para que o artigo esteja com informações corretas para consulta.