Há muitos novos tipos de input 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 desenvolvedores web, quanto para as pessoas que acessam e os têm presentes e implementados corretamente.
Para começar, os novos tipos de inputs HTML reduzem a dependência de scripts (server side e client 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.
Para desenvolvedores web com foco em interfaces para mobile, as vantagens podem ser ainda mais surpreendentes, 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, agora um formulário HTML pode indicar ao agente de usuário (UA) de um dispositivo móvel para tipos de teclados específicos, dependendo do tipo de entrada (input) 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:
Veja mais exemplos:
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 de input 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-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
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.
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 input 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.