Es/Elementosdeformularioadicionalesdel

HTML5
FromWebEducationCommunityGroup

Contents
1Introduccin
2Porqunecesitabamosnuevascaractersticasdeformulario?
3Introduciendonuestroejemplo
4Nuevoscontrolesdeformulario
4.1<inputtype="number">
4.2<inputtype="range">
4.3<inputtype="date">yotroscontrolesdefecha/hora
4.4<inputtype="color">
4.5<inputtype="search">
4.6Elelemento<datalist>yelatributolist
4.7<inputtype="tel">,<inputtype="email">e<inputtype="url">
5Nuevosatributos
5.1placeholder
5.2autofocus
5.3minymax
5.4step
6Nuevosmecanismosdesalida
6.1<output>
6.2<progress>y<meter>
7Validacin
7.1required
7.2typeypattern
8Soporteenlosnavegadores
9Resumen

Introduccin
ElHTML5incluyemuchasnuevascaractersticasparahacerlosformularioswebmsfcilesdecrear,ms
poderososyconsistentesatravsdelaWeb.Enesteartculosepresentaunbreveresumenacercadealgunos
delosnuevoscontrolesyfuncionalidadesdeformularioquehansidointroducidos.

Porqunecesitabamosnuevascaractersticasdeformulario?
Seamosrealistas,losformulariosHTMLsiemprehansidoundolordecabeza.Noesmuydivertido
etiquetarlosypuedesercomplicadoaplicarlesestilos,especialmentesideseaquetenganunaapariencia
consistenteentodoslosnavegadoresyqueseajustenalaspectogeneraldesusitio.Adicionamente,
rellenarlospuedeserfrustranteparasususuarios,ansiloshacreadoconmuchocuidadoyconsideracin
parahacerlostanusablesyaccesiblescomoseaposible.Crearunbuenformularioesmsunasuntodelimitar
losdaosquegenerarexperienciasdeusuarioagradables.
Hacetiempoatrs,cuandoelHTML4.01seconvirtienunarecomendacinestable,laweberaunlugar
mayormenteesttico.S,existaelsingularformulariodecomentariosoellibrodevisitantes,pero
generalmentelossitioswebestabanallparaquelosvisitantessimplementeleyeran.Desdeentonces,laweb
haevolucionado.Paramuchaspersonas,elnavegadorsehaconvertidoenunaventanaaunmundode
aplicacionescomplejasbasadasenlawebqueintentanlograrunaexperienciacasisimilaraladesu
computador.

Figura1:Algunoscomplejoscontrolesdeformulariononativos,falsificadosmedianteJavaScript.
Parasatisfacerlanecesidaddecontrolesmssofisticadosnecesariosparatalesaplicaciones,los
desarrolladoreshanestadoaprovechandolasbibliotecasyentornosdeJavaScript(comojQueryUIoYUI).
Estassolucionessindudahanmaduradoalolargodelosaos,peroenesenciasonunasolucinalternativa
paracompensarloslimitadoscontrolesdeformulariodisponiblesenHTML.stos"falsifican"loswidgets
mscomplejos(comoselectoresdefechaycontrolesdeslizantes)superponindolesetiquetadoadicional(no
siempresemntico)yunagrancantidaddecdigoJavaScriptenlapartesuperiordelaspginas.
HTML5pretendeestandarizaralgunosdeloscontrolesdeformulariomejoradosmscomunes,
desplegndolosdeformanativaenelnavegadoryobviandolanecesidaddeestassolucionesalternativas
basadasenpesadasdesecuenciadecomandos.

Introduciendonuestroejemplo
Parailustraralgunasdelasnuevascaractersticas,esteartculovieneconun[ejemplobsicodeformulario
HTML5(http://devfiles.myopera.com/articles/4582/html5formsexample.html)].Notienelaintencinde
representarunformulario"verdadero"(yaqueestarapresionadoparaencontrarunasituacinenlaque

necesitetodaslasnuevascaractersticasenunsoloformulario),perodebedarleunaideadecomoseveny
comportanlosdiferentescontroles.
Nota:laaparienciadelosnuevoscontrolesdeformularioylosmensajesdevalidacindifieredenavegadoren
navegador,porloquedebeconsiderarlaaplicacindeestilosasusformulariosparaquetenganuna
aparienciarazonablementeconsistenteenlosdiferentesnavegadores.

Nuevoscontrolesdeformulario
Comolasformulariossonlaprincipalherramientaparalaintroduccindedatosenlasaplicacioneswebylos
datosquedeseamosrecopilarsehanvueltomscomplejos,hasidonecesariocrearunelementoinputconms
capacidades,pararecolectarestosdatosconmssemnticayunamejordefinicin,ademsdepermitirunms
facilyeficazmanejodeerroresyvalidacin.

<inputtype="number">
Elprimernuevotipodecampodeentradaqueanalizaremosestype="number":
<input type="number" >

Estecreauntipoespecialdecampodeentradaparalaintroduccindeunnmero.Enlamayoradelos
navegadoresquelosoportan,aparececomouncampodeentradadetextoconuncontroldenmero,quele
permiteaumentarodisminuirsuvalor.

Figura2:Uncampodeentradadetiponumber.

<inputtype="range">
Crearuncontroldeslizantequelepermitaelegirentreunrangodevaloressolaserunapropuestacomplicada,
semnticamentedudosa,peroconelHTML5esfcil:slotienequeutilizareltipodecampodeentrada
range:
<input type="range" >

Figura3:Uncampodeentradarange.
Tengaencuentaque,pordefecto,estecampodeentradanosuelemostrarelvalorseleccionadoenel
momentoactual,oinclusoelrangodevaloresqueabarca.Losdesarrolladoresdebenproporcionarlos
medianteotrosmediosporejemplo,paramostrarelvaloractual,podramosutilizarunelemento<output>

juntoconalgodeJavaScriptparaactualizarlarepresentacindelcontrolcuandoelusuariohainteractuado
conelformulario:
<output onforminput="value=weight.value"></output>

<inputtype="date">yotroscontrolesdefecha/hora
HTML5tieneunnmerodecamposdeentradadiferentesparacrearselectorescomplejosdefecha/horapor
ejemplo,eltipodeselectordefechaqueapareceenprcticamentetodositiodereservadevuelo/trenexistente.
Estossuelencrearseutilizandotrucosnosemnticos,porloqueesestupendoqueahoratengamosformas
estandarizadasfcilesparahacerlo.Porejemplo:
<input type="date" >
<input type="time" >

Estoscrean,respectivamente,unselectordefechatotalmentefuncionalyuncampodeentradadetextoque
contieneunseparadorparahoras,minutosysegundos(dependiendodelatributostepespecificado)queslo
lepermiteintroducirunvalordetiempo.

Figura4:Camposdeentradadateytime.
Peroallnoterminatodohayunnmerodeotroscamposdeentradarelacionadosdisponibles:
datetime:combinalafuncionalidaddelosdosquehemosanalizadoanteriormente,permitindole

elegirunafechayunahora.
month:lepermiteelegirunmes,almacenadointernamentecomounnmeroentre112aunquelos

diferentesnavegadorespuedenproporcionarlemecanismosdeseleccinmselaborados,comounalista
desplegableconlosnombresdelosmeses.

week:lepermiteelegirunasemana,almacenadainternamenteenelformato2010W37(semana37del

ao2010)yelegidamedianteunselectordefechasimilaralosqueyahemosvisto.

<inputtype="color">
Estecampodeentradamuestraunselectordecolor.LaimplementacindeOperalepermitealusuarioelegir
entreunaseleccindecolores,introducirvaloreshexadecimalesdirectamenteenuncampodetextooinvocar
elselectordecoloresnativodelSistemaOperativo.

Figura5:uncampodeentradacolorylosselectoresdecolornativosdeWindowsyOSX.

<inputtype="search">
Elcampodeentradasearchpodradecirsequenoesnadamsqueuncampodeentradadetextoconun
estilodiferente.Losnavegadoresdeberanaplicarleaestoscamposdeentradaelmismoestiloqueacualquier
funcionalidaddebsquedaespecficadelsistemaoperativo.Sinembargo,msalldeestaconsideracin
puramenteesttica,siguesiendoimportantetenerencuentaqueeletiquetarexplcitamentecamposde
bsquedaabrelaposibilidadparalosnavegadores,ayudastcnicasorastreadoresautomatizados,dehacer
algointeligenteconestasentradasenelfuturoporejemplo,unnavegadorpodra,posiblemente,ofreceral
usuariounaopcinparacrearautomticamenteunabsquedapersonalizadaparaunsitioespecfico.

Figura6:UncampodeentradasearchcomoseveenOperaenOSX.

Elelemento<datalist>yelatributolist
Hastaahorahemosestadoacostumbradosautilizarloselementos<select>y<option>paracrearlistas
desplegablesdeopcionesdondenuestrosusuariospuedenelegir.Pero,ysiquisieramoscrearunalistaquele
permitaalosusuarioselegirentreunalistadeopcionessugeridas,ascomolaposibilidaddeintroducirsu
propiaopcin?Estosolarequerirsecuenciasdecomandoscomplicadas,peroahorapuedesimplementeusar
elatributolistparaconectaruncampodeentradacorrienteaunalistadeopciones,definidasdentrodeun
elemento<datalist>.

<input type="text" list="misdatos" >

<datalist id="misdatos">
<option label="Sr." value="Seor">
<option label="Sra." value="Seora">
<option label="Srta." value="Seorita">
</datalist>

Figure7:Creacindeuncampodeentradaconsugerenciasusandodatalist.

<inputtype="tel">,<inputtype="email">e<inputtype="url">
Comosusnombresloindican,estosnuevoscamposdeentradaserefierenanmerosdetelfono,direcciones
decorreoelectrnicoyURLs.Losnavegadoreslosmostrarncomocamposdeentradadetextonormales,
perosealarclaramentequtipodetextoestamosesperandoenestoscamposjuegaunpapelimportanteenla
validacindeformulariosdelladodelcliente.Adems,enciertosdispositivosmvileselnavegadorcambiar
sutecladoenpantallaparaentradadetextocomnporsusvariantesmsrelevantesalcontexto.Unavezms,
esconcebiblequeenelfuturolosnavegadoresaprovecharnmejorestasentradasexplcitamentedefinidas
paraofrecerfuncionalidadesadicionales,comoelautocompletadodedireccionesdecorreoselectrnicosy
nmerostelefnicosbasndose
enlalistadecontactosolalibretadedireccionesdelusuario.

Nuevosatributos
Ademsdenuevoscamposdeentradaexplcitos,elHTML5defineunaseriedenuevosatributosparalos
controlesdeformularioqueayudanasimplificaralgunastareascomunesyprecisarlosvaloresesperadospara
determinadoscamposdeentrada.

placeholder
Untrucocomndeusabilidadparalosformularioswebesteneruncontenidopredeterminadoenloscampos

deentradadetextoporejemplo,paradarsugerenciasacercadeltipodeinformacinqueesperamosqueel
usuariointroduzca,yquedesaparecercuandodichocontroldeformulariorecibaelfocodelusuario.Aunque
estosolarequeriralgodeJavaScript(borrarelcontenidodelcampodeformularioalrecibirelfocoy
restablecereltextopredeterminadosielusuarioretiraelfocodelcamposinintroducirnada),ahorapodemos
simplementeutilizarelatributoplaceholder:
<input type="text" placeholder="John Doe">

Figura8:Uncampodeentradadetextocontextopredeterminadomedianteelusodeplaceholder.

autofocus
Otracaractersticacomnqueanteriormentedependadesecuenciasdecomandoseslacolocacinautomtica
delfocoenuncampodeformulariocuandosecargaunapgina.Estopuedelograrseahoraconelatributo
autofocus:
<input type="text" autofocus >

Tengaencuentaquenodebetenermsdeuncontroldeformularioconelatributoautofocusenunamisma
pgina.Adems,debeutilizarestetipodefuncionalidadconcautela,ensituacionesdondeunformulario
representalaprincipalreadeintersenunapgina.Unapginadebsquedaesunbuenejemplo,siempre
quenohayamuchocontenidoytextodescriptivo,tienesentidoestablecerelfocoautomticamenteenel
campodeentradadetextodelformulariodebsqueda.

minymax
Comosunombresugiere,estepardeatributoslepermitenestablecerunlmiteinferiorysuperiorparalos
valoresquesepuedenintroducirenuncampodeentradanumricoporejemplo,camposdeentradade
nmero,rango(controldeslizante),horaofecha(s,inclusosepuedeutilizarparaestablecerloslmites
superioreinferiordelasfechas,porejemplo,enunformulariodereservadevuelospodralimitarelselector
defechasparaqueslopermitaqueelusuarioseleccionefechasfuturas).Paracamposdeentradarange,min
ymaxsonrealmentenecesariosparadefinirlosvaloresquesedevuelvencuandoseenvaelformulario.El
cdigoesbastantesimpleyautoexplicativo:
<input type="number" min="1" max="10">

step
Elatributosteppuedeutilizarseconunvalordecampodeentradanumricoparaestablecerlaprecisinde
losvaloresquesepuedeningresar.Porejemplo,puedequedeseequelosusuariosintroduzcanuntiempo
determinado,perosloenincrementosde30minutos.Enestecaso,podemosutilizarelatributostep,
teniendoencuentaqueparacamposdeentradatimeelvalordeesteatributoseestableceensegundos:

<input type="time" step="1800">

Nuevosmecanismosdesalida
Msalldelosnuevoscontrolesdeformularioconlosquelosusuariospuedeninteractuar,HTML5define
unaseriedenuevoselementosespecficamentedestinadosamostraryvisualizarinformacinparaelusuario.

<output>
Yahemosmencionadoelelemento<output>cuandohablamosdelcampodeentradarange.Esteelemento
sirvecomounaformademostrarelresultadodeunclculo,omsgeneralmente,paraproporcionarunasalida
explcitamenteidentificadaaunasecuenciadecomandos(enlugardesimplementecolocaruntextodentrode
unspanodivalazar).Parahaceranmsexplcitoaquecontrolesdeformularioenparticularest
vinculadoel<output>,podemos,deunamanerasimilaralelemento<label>,pasarunalistadeIDsenel
atributoopcionalfordelelemento.
<input type="range" id="ejemplorango" >
<output onforminput="value=ejemplorango.value" for="ejemplorango"></output>

<progress>y<meter>
Estosdosnuevoselementossonmuysimilares.Ambosmuestranunindicador/barraalusuariocomo
resultado.Loquelosdistingueessupropsito.Comosunombresugiere,<progress>tieneelfinde
representarunabarradeprogresoparaindicarelporcentajedefinalizacindeunatareadeterminada,mientras
que<meter>esunindicadormsgenricodeunamedidaescalarovalorfraccionario.

Figura9:Unabarraindicadoradeprogreso.

Validacin
Lavalidacindeformulariosesmuyimportantetantoenelladocliente,comoenelladoservidor,paraayudar
alosusuariosrealesaevitarycorregirloserroresyparaevitarqueusuariosmaliciososenviendatosque
pudierancausardaosanuestraaplicacin.Dadoquelosnavegadorespuedenahoratenerunaideadequ
tipodevaloresseesperanparalosdiversoscontrolesdeformulario(yaseamediantesutype,ocualquier
lmitesuperior/inferiorestablecidoenvaloresnumricos,fechasyhoras),puedenofreceradicionalmente
validacindeformularionativaotratareatediosa,que,hastaahora,requeraquelosdesarrolladorescrearan
resmasdeJavaScriptoutilizaranalgnscript/bibliotecadevalidacinyaexistente.
Nota:paraqueloscontrolesdeformularioseanvalidados,necesitantenerunatributoname,yaquesinelno
sernenviadoscomopartedelformulario.

required

Unodelosaspectosmscomunesdelavalidacindeformularioseslaimplementacindecampos
obligatorios,nopermitiendoqueunformularioseaenviadohastaqueciertaspiezasdeinformacinhayansido
introducidas.Estopuedehacerseahorasimplementeaadindoleelatributorequiredaunelementoinput,
selectotextarea.
<input type="text" required>

Figura10:LavalidacinenladoclientedeOperaenaccin,mostrandounerrorparauncamporequeridoque
hasidodejadovaco.

typeypattern
Comohemosvisto,losdesarrolladoresahorapuedenespecificarlostiposdeentradasqueesperanensus
camposdeformulario.Enlugardesimplementedefinircamposdeentradadetexto,losdesarrolladores
puedencreardeformaexplcitacamposdeentradaparacosascomonmeros,direccionesdecorreo
electrnicoyURLs.Comopartedesuvalidacinenelladocliente,losnavegadorespuedenahoracomprobar
quelosdatosintroducidosporelusuarioenestoscamposmsespecficoscoincidenconlaestructuraprevista.
Enesencia,losnavegadoresevalanlosvaloresdelaentradaenbaseaunpatrnintegradoquedefinecomo
debenserlasentradasvlidasenesostiposdeentradayleadvertiralusuariocuandosuentradanocoincida
conloscriterios.

Figura11:MensajedeerrordeOperaparadireccionesdecorreoeinvlidasenuncampodeentradaemail.
Paraotroscamposdeentradadetextoque,noobstante,debanseguirunaciertaestructura(porejemplo,
formulariosdeiniciodesesindondelosnombresdeusuarioslopuedancontenerunasecuenciaespecfica
deletrasminsculasynmeros),losdesarrolladorespuedenutilizarelatributopatternparaespecificarsu
propiaexpresinregularpersonalizada.
<input type="text" pattern="[a-z]{3}[0-9]{3}">

Soporteenlosnavegadores
Enelescritorio,Opera(http://www.opera.com)actualmentetienelaimplementacinmscompletadelos
nuevostiposdeentradaylavalidacinnativadelladocliente,peroelsoporteestenenlahojaderutade

todoslosotrosnavegadoresmsimportantestambin,porloquenopasarmuchotiempoantesdeque
podamosaprovecharestasnuevasherramientaspoderosasennuestrosproyectos.Peroyqusucedeconlas
versionesantiguasdelosnavegadores?
Pordiseo,losnavegadoresquenoentiendenlosnuevostiposdeentrada(comodateonumber)
simplementerecurrirnatratarloscomoentradasdetextoestndarnotanfcilesdeusarcomosus
contrapartesavanzadasdeHTML5,peroalmenospermitenqueunformulariosearellenado.

Resumen
EstoconcluyenuestrotutorialacercadeloselementosadicionalesdeformulariopresentesenelHTML5.
Nota:Estematerialfuepublicadooriginalmenteenhttp://dev.opera.com,disponiblecomoNuevas
caractersticasdeformulariodelHTML5(http://dev.opera.com/articles/view/newformfeaturesinhtml5/)
(ingls),escritoporPatrickLaukeyChristianHeilmannypublicadobajolalicenciaAtribucinNo
comercialCompartirIgualdeCreativeCommons3.0(http://creativecommons.org/licenses/byncsa/3.0/).
Retrievedfrom
"http://www.w3.org/community/webed/wiki/Es/Elementos_de_formulario_adicionales_del_HTML5"
Categories:Tutoriales|WSC|CEW
Thispagewaslastmodifiedon16May2012,at11:47.