HTML5 - Novos tipos de campos
- Posted: Apr 24, 2012 at 8:26 AM
- 6,936 Views
- 29 Comments
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.
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:
<!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8” /> <title>Number type</title> </head> <body> <input name=”valuex” type=”number” value=”12.4” step=”0.2” 12 min=”0” max=”20” /> </body> </html>
range
Vamos modificar, no exemplo acima, apenas o valor de type, mudando de "number" para "range":
<!DOCTYPE html> <html lang=”en-US”> <head> <meta charset=”UTF-8” /> <title>Range type</title> </head> <body> <input name=”valuex” type=”range” value=”12.4” step=”0.2” 12 min=”0” max=”20” /> </body> </html>
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.
Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com
Comment on the Post
Already have a Channel 9 account? Please sign in
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
Muito obrigado pelo post, é bom ver que a comunidade portuguesa esta a crescer e activa.
Força continua, excelente trabalho.
Excelente trabalho.
Excelente!
Muito esclarecedor o estudo! Fica a dica para o complemento de todo o conteúdo aqui lecionado: http://www.w3schools.com/html5/att_input_type.asp Grato!
Muito bom o curso irei recomendar no meu site:
http://www.TudoParaSites.com
Muito bom o curso irei recomendar no meu site:
http://www.TudoParaSites.com
Excelente esses novos atributos facilitaram muito a minha vida!
Assimilado.
Excelente
EXCELENTE CURSO
Excelente evolução no elemento input. Estes novos atributos de type vão simplificar bem a validação e design de interfaces.
Logo veremos libraries que aplicam comportamentos e validações automáticas, baseadas no atributo type.
Muito BOM
muito bom este tutorial
Muito bom!
esclarecedor!
Irei me aprofundar mais no assunto, muito diferente do que temos no HTML 4.
Excelente!
Eu estava fazendo uns testes em Navegador e percebi que no IE 9.0 não funciona nada desses recursos do HTML 5. O problema que eu estou querendo desenvolver um site teste que funcione em todos os navegadores, incluindo nele.
Alguma dica?
O campo com type="color" para ser usado como seletor de cor é uma excelente função que substituira uma biblioteca gigante de javascript.
Infelizmente os novos padrões HTML5 propostos pelo W3C só funcionam de no Google Chrome. Acredito ser importante uma maior dedicação por parte das empresas responsáveis pelos navegadores estarem buscando inserir o quanto antes, novas funcionalidades.
Muito bom o uso das novas funcionalidades, contribuem bastante para geração de um bom layout. Apesar das novas facilidades acredito que as verificações de entradas de dados ainda terão de ser verificadas pelo administrador para confirmar que essas entradas feitas pelo usuário é realmente uma informação válida.
Muito bom :D
?
muito,bom
Dhieyson - O navegador opera segundo a própria W3C é o browaser que é mais compatível com os padrões e recursos do HTML5
Muito bom!
Finalmente chegamos a uma fase de desenvolvimento que bom parabéns é vamos lá excelente post, aprendí a gostar de grandes códigos. Obrigado!
Estou gostando muito do curso e recomendando aos amigos!!
Os artigos deste curso são muito bem-escritos, parabéns ao autor!
Remove this comment
Remove this thread
close