Mesmo que os formulários HTML5 tenham muito mais recursos do que seus predecessores, eles podem ser definidos da mesma forma.
O HTML5 de fato oferece muitos novos tipos de campos. O suporte dos navegadores atuais para eles é relativamente bom. No entanto, nesta seção, vou apresentar apenas tipos de campo que são práticos.
Seletor de cores
Você pode oferecer aos seus visitantes a opção de escolher uma cor.
Quando você clica em um campo desse tipo, um seletor de cor típico é aberto.
Através dele, é possível escolher a cor desejada. Um seletor de cores desse tipo é definido por <input type="color" />.
Escolha a sua cor favorita: <input type="color" name="lf" />
O campo sempre deve ter um valor atribuído. Se ele estiver faltando ou for inválido, automaticamente será assumido o valor #000 (ou seja, preto).
Data e Hora
Principalmente no que diz respeito aos tipos de campo para datas e horários, existem várias novidades em HTML5. E esses tipos de campo podem ser realmente complexos. Pense, por exemplo, nos passos necessários para oferecer aos seus visitantes um campo de seleção de datas. Normalmente, sem JavaScript (ou mesmo Flash), isso não seria possível. Graças ao HTML5, agora isso está muito mais fácil. Aqui, você precisa apenas definir um campo de entrada do tipo date.
<input type="date" />
A exibição e implementação do calendário é de responsabilidade exclusiva do navegador. Os navegadores devem apresentar um widget adequado para a exibição do calendário. No Google Chrome, uma aplicação pode ser assim:
Com date, um calendário é definido, pelo qual os usuários podem escolher a data desejada. Após a seleção, a data é automaticamente inserida no campo de texto.
Da mesma forma, é fácil criar um campo de hora. Para isso, é usado um campo do tipo time.
<input type="time" />
Por meio de time, os navegadores devem exibir controles para selecionar um horário.
De forma similar, week funciona. Ele exibe um campo para seleção da semana.
<input type="week" />
Também é possível exibir um campo de mês.
<input type="month" />
Ambos os tipos de campo apresentam controles pelos quais as informações desejadas podem ser ajustadas.
Enquanto time e date permitem apenas a seleção da data ou apenas a seleção do horário, datetime e datetime-local permitem uma combinação de ambas as variantes.
Com datetime, um campo de data e um campo para selecionar o horário são exibidos lado a lado. (Datetime atualmente é suportado apenas pelo Safari e Opera).
Já foi mencionado que os campos de formulários apresentados nesta seção ainda não são suportados por todos os navegadores. Se você deseja ainda assim utilizá-los, pode recorrer a soluções JavaScript apropriadas. Grandes frameworks em JavaScript, como jQuery e Dojo, oferecem scripts adequados. Com o jQuery UI, seria da seguinte maneira:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Dessa forma, você estará seguro, mesmo que o navegador não suporte o clássico date.
Campos para Números
Por meio de number, é oferecido um campo especialmente destinado à entrada de números.
<input type="number" />
Os números podem ser inseridos nesses campos de duas maneiras:
• através do teclado
• através dos elementos de controle
Através da especificação de atributos adicionais, os campos de tipo number podem ser descritos de forma mais detalhada. Em primeiro lugar, há os dois atributos min e max que determinam os intervalos de valores dos campos.
• min - o valor mínimo
• max - o valor máximo
No entanto, esses dois atributos se aplicam apenas aos elementos de controle do navegador. As entradas manuais dos usuários através do teclado não são afetadas por eles.
Ambos os atributos podem ser atribuídos a números inteiros e de ponto flutuante.
O atributo step permite definir o passo que deve ser seguido pelos elementos de controle do navegador.
<input type="number" min="0" max="8" step="2" />
Neste caso, através dos controles do navegador, só seria possível selecionar os valores 0, 2, 4, 6 e 8.
Controle deslizante
Campos do tipo range permitem a seleção de um valor dentro de um intervalo de valores definido.
Os navegadores interpretam o campo range através de um controle deslizante.
<input type="range" min="0" max="10" step="2" value="6">
O valor mínimo possível é especificado pelo atributo min. max descreve o valor máximo. Se os atributos min e max estiverem ausentes, os navegadores assumem os valores 0 e 100.
Através do step, pode-se definir a sequência de passos.
Criando campos de pesquisa
search inicialmente não tem função. Em vez disso, esse tipo de campo é visto como um complemento ao campo de entrada de texto clássico. A finalidade dos campos search é simplesmente se diferenciar visualmente dos campos de texto simples. Normalmente, os navegadores devem lidar com a aparência dos campos search.
<input type="search" />
Como isso será implementado, fica a critério dos fabricantes. Uma boa combinação é adicionar o atributo results.
<input type="search" results="5" placeholder="Pesquisar..." />
O atributo results determina quantas pesquisas anteriores devem ser exibidas no campo.
Mas atenção: O atributo results não faz parte da especificação do HTML5.
