Funçõees HTML 5

8/10/2019 Funees HTML 5

1/5

07/01/2015 A evoluo dos formulrios em HTML 5

http://www.oficinadanet.com.br/artigo/html/a_evolucao_dos_formularios_em_html_5 1/5

HTML html 5 formulrios

A evoluo dos formulrios em HTML 5124Comente abaixo

Jonathan Lamim(@jlamim)

26/10/2010

HTML 5 a mais nova verso da linguagem de marcao

de hipertexto utilizada para montagem de pginas web, ela

ainda no suportada por todos os navegadores

disponveis no mercado, o que uma pena, mas bom

tomar conhecimento dessa evoluo da HTML...

HTML 5 a mais nova verso da linguagem de marcao

de hipertexto utilizada para montagem de pginas web, ela

ainda no suportada por todos osnavegadores

disponveis nomercado, o que uma pena, mas bom

tomar conhecimento dessa evoluo da HTML, assim quando os navegadores comearem a dar suporte

voc j estar pronto para usufruir dos recursos da linguagem e aumentar a produtividade no seu

trabalho. Agora que voc j sabe um pouco sobre o que HTML 5, vamos ao que interessa.

Nessanovaverso da HTML os formulriosganharam recursos muito interessantes e importantes para

otimizao do trabalho. Por exemplo, possvel fazer validao de campos sem o uso de JavaScript,

fazer validao atravs de ER (expresses regulares) diretamente no cdigo HTML entre muitas outras.

Vejamos algumas novidades da HTML 5 para uso nos formulrios.

TIPOS DE CAMPO

Data e Hora

Esse campo abre um calendrio para escolher a date e ainda possvel setar a hora.

Tempo

Campo utilizado para setar hora e minuto.

Semana

Abre um campo onde possvel selecionar ano e dia, e escolhendo o dia ele armazena o ano e a

semana.

Nmeros

Compartilhe com seus amigos:

mais de html

Como acessar a cmera no navegadorcom HTML5

HTML5: Adeus time, datetime epubdate. Ol data e value

TOPO

REVIEWS NOTCIAS ARTIGOS DICAS MAIS
http://www.oficinadanet.com.br/artigo/html/html5-adeus-time-datetime-e-pubdate-ola-data-e-value-http://www.oficinadanet.com.br/artigo/html/html5-adeus-time-datetime-e-pubdate-ola-data-e-value-http://www.oficinadanet.com.br/post/9359-como-acessar-a-camera-no-navegador-com-html5http://www.oficinadanet.com.br/post/9359-como-acessar-a-camera-no-navegador-com-html5http://www.oficinadanet.com.br/secao/htmlhttp://www.oficinadanet.com.br/tags/html-5http://www.oficinadanet.com.br/tags/formularioshttp://www.oficinadanet.com.br/topicoshttp://www.oficinadanet.com.br/especiaishttp://www.oficinadanet.com.br/apostilashttp://www.oficinadanet.com.br/secao/htmlhttp://www.oficinadanet.com.br/tutoriaishttp://www.oficinadanet.com.br/dicashttp://www.oficinadanet.com.br/empresashttp://www.oficinadanet.com.br/tags/formularioshttp://www.oficinadanet.com.br/post/9359-como-acessar-a-camera-no-navegador-com-html5http://www.oficinadanet.com.br/artigo/275/tag_de_fieldset.http://cursos.oficinadanet.com.br/http://www.oficinadanet.com.br/novidades/2010/10/26http://www.oficinadanet.com.br/reviewshttp://www.oficinadanet.com.br/apostilashttp://www.oficinadanet.com.br/especiaishttp://www.oficinadanet.com.br/topicoshttp://www.oficinadanet.com.br/novidadeshttp://www.oficinadanet.com.br/http://www.oficinadanet.com.br/artigoshttp://www.oficinadanet.com.br/autor/172-jonathan-lamimhttp://www.oficinadanet.com.br/tags/html-5http://www.oficinadanet.com.br/noticiashttp://www.oficinadanet.com.br/artigo/html/html5-adeus-time-datetime-e-pubdate-ola-data-e-value-


2/5



sse campo perm e a c onar somen e n meros como va ores, e a n a poss ve m ar os va ores

mnimo e mximo a serem inseridos, utilizando os atributos min e max.

Telefone

Esse campo permite adicionar um nmero de telefone e ele far a validao automaticamente, porm eu

vejo um problema, j que o formato dos nmeros telefnicos no um padro mundial, alguns pasespossuem mais dgitos do que os telefones aqui do Brasil por exemplo, ento essa validao um pouco

falha.

URL

Exibe um campo com validao para a insero de URLs.

Email

Campo usado para inserir e fazer a validao de um endereo de e-mail.

Slider

Esse novo tipo de campo no como os outros, ele exibe uma rgua onde possvel setar um valor.Essa rgua parecida com a timeline de players de msica. Os atributos min e max limitam a faixa de

valores, e o atributo step informa a progresso dos valores, que no exemplo abaixo para multiplos de

5, por exemplo 5, 10, 15?

Pesquisa

Cria um campo para pesquisas.

Paleta de Cores

Cria uma paleta de cores, como as que podem ser criadas usando por exemplo a biblioteca JavaScript

"jQuery UI".

Veja abaixo alguns atributos que possuem funes interessantes, tanto na validao dos campos quanto

no auxlio ao usurio e usabilidade da pgina web.

Autofocus

Se informado esse atributo no cam o ele receber o foco assim ue a ina for carre ada no


3/5



navegador.

Autocomplete

Se esse atributo estiver como "on", ento ele habilita um autocompletar para o campo.

Placeholder

Esse atributo usado para auxiliar o usurio no preenchimento do campo, pois ele d uma dica do que

deve ser inserido.

Pattern

Esse atributo quando especificando tem a funo de fazer uma validao com base em uma expresso

regular. No exemplo abaixo ele aceita origatoriamente 11 caracteres entre nmeros e letras minsculas.

[sourcecode]

Required

Informando o atributo no campo, ele passar a ser de preenchimento obrigatrio, no sendo

executado o submit do formulrio enquanto ele no for preenchido.

[sourcecode type="html"]

Infelizmente no so todos os navegadores que possuem suporte HTML 5, como eu j disse no incio

desse artigo, mas vale a pena conhecer a evoluo da HTML e saber o que ser possvel futuramente

na construo de pginas web usando HTML 5.

Para encerrarmos esse artigo, deixo um pequeno exemplo de formulrio usando HTML 5 e web

semntica. Forte abrao e at o prximo artigo.

Formulrio com HTML 5

Nome completo:

Email:

Data de Nascimento:

isto!


4/5



Relacionados

Como desconectar o Facebook do Skype?

como fao para desfazer essaexclusao?

Facebook est em baixa entre os jovens em2014

A questo que no foi abordadana matria a presena dos pais e familiares noFacebook, que acaba por constranger ou at

Por que os cupons no emplacaram no Brasil

(at agora)

Os cupons no do certo noBrasil por apenas um motivo: as empresasfornecedoras do produto ou servio aqui s

Facebook permite agora busca por postagens

antigas

Eu gostaria de saber comorecuperar o meu perfil antigo no Facebook,

juntamente com meu s posts e posts dos

0 Comentrios

HTML5: O Elemeto

Seguir ou no os

padres web?

Introduo a

programao do HTML5

Dicas - Como inserir

trecho de mapa viasatlite no site emmenos de 1 minuto

Compartilhe com seus amigos:

ltimos reviews

Review Samsung Galaxy S5

8,1

Review Motorola Moto G Segunda Gerao

8,0

Review Samsung Galaxy K Zoom

8,4

Facebook

Twitter

Google+

RSS

Newsletter

Cadastre-se

NOSSOSOCIAL

Games

Livros

Smartphones

Tablets

NOSSOS REVIEWS

Carreira

Empreendedorismo

Marketing digital

Mdias sociais

Segurana

Smartphones

Tecnologia

NOSSASSEES

Sobre

Fale conosco

Anuncie

Equipe

Trabalhe conosco

SOBRE NS
http://www.oficinadanet.com.br/secao/webmarketinghttp://www.oficinadanet.com.br/sobrehttp://www.oficinadanet.com.br/post/13601-review-motorola-moto-g-segunda-geracaohttp://www.oficinadanet.com.br/secao/empreendedorismohttp://www.oficinadanet.com.br/post/13626-review-samsung-galaxy-s5http://www.oficinadanet.com.br/anunciehttp://www.oficinadanet.com.br/reviews/gameshttp://www.oficinadanet.com.br/secao/tecnologiahttp://www.oficinadanet.com.br/equipehttp://www.oficinadanet.com.br/secao/carreirahttp://www.facebook.com/oficinadanethttp://www.oficinadanet.com.br/reviews/smartphoneshttp://www.oficinadanet.com.br/secao/segurancahttp://www.oficinadanet.com.br/contatohttp://www.oficinadanet.com.br/post/13813-review-samsung-galaxy-k-zoomhttp://twitter.com/OficinadaNethttp://www.oficinadanet.com.br/reviews/livroshttp://www.oficinadanet.com.br/trabalhe-conoscohttp://www.oficinadanet.com.br/newsletterhttp://www.oficinadanet.com.br/secao/midias_sociaishttp://www.oficinadanet.com.br/secao/celulareshttp://www.oficinadanet.com.br/reviewshttp://plus.google.com/+oficinadanethttp://www.oficinadanet.com.br/cadastrohttp://www.oficinadanet.com.br/reviews/tabletshttp://feeds2.feedburner.com/oficinadanet_Rss

Documents

Funçõees HTML 5