Formulários em HTML5 – novos tipos de input

Quem já fez validação de formulário (antes do jQuery validate) deve lembrar o inferno que é um formulário gicante para validar – tudo bem que eu era noob no javascript na época, mas com os novos tipos de inputs propostos pela W3C os formulários ficaram mais semânticos e a validação no front-end ficará ainda mais fácil.

O HTML5 está muito mais interativo e muita coisa que nós desenvolvedores já fazemos a muito tempo passou a ser documentada e oficializada pelo W3C, tenho esperança que com o tempo isso reduzirá as gambiarras da programação.

Novos tipos de input no HTML5

Input type color

Ainda não está implementado em nenhum browser, mas a idéia é facilitar os "color picker" tornando-os nativos de cada navegador.

Input type search

Um campo de texto com o diferencial de estar especificado que será de busca, poderá ser explorado por leitores de tela e dispositivos de acessibilidade para facilitar a navegação por buscas.

Input type number

Vai facilitar a validação se ela for implementada diretamente no browser, mas não traz nenhuma grande novidade.

Input type date

Outro input que pode facilitar muito a validação, a recomendação é que seja nativo do navegador um datepicker (com funcionamento semelhante ao calendário do jQuery UI).

Esta recomendação além de acabar com preocupação de validação no front-end para datas elimina a necessidade de implementação do datepicker.

Ponto negativo: acredito que os campos com datepicker, colopicker, etc. se tornatão os novos inputs do tipo "file" no sentido de impossibilidade de alteração de layout.

Espero que os browsers implementem uma forma de usar o CSS para estilizar o datepicker, caso contrário serão necessárias gambiarras e acho que o jeito vai ser manter o datepicker em JS para poder manter o layout, afinal o cliente (e o designer) não quer saber se é do browser e o visual não pode ser alterado, ele quer o checkbox, o radio, o select, o datepicker tudo conforme o layout dele – e com razão.

Input type datetime

A descrição do item anterior serve para este, com o diferencial que os dados desde são no formato datetime (além da data inclue a hora).

Input type datetime-local

Mais um campo bacana para o desenvolvimento de aplicativos web, principalmente quando você tem usuários localizados em fuso horários diversos.

Este campo é do tipo datetime mas com o diferencial que ele utiliza o fuso horário do computador do cliente e quando o form é enviado (submit) é realizado uma conversão para o fuso horário do servidor, acabando também com a necessidade de conversões de datas e horários para diferentes fusos.

Input type email

Sabendo da necessidade constante de validação de e-mail, a W3C implementou este novo type que também é recomendado que a validação seja nativa do browser, outra a menos para se preocupar.

 

Existem também novos eventos para os formulários, mas vai ficar para outro post pois aqui já tem bastante novidade. O que você achou dos novos tipos de input? Compartilhe sua opinião nos comentários!

Para saber mais sobre HTML5 leia também:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *