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:

datetime
date
month
week
time
datetime-local

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: