Com o HTML5, novos  tipos de campos foram adicionados  ao formulário, o elemento input acabou recebendo novos valores para o atributo type.

Estes novos valores acabaram facilitando a vida de todos os programadores, pois com isso substituímos varias linhas de códigos ou bibliotecas do javascript que fariam as mesmas funções, mas sem uma semântica definida.

Abaixo demostrarei o uso desses novos campos :

Tel(Telefone): É  o campo para inclusão do número de telefone,  porém não há uma máscara padrão para o formato do número de telefone que é diferente em várias partes do mundo.

<input type="tel" name="telefone" id="telefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}" required="" />

Search(campo de busca): É o campo buscas  personalizado que permite a entrada de dados textuais

 

<strong><input type="search" name="busca" id="busca" placeholder="Pesquisar..." /></strong>

Email: É o campo capaz de avaliar se o endereço informado de email é validado

<input type="email" name="email" id="email" required="" />

Url(endereço web): É o campo de validação e formação de uma URL.

<input type="url" name="enderecoSite" id="enderecoSite" />

Data e Hora: É responsável por  validar é formatar a data e a hora

<input type="date" name="calendario" id="calendario" min="2012-01-01" />
<input type="time" name="campohora" id="campohora" />

Number: Cria um tipo de campo especial para adicionar números com controles que permitem aumentar ou diminuir o seu valor.

<input type="number" name="numberexample" id="numberexample" min="1" max="10" value="1" required="" step="”2”" />

Range: Cria um controle deslizante que permite escolher entre valores de alcance entre a posição inicial e final do controlador.

</pre>
<form oninput="output.value = largura.value"><input type="range" id="largura" />
 <output id="output"></output></form>
<pre>

Color(Seletor de cor):É um campo que  apresenta um painel para uma seleção de cores.

<input type="”color" />

Conforme visto ao longo deste artigo, esses novos campos vieram para simplificar e facilitar a vida de todos que utilização o HTML, diferente das suas outras versões a onde isso era quase que impossível sem muitas linhas de código.

Gostou do texto? Já pensou em se qualificar e entrar para o mercado que mais cresce atualmente? Conheça  e participe do curso Programador Web da Fábrica de Software para um Varejo mais competitivo em Campo Grande(MS). Este texto foi produzido como parte das atividades relacionadas com os estudos sobre os Princípios do Designer e páginas Web para Programadores, sobre a orientação do professor Marco Aurélio Dias de Oliveira.

Leia outros textos relacionados com Princípios do Designer e páginas Web para Programadores.

Aplicações offline com HTML5
Novos tipos de campos no HTML5
Usando MathML e SVG com HTML5
Tipos de Links no HTML5
O que são SERVER-SENT EVENTS no HTML5
O DOM e o HTML5
Menus e Toolbars no HTML5
O que é HTML5
Compatibilidade entre os navegadores com o HTML5
Novos elementos e atributos do HTML5