HTML5 Input Types - Dica

Veja nessa dica os novos input types em HTML5. A nova versão do HTML trouxe novas opções de inputs para o desenvolvedor utilizar em seus projetos.

Olá pessoal, na dica de hoje iremos falar sobre mais uma novidade do HTML5, são as novas opções de Input Types, ou seja, agora caso o desenvolvedor queira proporcionar ao seu usuário uma experiência mais agradável ao preencher formulários, etc, ele pode incluir diversos novos inputs, são eles:

Abaixo podemos ver alguns exemplos de como usá-los:

<!DOCTYPE html> <html> <head> <title>Novos Inputs HTML5</title> <meta charset="UTF-8"> </head> <body> <form> <p><label for="escolha_cor"> Cor : </label> <input type="color" id="escolha_cor" name="escolha_cor" /></p> <p><label for="inicio"> Data : </label> <input type="date" id ="data" name="data" min="2011-01-01"/></p> <p><label for="palestra"> Dia de aniversário(dia e hora) : </label> <input type="datetime" id="bdaytime" name="bdaytime"/></p> <p><label for="concerto"> Insira seu dia de aniversário e hora : </label> <input type="datetime-local" id="bday" name="bday"/></p> <p><label for="seuemail"> Email : </label> <input type="email" id="seuemail" name="seuemail" required/></p> <p><label for="ferias"> Mês de Férias: </label> <input type="month" id="ferias" name="ferias"/></p> <p><label for="musicas"> Número de Músicas : </label><input type="number" id="musicas" name="musicas" min="2" max="8"/> </p> <p><label for="altitude"> Altitude : </label> <input type="range" id="altitude" name="altitude" min="100" max="1000" step="100"/></p> <p><label for="busca"> Busca : </label> <input type="search" id="busca" name="busca" placeholder="pesquisar..."/></p> <p><label for="telefone"> Telefone: </label><input type="tel" id="telefone" name="telefone"/></p> <p><label for="horario"> Horário : </label><input type="time" id="horario" name="horario"/></p> <p><label for="site"> Site : </label><input type="url" id="site" name="site"/></p> <p><label for="semana"> Semana : </label><input type="week" id="semana" name="semana"/><p> </form> </body> </html>
Listagem 1. Exemplo de como usar os novos inputs

Artigos relacionados