Novos campos input type HTML 5

Conheça agora os novos tipos de campos que o html5 trouxe para nós.

Como já sabemos o html5 veio cheio de novidades, como novas tags, um melhor tratamento na hora de validar formularios diminuindo a execução de plugins externos, assim como novos formatos de conteúdos multimídia e novas funcionalidades de semânticas e acessibilidade.

Hoje vamos falar de alguns types novos que surgirão com a vinda do html5:

Type	Descrição
tel	A entrada é um número de telefone.
search	A entrada é um campo de busca.
url	A entrada é uma URL.
email	A entrada é um ou mais endereço de email.
datetime	A entrada é uma data e/ou hora.
date	A entrada é uma data
month	A entrada é um mês.
week	A entrada é um dia da semana.
time	A entrada é uma hora.
datetime-local	A entrada é uma data e hora local.
number	A entrada é um número.
range	A entrada é uma faixa de valores.
color	A entrada é uma cor em haxadecimal como #FF00FF.
placeholder	Especifica uma dica rápida que descreve o valor esperado em um campo de entrada.

Validando formulário em HTML 5.

Veja um formulario simples usando alguns recursos do html 5 

<form action="#" method="post" id="form" name="form">
          
 <input type="text" id="nome" name="nome" autofocus="autofocus" maxlength="255" size="60" required="required" placeholder="Nome" value="" /><br>
                  
<input type="email" id="email" name="email" maxlength="100" size="60" required="required" placeholder="E-mail" value="" /><br>
                  
 <input type="text" id="assunto" name="assunto" maxlength="100" size="60" required="required" placeholder="Assunto" value="" /><br>

<input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" />
              
 <textarea id="msg" name="msg" cols="30" rows="10" maxlength="1000" required="required" placeholder="Descrição"></textarea><br>
              
                <button class="botaolaranja botao2" type="submit" id="enviar" name="enviar">Enviar</button>
          
 </form>

O formulario ficara assim:

Alguns atributos HTML 5 foram usados nesse formulario, abaixo vamos explicar quais e sua funcionalidade.

placeholder

Esse atributo exibirá o texto dentro do campo input como vemos no exemplo acima, isso torna nosso formulário muito mais elegante.

autofocus

Ao ser carregada a página, o focu do mouse será automaticamente direcionado ao campo respectivo. Isso economiza tempo comparada as outra soluções em javascript e tudo mais.

maxlength

Esse atributo já existia anteriormente porém a novidade e que esse atributo foi corrigido alguns problemas, agora podemos aplicar também em uma textarea podendo assim limitar a quantidade de caracteres.

 required

Required é uma função muito importante para a validação de um formulario,  essa função não permite que o formulario seja postado com o campo vazio. O campo em que este atributo estiver se tornara obrigatório.

  pattern

O atributo pattern nos permiti validar o campo de forma mais objetiva, por exemplo o campo cep usamos uma expressão regular e só permite o usuário preencher com 5 numeros, traço e 3 numeros no final.

type 

 O type é um atributo que define o tipo de campo que esta sendo criado, o html 5 trouxe muitas novidades como email, number, month, range, datetime por ai vai. Para saber mais sobre o atributo type e seus valores veja o post Novos campos input type html 5