Formularios

HTML 5
1
Nuevas
Etiquetas
Input
2
El Atributo type
Indicamos al navegador el tipo de control que
debe ejercer sobre el elemento <input>.
Ya en HTM nos acostumbramos a <input
type!"te#t" $> pero a partir de HTM%
podemos utili&ar una amplia gama
3
Number

Estetype valida automticamente que

los valores introducidos sean
numricos, con el consiguiente ahorro
de cdigo en la recepcin o validacin
de los formularios.
4
<form name="" action="" method="POST">
Introduce tu edad: <input type="number" name="edad">
<input type="submit" value="Enviar">
<form>
Range

Estetypees muy parecido al number , la

diferencia radica en que en este caso la nica
manera de especi!car el valor es mediante su
slider con sus correspondientes l"mites.
5
<form name="" action="" method="POST">
Introduce tu edad:
<input type="rane" name="edad" min="1!"
ma"="##" $tep="1" %a&ue="4'">
<input type="$u(mit" %a&ue=")n%iar">
<*form>
#el

Estenuevo typeresulta muy til en los

dispositivos mviles actuales.

El dispositivo mvil detecta que el input es de

tipo $tel% y al pulsar en l automticamente
sale el teclado telefnico del mvil para
insertar el nmero en cuestin.
+
<form name="" action="" method="POST">
Introduce tu T),)-O.O: <input type="te&"
name="te&efono">
<input type="$u(mit" %a&ue=")n%iar">
<*form>
Email

El elemento por defecto detecta que el campo

debe ser rellenado con contenido vlido de
una cuenta de email, por lo que mostrar una
& en el teclado y har las veri!caciones
pertinentes para cumplir los requisitos de una
direccin de email.
/
<form name="" action="" method="POST">
Introduce tu emai&: <input type="emai&"
name="emai&">
<input type="$u(mit" %a&ue=")n%iar">
<*form>
'olor

Representa una paleta (selector) de colores sin

necesidad de a*adir plugins ni cdigos
adicionales como ven"amos haciendo hasta
ahora. +s" con un solo clic, podemos elegir
fcilmente un color.
!
<form>Se&ecciona un co&or: <input name="co&or"
type="co&or" %a&ue="0f3f3f3"*><*form>
-earch

'on este type podremos decir en la validacin

del formulario que el campo contendr valores
de bsqueda, as" el propio input nos
proporciona un dato vlido y el teclado del
dispositivo mvil mostrar el botn $buscar%.
#
<form name="" action="" method="POST">
Introduce e& t1rmino de (2$3ueda: <input
type="$earch" name="(u$3ueda"><(r>
<input type="$u(mit" %a&ue=")n%iar">
<*form>
.laceholder

/n placeholder es un te0to que se muestra

para ayudar al usuario y darle informacin.

En cuanto se hace clic, en el input,

desaparece1
1'
45,

-e parece bastante a eltype tel de 2#345.

Este campo cuando se visuali6a en
dispositivos mviles facilita en el teclado las
teclas $.%, $7%, y $.com%.
11
8ate

Este elemento vale para representar en

nuestra 9eb undatepic,er o calendario,
el formato de la fecha devuelto es
$++++:33:88%.
12
<form>
<input type="date" name="fecha"><*form>
8atetime

#ypesimilar al anterior solo que este ltimo

adems de la fecha env"a tambin la hora. El
formato de fecha y hora devuelto es el
siguiente1 $++++:33:88#22133;%.

Este input aun no funciona en todos los

navegadores, en safari funciona a medias.
13
<form><input type="datetime" name="fecha"><*form>
8atetime:local

El mismo elemento datetimepero sin enviar la

6ona horaria. El formato devuelto es1 $++++:
33:88#22133%.
14
<form>
<input type="datetime6&oca&" name="fechayhora">
<*form>
3onth

#ype para representar mes y a*o con formato

$++++:33%.
15
<form>
<input type="month" name="me$">
<*form>
#ime

'on la insercin de este elemento en un

formulario facilitaremos la entrada de
datos para horas, el formato es1
$221331--%.
1+
<ee,

#ype para la insercin del nmero de la

semana de un a*o en cuestin. -u formato es
$====:<NN% >? %@ABC:<ADE.
1/
El atributo required
Al incluir el atributo required dentro
de un elemento <input>,
automticamente se hace obligatorio
su llenado y al ser un atributo tipo
booleano, solo se requiere su
presencia sin ms.
1!
.
1#
El atributo pattern
Este atributo es sencillamente
espectacular, se logra que se
verifique no solo la presencia de un
valor, sino que este valor debe
contener un formato, una longitud o
un tipo de dato especifico. Esto
ltimo se logra definiendo un patrn
con epresiones
2'
21