Principal dificultad de los

formularios?
Validacin!
Soluciones HTML5:
Nuevos tipos de input
nuevos atri!utos
auto"valida!les
#on el atri!uto tpe indicamos
al nave$ador el tipo de control
%ue de!e e&ercer so!re el
elemento 'input()
*a en HTML nos acostum!ramos
a 'input tpe+,te-t, .( pero a
partir de HTML5 podemos
utili/ar una amplia $ama:
Searc0:
'input tpe+,searc0,(
"1otn 2-3 para 2limpiar3
"No permite saltos de l4nea
"5e$rada en 2te-t3
Tel:
'input tpe+,tel,(
"#on el tel input HTMl5 se pueden validar
f6cilmente los campos de formularios en
los %ue se vaan a introducir n7meros de
tel8fono)
9:L:
'input tpe+,url,(
Valida %ue sea una 9:L a!soluta
;mail:
'input tpe+,email,(
Verifica %ue la casilla sea v6lida)

Puede llevar el atri!uto multiple en ese caso
acepta varias casillas separadas por comas)
Num!er:
'input tpe+,num!er,
min+,<, ma-+,=<<,
step+,=<, value+,5<,(
>ormato: "=?@A5)BCDeEF<
Gpuede ser ne$ativoH usa punto para decimalesH
e para e-ponenteH m6s
si$no potenciaI
:an$e:
'input tpe+,ran$e,
min+,<, ma-+,=<<, step+,=<,
value+,5<,(
9sar si no importa la precisin del n7meroH
sino la usa!ilidad)
5ate:
'input tpe+,date,(
Puede llevar minH ma- Gran$o permitidoI
step Gpor defaultH de a = d4aI
>ormato: ?<=="<F"=F
5atetime:
'input tpe+,datetime,(
>ec0a 0ora en formato 9T#:
?<=="<5"=FT=<:55:5F)<<="<@:<<
Mont0:
'input tpe+,mont0,(
"Mismos atri!utos %ue 5ate GminH ma-H stepI
">ormato: ?<=="<5
-vencimiento de tarjeta de crdito?
JeeK:
'input tpe+,LeeK,(
Mismos atri!utos %ue 5ate GminH ma-H stepI
>ormato: ?<=="J=C
Time:
'input tpe+,time, min+,==:@<,
ma-+,?@:@<, step+,B<<,(
Mismos atri!utos %ue date)
>ormato: ==:5F
>ormato con se$undos GopcionalesI: ==:5F:5F
#olor:
'input tpe+,color,(
Mpera ==E
Ntri!utos nuevos
Multiple
'input tpe+,file, multiple+,true,(
Se usa en inputs de tipo file o email
Nutocomplete
'input tpe+,te-t,
autocomplete+2on3( Gpor defaultI
'input tpe+,te-t,
autocomplete+2off3(
#ampos o!li$atorios
'form(
'input tpe+,email, id+,casilla, re%uired(
'input tpe+,su!mit, value+,Su!scri!irse,(
'.form(
Nutofocus
'input tpe+,te-t, autofocus(
Ga un solo campoH o solo tomar6 el 7ltimoI
Place0older
'input tpe+,te-t,
place0older+,;scri!a su nom!re,(
Gtener en cuenta %ue el place0older se
esconde si 0a autofocusI
Pattern
'la!el(
Nro) de Tar&eta de #r8dito:
'input pattern+,O<"FPQ=@H=BR,(
'.la!el(
5atalist Gauto"su$$estI
'input tpe+,url, name+,diario, list+,su$erencias,(

'datalist id+,su$erencias,(
'option la!el+,La Nacin,
value+,0ttp:..LLL)lanacion)com)ar,('.option(
'option la!el+,#lar4n,
value+,0ttp:..LLL)clarin)com,('.option(
'option la!el+,P6$ina =?,
value+,0ttp:..LLL)pa$ina=?)com)ar,('.option(
'option la!el+,Snfo!ae,
value+,0ttp:..LLL)info!ae)com,('.option(
'.datalist(
No validar:
'form novalidate(
Para usar validacin propia
Gcon TavaScriptI

#ompati!ili/ar
formularios
para nave$adores
vie&os
0ttps:..$it0u!)com.ranseddon.H5>