Versão Impressão

HTML5

Um guia de referência para os desenvolvedores web.

7. Novos tipos de campos

Novos valores para o atributo type

O elemento input aceita os seguintes novos valores para o atributo type:

tel

Telefone. Não há máscara de formatação ou validação, propositalmente, visto não haver no mundo um padrão bem definido para números de telefones. É claro que você pode usar a nova API de validação de formulários (descrita no capítulo 8) para isso. Os agentes de usuário podem permitir a integração com sua agenda de contatos, o que é particularmente útil em telefones celulares.

search

Um campo de busca. A aparência e comportamento do campo pode mudar ligeiramente dependendo do agente de usuário, para parecer com os demais campos de busca do sistema.

email

E-mail, com formatação e validação. O agente de usuário pode inclusive promover a integração com sua agenda de contatos.

url

Um endereço web, também com formatação e validação.

Datas e horas

O campo de formulário pode conter qualquer um desses valores no atributo type:

Todos devem ser validados e formatados pelo agente de usuário, que pode inclusive mostrar um calendário, um seletor de horário ou outro auxílio ao preenchimento que estiver disponível no sistema do usuário.

O atributo adicional step define, para os validadores e auxílios ao preenchimento, a diferença mínima entre dois horários. O valor de step é em segundos, e o valor padrão é 60. Assim, se você usar step="300" o usuário poderá fornecer como horários 7:00, 7:05 e 7:10, mas não 7:02 ou 7:08.

number

Veja um exemplo do tipo number com seus atributos opcionais:

Arquivo: exemplos/7/number.html

1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Number type</title>
6 </head>
7
8 <body>
9
10 <input name="valuex" type="number"
11 value="12.4" step="0.2"
12 min="0" max="20" />
13
14 </body>
15
16 </html>
17

O Opera 10 nos dá uma excelente visualização do que um agente de usuário pode fazer nesse caso:

Opera 10 mostrando o input number

range

Vamos modificar, no exemplo acima, apenas o valor de type, mudando de "number" para "range":

Arquivo: exemplos/7/range.html

1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Range type</title>
6 </head>
7
8 <body>
9
10 <input name="valuex" type="range"
11 value="12.4" step="0.2"
12 min="0" max="20" />
13
14 </body>
15
16 </html>
17

Novamente, Opera 10:

Opera 10 mostrando o input number

color

O campo com type="color" é um seletor de cor. O agente de usuário pode mostrar um controle de seleção de cor ou outro auxílio que estiver disponível. O valor será uma cor no formato #ff6600.