Novos tipos de campos em html5

Novos valores para o atributo type

Opera 10

Enquanto escrevo, o Opera 10 é o único navegador Desktop que fez um bom trabalho implementando os novos recursos de formulário do HTML5. Se você instalá-lo, poderá testar quase tudo deste e dos próximos dois capítulos.

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

datetime-local

O tipo de campo datetime-local trata automaticamente as diferenças de fusos horários, submetendo ao servidor e recebendo dele valores GMT. Com isso você pode, com facilidade, construir um sistema que será usado em diferentes fusos horários e permitir que cada usuário lide com os valores em seu próprio fuso horário.

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:

 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:

image

range

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

 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:

image

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.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s