07/01/2015

AevoluodosformulriosemHTML5
REVIEWS

NOTCIAS

ARTIGOS

DICAS

MAIS

HTML html 5 formulrios

A evoluo dos formulrios em HTML 5

Jonathan Lamim (@jlamim)

Comente abaixo

26/10/2010

Compartilhe com seus amigos:

124

HTML5amaisnovaversodalinguagemdemarcao
dehipertextoutilizadaparamontagemdepginasweb,ela
aindanosuportadaportodososnavegadores
disponveisnomercado,oqueumapena,masbom

mais de html

tomarconhecimentodessaevoluodaHTML...
HTML5amaisnovaversodalinguagemdemarcao
dehipertextoutilizadaparamontagemdepginasweb,ela

Como acessar a cmera no navegador

com HTML5

aindanosuportadaportodososnavegadores
disponveisnomercado,oqueumapena,masbom
tomarconhecimentodessaevoluodaHTML,assimquandoosnavegadorescomearemadarsuporte
vocjestarprontoparausufruirdosrecursosdalinguagemeaumentaraprodutividadenoseu

HTML5: Adeus time, datetime e

pubdate. Ol data e value

trabalho.AgoraquevocjsabeumpoucosobreoqueHTML5,vamosaoqueinteressa.
NessanovaversodaHTMLosformulriosganharamrecursosmuitointeressanteseimportantespara
otimizaodotrabalho.Porexemplo,possvelfazervalidaodecampossemousodeJavaScript,
fazervalidaoatravsdeER(expressesregulares)diretamentenocdigoHTMLentremuitasoutras.
VejamosalgumasnovidadesdaHTML5parausonosformulrios.

TIPOS DE CAMPO
DataeHora

TOPO

Essecampoabreumcalendrioparaescolheradateeaindapossvelsetarahora.

<inputname="calendario"type="datetime"/>

Tempo
Campoutilizadoparasetarhoraeminuto.

<inputname="hora"type="time"/>

Semana
Abreumcampoondepossvelselecionaranoedia,eescolhendoodiaelearmazenaoanoea
semana.

<inputname="semana"type="week"/>

Nmeros
Essecampopermiteadicionarsomentenmeroscomovalores,eaindapossvellimitarosvalores
http://www.oficinadanet.com.br/artigo/html/a_evolucao_dos_formularios_em_html_5

1/5

07/01/2015
AevoluodosformulriosemHTML5
Essecampopermiteadicionarsomentenmeroscomovalores,eaindapossvellimitarosvalores
mnimoemximoasereminseridos,utilizandoosatributosminemax.

<inputname="numero"type="number"/>

Telefone
Essecampopermiteadicionarumnmerodetelefoneeelefaravalidaoautomaticamente,pormeu
vejoumproblema,jqueoformatodosnmerostelefnicosnoumpadromundial,algunspases
possuemmaisdgitosdoqueostelefonesaquidoBrasilporexemplo,entoessavalidaoumpouco
falha.

<inputname="telefone"type="tel"/>

URL
ExibeumcampocomvalidaoparaainserodeURLs.

<inputname="site"type="url"/>

Email
Campousadoparainserirefazeravalidaodeumendereodeemail.

<inputname="email"type="email"/>

Slider
Essenovotipodecamponocomoosoutros,eleexibeumarguaondepossvelsetarumvalor.
Essarguaparecidacomatimelinedeplayersdemsica.Osatributosminemaxlimitamafaixade
valores,eoatributostepinformaaprogressodosvalores,quenoexemploabaixoparamultiplosde
5,porexemplo5,10,15?

<inputname="satisfacao"type="range"min="5"max="50"step="5"/>

Pesquisa
Criaumcampoparapesquisas.

<inputname="pesquisar"type="search"/>

PaletadeCores
Criaumapaletadecores,comoasquepodemsercriadasusandoporexemploabibliotecaJavaScript
"jQueryUI".

<inputname="cores"type="color"/>

Vejaabaixoalgunsatributosquepossuemfunesinteressantes,tantonavalidaodoscamposquanto
noauxlioaousurioeusabilidadedapginaweb.

Autofocus
Seinformadoesseatributonocampo,elereceberofocoassimqueapginaforcarregadano

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

2/5

07/01/2015
AevoluodosformulriosemHTML5
Seinformadoesseatributonocampo,elereceberofocoassimqueapginaforcarregadano
navegador.

<inputname="pesquisar"type="search"autofocus/>

Autocomplete
Seesseatributoestivercomo"on",entoelehabilitaumautocompletarparaocampo.

<inputname="pesquisar"type="search"autocomplete="on"/>

Placeholder
Esseatributousadoparaauxiliarousurionopreenchimentodocampo,poiseledumadicadoque
deveserinserido.

<inputname="pesquisar"type="search"placeholder="Pesquisar"/>

Pattern
Esseatributoquandoespecificandotemafunodefazerumavalidaocombaseemumaexpresso
regular.Noexemploabaixoeleaceitaorigatoriamente11caracteresentrenmeroseletrasminsculas.

<inputname="valor"type="number"pattern="[09][az]{10}"/>[sourcecode]</pre>
<strong>
Required</strong>
Informandooatributonocampo,elepassaraserdepreenchimentoobrigatrio,nosendo
executadoosubmitdoformulrioenquantoelenoforpreenchido.
[sourcecodetype="html"]<inputname="pesquisar"type="search"required/>

InfelizmentenosotodososnavegadoresquepossuemsuporteHTML5,comoeujdissenoincio
desseartigo,masvaleapenaconheceraevoluodaHTMLesaberoqueserpossvelfuturamente
naconstruodepginaswebusandoHTML5.
Paraencerrarmosesseartigo,deixoumpequenoexemplodeformulriousandoHTML5eweb
semntica.Forteabraoeatoprximoartigo.

<form>
<fieldset>
<legend>FormulriocomHTML5</legend>
<ul>
<li>
<labelfor="nome">Nomecompleto:</label>
<inputname="nome"type="text"requiredautofocus/>
</li>
<li>
<labelfor="email">Email:</label>
<inputname="email"type="email"placeholder="email@seuprovedor.com.br"required/>
</li>
<li>
<labelfor="nascimento">DatadeNascimento:</label>
<inputname="nascimento"type="date"/>
</li>
<li>
<inputname="Salvar"type="submit"value="Salvar"/>
</li>
</ul>
</fieldset>
</form>

isto!

Esta informao foi til?

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

3/5

07/01/2015

AevoluodosformulriosemHTML5

Esta informao foi til?

Relacionados

HTML5: O Elemeto
<article>

Seguir ou no os
padres web?

Introduo a
programao do HTML
5

Dicas - Como inserir

trecho de mapa via
satlite no site em
menos de 1 minuto

Compartilhe com seus amigos:

0Comentrios

OficinadaNet

Entrar

Compartilhar Favorito

OrdenarporMelhoravaliado

Comeceadiscusso...

Sejaoprimeiroacomentar.

OQUEISSO?

TAMBMEMOFICINADANET

ComodesconectaroFacebookdoSkype?

Facebookestembaixaentreosjovensem
2014

2comentrios15diasatrs

EdileneOliveiracomofaoparadesfazeressa

1comentrio16diasatrs

exclusao?

Castle_BravoAquestoquenofoiabordada

namatriaapresenadospaisefamiliaresno
Facebook,queacabaporconstrangerouat

PorqueoscuponsnoemplacaramnoBrasil
(atagora)

Facebookpermiteagorabuscaporpostagens
antigas

2comentrios20diasatrs

1comentrioummsatrs

CaioCoutinhoOscuponsnodocertono

DarlonShelterEugostariadesabercomo

Brasilporapenasummotivo:asempresas
fornecedorasdoprodutoouservioaquis

recuperaromeuperfilantigonoFacebook,
juntamentecommeuspostsepostsdos

Assinarfeed

AdicioneoDisqusnoseusite

Privacidade

ltimos reviews

8,1

8,0

8,4

Review Samsung Galaxy S5

Review Motorola Moto G Segunda Gerao

Review Samsung Galaxy K Zoom

SOBRE NS

NOSSAS SEES

NOSSOS REVIEWS

NOSSO SOCIAL

Sobre
Fale conosco
Anuncie
Equipe
Trabalhe conosco

Carreira
Empreendedorismo
Marketing digital
Mdias sociais
Segurana
Smartphones
Tecnologia

Games
Livros
Smartphones
Tablets

Facebook
Twitter
Google+
RSS
Newsletter
Cadastre-se

OFICINA DA NET

Desenvolve Web Tecnologia da Informao LTDA ME.

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

4/5

OFICINA DA NET

07/01/2015

AevoluodosformulriosemHTML5

Desenvolve Web Tecnologia da Informao LTDA ME.

Todos os direitos reservados. 2005-2015.

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

5/5