(http://www.anerbarrena.

com)

Programacin y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y

(https://www.youtube.com/user/anerbarrena)

(https://plus.google.com/+AnerBarrena/posts)
(https://twitter.com/anerbarrena)
(https://www.facebook.com/Anerbarrenaweb)
(http://www.anerbarrena.com/feed/)

Inicio (http://www.anerbarrena.com)
HTML5 (http://www.anerbarrena.com/programacion/html5/) Formularios en HTML5

(http://www.anerbarrena.com/programacion/html5/form-html5/)

Los nuevos input HTML5 para formularios

6 Marzo, 2014

Formularios en HTML5 (http://www.anerbarrena.com/programacion/html5/form-html5/), HTML5

(http://www.anerbarrena.com/programacion/html5/), Nuevos input, etiquetas y atributos en HTML5
(http://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/)

4 comentarios (http://www.anerbarrena.com/nuevos-input-html5-3739/#disqus_thread)

Toca el turno de repasar cada uno de los nuevos input HTML5. Ya he ido haciendo post de cada uno de ellos, pero
ahora voy a realizar un listado y breve resumen de cada uno.

Otros post interesantes son:

Nuevos input de fecha y hora en HTML5 (http://www.anerbarrena.com/input-de-fecha-html5-3828/)

Los nuevos atributos HTML5 para inputs y formularios (http://www.anerbarrena.com/nuevos-atributos-

html5-4813/)

Lista de elementos y atributos obsoletos en HTML5 (http://www.anerbarrena.com/elementos-atributos-

obsoletos-html5-5165/)

Tal y como sabris tenemos muchas razones para usar estos input HTML5
(http://www.anerbarrena.com/programacion/html5/) y otras para no usarlos de momento:

PROS: Ahorro considerable de cdigo combinando los nuevos input y atributos. De esta manera no
necesitaremos realizar tantas validaciones usando PHP (http://www.anerbarrena.com/programacion/php/),
jQuery (http://www.anerbarrena.com/programacion/jquery/) o similares.
 CONTRA: Al no estar estandarizado HTML5 hace que an haya elementos que no se representen en
bastantes navegadores.

Voy a realizar un listado de cada elemento y posteriormente hago un breve resumen de cada elemento para
formularios en HTML5 (http://www.anerbarrena.com/programacion/html5/form-html5/):

Datalist (http://www.anerbarrena.com/datalist-html5-form-910/)

Keygen (http://www.anerbarrena.com/keygen-html5-933/)
Output (http://www.anerbarrena.com/html5-output-935/)
Number (http://www.anerbarrena.com/html5-number-input-form-1469/)

Range (http://www.anerbarrena.com/html5-range-input-1694/)
Tel (http://www.anerbarrena.com/html5-tel-input-1802/)

Email (http://www.anerbarrena.com/html5-email-input-1837/)
Color (http://www.anerbarrena.com/html5-color-input-2173/)
Search (http://www.anerbarrena.com/html5-search-input-2315/)

Url (http://www.anerbarrena.com/html5-url-input-2781/)
Date (http://www.anerbarrena.com/date-input-html5-2829/)
Datetime (http://www.anerbarrena.com/datetime-input-html5-3008/)
Datetime-local (http://www.anerbarrena.com/input-datetime-local-html5-3094/)

Month (http://www.anerbarrena.com/month-input-html5-3368/)
Time (http://www.anerbarrena.com/time-input-html5-una-campo-de-formaulario-para-introducir-la-hora-
3505/)

Week (http://www.anerbarrena.com/week-input-html5-3680/)

Datalist input HTML5

Este nuevo elemento aglutina varios valores predefinidos que facilitan el autocompletado de un campo tipo input.

Es decir, segn el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a
seleccionar. Es muy parecido a un combo o lista.

Podis ver la documentacin y ejemplos en el post Datalist en HTML5: Sugiere una lista de valores en un form
(http://www.anerbarrena.com/datalist-html5-form-910/).

Os dejo una imagen de ejemplo:

(http://www.anerbarrena.com/datalist-html5-form-910/)keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pblica que se enva al servidor y que posteriormente se usar para
seguir auntentificndonos en el sistema, y otra privada que se almacena localmente en el navegador.
Tenis mas info y ejemplos en el post keygen HTML5: Un nuevo campo para la generacin de claves
(http://www.anerbarrena.com/keygen-html5-933/).

output HTML5

Esta nueva etiqueta representa el resultado de un clculo entre los diferentes input de un formulario.

Tened en cuenta que solo representa y no se recoge dicho dato en el envio del formulario. Podis verlo en
funcionamiento en el post HTML5 output: operaciones matemticas en tiempo real en tu form
(http://www.anerbarrena.com/html5-output-935/).

number input HTML5

Este input valida automticamente que los valores introducidos sean numricos, con el consiguiente ahorro de
cdigo en la recepcin o validacin de los formularios.

El post en el que hay ms info es HTML5 number input: Un nuevo campo de tipo numrico en el form
(http://www.anerbarrena.com/html5-number-input-form-1469/).

Os dejo una imagen del elemento.

(http://www.anerbarrena.com/html5-number-input-form-
1469/)range input HTML5

Este input es muy parecido al HTML5 number input (http://www.anerbarrena.com/html5-number-input-form-1469/),

la diferentecia radica en que en este caso la nica manera de especificar el valor es mediante su slider con sus
correspondientes lmites.

Podis verlo en funcionamiento en el post HTML5 range input: rangos de valores con barras de desplazamiento
(http://www.anerbarrena.com/html5-range-input-1694/).

Y aqu una imagen.

(http://www.anerbarrena.com/html5-range-input-1694/)tel
input HTML5

Este nuevo input html5 (http://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/) resulta

muy ltil 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 movil para insertar el nmero en cuestin.

Lo tenis todo documentado en el post HTML5 tel input: Campo de formulario para nmeros de telfono
(http://www.anerbarrena.com/html5-tel-input-1802/).

Os pongo un pantallazo capturado en mi iPhone.

 (http://www.anerbarrena.com/html5-tel-input-1802/)

email input HTML5

Pues con este la validacin de campos de email va a ser tarea sencilla.

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 hara las verificaciones pertinentes para cumplir los requisitos de una direccin
de email.

Tenis ms info en el post HTML5 email input: Validacin automtica de emails en formularios
(http://www.anerbarrena.com/html5-email-input-1837/).

Imagen de ejemplo.
 (http://www.anerbarrena.com/html5-email-input-1837/)color input HTML5

Representa una paleta (selector) de colores sin necesidad de aadir plugins ni cdigos adicionales como venamos
haciendo hasta ahora. As con un solo click podemos elegir faclmente un color.

Los ejemplos los podis ver en el post HTML5 color input: Paleta de colores hexadecimal para formularios
(http://www.anerbarrena.com/html5-color-input-2173/).

Imagen de ejemplo de la paleta de colores.

(http://www.anerbarrena.com/html5-
color-input-2173/)search input HTML5

Con este input podremos decir en la validacin del formulario que el campo contendr valores de bsqueda, as el
propio input nos porporciona un dato vlido y el teclado del dispositivo mvil mostrar el botn buscar.

Ms info en esta entrada del blog HTML5 search input: Campo de bsqueda para formularios
(http://www.anerbarrena.com/html5-search-input-2315/).

Imagen de ejemplo.
 (http://www.anerbarrena.com/html5-search-input-2315/)url input HTML5

Se parece bastante a el input tel de HTML5 (http://www.anerbarrena.com/html5-tel-input-1802/). Este campo cuando

se visualiza en dispositivos mviles facilita en el teclado las teclas ., /, y .com.

Ms info en el post HTML5 url input: Un campo de formulario para urls (http://www.anerbarrena.com/html5-url-
input-2781/).

Ejemplo.

(http://www.anerbarrena.com/html5-url-input-2781/)
date input HTML5

Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es
AAAA-MM-DD.

Podis ver toda la documentacin y ejemplos en el post original Date input HTML5: Un sencillo datepicker para tu
formulario (http://www.anerbarrena.com/date-input-html5-2829/).

Os dejo una imagen de ejemplo.

(http://www.anerbarrena.com/date-input-
html5-2829/)datetime input HTML5

Input similar al anterior solo que este ltimo adems de la fecha enva tambin la hora. El formato de fecha y hora
devuelto es el siguiente: AAAA-MM-DDTHH:MMZ.

Podis ver en funcionamiento y su documentacin en el post Datetime input HTML5: Un campo de fecha y hora para
formularios (http://www.anerbarrena.com/datetime-input-html5-3008/).

Este elemento est sin implementar en casi todos los navegadores y solo funciona a medias en Safari.

datetime-local input HTML5

Ms de lo mismo, elemento idntico al datetime pero sin enviar la zona horaria. El formato devuelto es: AAAA-MM-
DDTHH:MM.

Podis consultar su sintaxis y funcionamiento en el post Input datetime-local HTML5: fecha y hora local sin timezone
para formularios (http://www.anerbarrena.com/input-datetime-local-html5-3094/).

Os dejo una imagen de ejemplo:

 (http://www.anerbarrena.com/input-
datetime-local-html5-3094/)Month input HTML5

Input para representar mes y ao con formato AAAA-MM.

Su documentacin y ejemplos la podis encontrar en Month input HTML5: Un campo de tipo mes para formularios
(http://www.anerbarrena.com/month-input-html5-3368/).

Os dejo un pantallazo de su representacin:

(http://www.anerbarrena.com/month-input-
html5-3368/)Time input HTML5

Con la insercin de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la
info enviada es: HH:MM:SS.

Podis ver una amplia explicacin de su uso en Time input HTML5: Un campo de formulario para introducir la hora
(http://www.anerbarrena.com/time-input-html5-una-campo-de-formaulario-para-introducir-la-hora-3505/).

Y aqu tenis una imagen:

(http://www.anerbarrena.com/time-input-html5-una-campo-de-formaulario-
para-introducir-la-hora-3505/)Week input HTML5

Por ltimo nos queda el input para la insercin del nmero de la semana de un ao en cuestin. Su formato es
YYYY-WNN > 2014-W07.
Tambin tengo un post hablando sobre este elemento: Week input HTML5: Un nuevo input para insertar semanas
(http://www.anerbarrena.com/week-input-html5-3680/).

Os muestro una imagen de su funcionamiento:

(http://www.anerbarrena.com/week-input-html5-3680/)

Post relacionados

1. Datalist en HTML5: Sugiere una lista de valores en un formulario

(http://www.anerbarrena.com/datalist-html5-form-910/)
2. HTML5 email input: Validacin automtica de emails en formularios
(http://www.anerbarrena.com/html5-email-input-1837/)
3. HTML5 search input: Campo de bsqueda para formularios (http://www.anerbarrena.com/html5-
search-input-2315/)
4. Datetime input HTML5: Un campo de fecha y hora para formularios
(http://www.anerbarrena.com/datetime-input-html5-3008/)
5. Time input HTML5: Un campo de formulario para introducir la hora
(http://www.anerbarrena.com/time-input-html5-una-campo-de-formaulario-para-introducir-la-hora-
3505/)
6. Los input de fecha HTML5 para formularios (http://www.anerbarrena.com/input-de-fecha-html5-
3828/)

Compartir 25 Megusta 25 3 Twittear Seguira@anerbarrena

(http://www.anerbarrena.com/input-de-fecha-html5-3828/)
Los input de fecha HTML5 para formularios (http://www.anerbarrena.com/input-de-fecha-html5-3828/)

(http://www.anerbarrena.com/htaccess-index-directorio-3898/)
Denir con .htaccess el index de un directorio (http://www.anerbarrena.com/htaccess-index-directorio-3898/)
4Comentarios AnerBarrena
1 Acceder

Recomendar 1 Compartir Ordenarporlosmsnuevos

netealaconversacin...

Cristhianhace2aos
Realmentetil,muyinteresante,muchsimasgracias.
Responder Compartir

AnerBarrena Moderador >Cristhian hace2aos

gracias!
Responder Compartir

Santiagohace2aos
Unartculomuyinteresante!
Responder Compartir

AnerBarrena Moderador >Santiago hace2aos

gracias
Responder Compartir

TAMBINENANERBARRENA

TodoslosbotonesdeFacebookparaponeren EjemplodejQuerypost()paracargaruna
tuweb pginaHTMLexterna
2comentarioshace2aos 15comentarioshaceunao
AnerBarrenaestosbotonessolomuestranlos AnerBarrenamealegro
datosexpuestos,saludos

HabilitarlacompresinGzipenWordPress jQueryselectors:Seleccionarycontrolar
mediantehtaccess elementosdelDOM
1comentariohace10meses 6comentarioshaceunao
AnaEstebangracias!!hepasadode55en AnerBarrenaperfecto,mealegro!!!unabrazo
pagespeeda90en1minuto!

Suscrbete d AadeDisqusatusitiowebAadeDisqusAadir Privacidad

PUBLICIDAD

LT I M O S P O S T
 PHP mail(): Enviar emails desde tu pgina web
o servidor (http://www.anerbarrena.com/php-
mail-enviar-emails-5417/)
7 Marzo, 2017
2 comentarios
(http://www.anerbarrena.com/php-mail-
enviar-emails-5417/#disqus_thread)

(http://www.anerbarrena.com/php-mail-enviar-emails-5417/)

Atributos height y width

para dar tamao a la
etiqueta video HTML5
(http://www.anerbarrena.com/atribu
height-y-width-video-html5-
5412/)
31 Enero, 2017
0 comentarios
(http://www.anerbarrena.com/atribu
height-y-width-video-html5-
5412/#disqus_thread)

(http://www.anerbarrena.com/atributos-height-y-width-video-html5-5412/)

Cmo eliminar la cache de los post de Facebook pasado un tiempo (http://www.anerbarrena.com/eliminar-cache-post-facebook-open-graph-

5401/)
26 Enero, 2017 0 comentarios (http://www.anerbarrena.com/eliminar-cache-post-facebook-open-graph-5401/#disqus_thread)
(http://www.anerbarrena.com/eliminar-cache-post-facebook-open-graph-5401/)

Cmo jar una entrada de

WordPress en la pgina de
inicio
(http://www.anerbarrena.com/como
jar-una-entrada-de-
wordpress-5404/)
23 Enero, 2017
0 comentarios
(http://www.anerbarrena.com/como
jar-una-entrada-de-wordpress-
5404/#disqus_thread)

(http://www.anerbarrena.com/como-fijar-una-entrada-de-wordpress-5404/)

Cmo aadir elementos con jquery en una web (http://www.anerbarrena.com/anadir-elementos-jquery-5312/)

17 Enero, 2017 0 comentarios (http://www.anerbarrena.com/anadir-elementos-jquery-5312/#disqus_thread)
(http://www.anerbarrena.com/anadir-elementos-jquery-5312/)

PUBLICIDAD

S G U E M E E N FA C E B O O K

Anerbarrenaweb
577Megusta

Megustaestapgina Compartir

Selprimerodetusamigosenindicarquelegustaesto.

TOP POST

jQuery load() (http://www.anerbarrena.com/jquery-load-html-div-460/), jQuery get()

(http://www.anerbarrena.com/jquery-get-5049/), jQuery post() (http://www.anerbarrena.com/jquery-post-
5064/), jQuery selectors (http://www.anerbarrena.com/jquery-selectors-selectores-4768/), jQuery each()
(http://www.anerbarrena.com/jquery-each-5297/), jQuery append() (http://www.anerbarrena.com/jquery-
append-5300/)
 Obtener el valor de un radio button con jQuery, comprobar si est seleccionado y checkearlo
(http://www.anerbarrena.com/value-radio-button-jquery-checked-1580/)
jQuery change() (http://www.anerbarrena.com/jquery-change-1879/), jQuery toggle()
(http://www.anerbarrena.com/jquery-toogle-mostrar-ocultar-divs-1728/), Selectores jQuery
(http://www.anerbarrena.com/jquery-selectors-selectores-4768/), Efectos jQuery
(http://www.anerbarrena.com/efectos-en-jquery-5026/)
PHP date(): Obtener da, mes, ao y hora actual con PHP (http://www.anerbarrena.com/php-date-1018/),
Compresin GZIP: Ahorrar ancho de banda en tu web (http://www.anerbarrena.com/compresion-gzip-ahorrar-
ancho-de-banda-5271/)
Date input HTML5: Un sencillo datepicker para tu formulario (http://www.anerbarrena.com/date-input-html5-
2829/), Grficos SVG (http://www.anerbarrena.com/etiqueta-svg-5174/), video HTML5
(http://www.anerbarrena.com/html5-video-player-multimedia-5241/), audio HTML5
(http://www.anerbarrena.com/etiqueta-html5-audio-5259/)
PHP array(): Tipos y ejemplos para recorrer arrays (http://www.anerbarrena.com/php-array-tipos-ejemplos-
3876/), Redirect 301 (http://www.anerbarrena.com/redirect-301-htaccess-204/), PHP mail()
(http://www.anerbarrena.com/php-mail-enviar-emails-5417/)
jQuery animate() (http://www.anerbarrena.com/jquery-animate-3787/), jQuery css()
(http://www.anerbarrena.com/jquery-css-4900/), jQuery on() y off() (http://www.anerbarrena.com/jquery-on-
off-4767/)

SGUEME EN TWITTER

Tweetspor@anerbarrena
AnerBarrenaretwitte

AyudaWordPress@ayudawp
Todoloquetienesquesabersobre.htaccessyalgunostrucosextra
ayudawp.com/todosobrehta

Insertar VerenTwitter

C AT E G O R A S

.htaccess Apache (http://www.anerbarrena.com/programacion/htaccess-apache/)

HTML5 (http://www.anerbarrena.com/programacion/html5/)
 Ejemplos y programacin de la API de HTML5
(http://www.anerbarrena.com/programacion/html5/device-api-dispositivo/)
Formularios en HTML5 (http://www.anerbarrena.com/programacion/html5/form-html5/)
Grficos SVG (http://www.anerbarrena.com/programacion/html5/graficos-svg/)
Nuevos input, etiquetas y atributos en HTML5
(http://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/)
Vdeo y audio HTML5 (http://www.anerbarrena.com/programacion/html5/video-audio/)
jQuery (http://www.anerbarrena.com/programacion/jquery/)
PHP y MySQL (http://www.anerbarrena.com/programacion/php/)
Funciones de cadenas en PHP (http://www.anerbarrena.com/programacion/php/cadenas-string/)
Funciones de fechas en PHP (http://www.anerbarrena.com/programacion/php/fechas/)
MySQL (http://www.anerbarrena.com/programacion/php/mysql/)
Recursos (http://www.anerbarrena.com/programacion/recursos/)
Facebook (http://www.anerbarrena.com/programacion/recursos/facebook-recursos/)
Google y Youtube (http://www.anerbarrena.com/programacion/recursos/google/)
SEO (http://www.anerbarrena.com/programacion/recursos/seo/)
Twitter (http://www.anerbarrena.com/programacion/recursos/twitter/)
WordPress (http://www.anerbarrena.com/programacion/recursos/wordpress/)

ABRIL 2017

L M X J V S D

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

Mar (http://www.anerbarrena.com/date/2017/03/)

WEBS AMIGAS

Egocast (http://www.egocast.es/)
Lesiones deportivas y dietas para adelgazar (http://www.ironcrowns.com)

ETIQUETAS
botones compartir redes sociales (http://www.anerbarrena.com/etiquetas/botones-compartir-en-redes-
sociales/)

escapar caracteres especiales (http://www.anerbarrena.com/etiquetas/escapar-caracteres-especiales/)

expresiones regulares (http://www.anerbarrena.com/etiquetas/expresiones-regulares/)

redirect 301 (http://www.anerbarrena.com/etiquetas/redirect-301/)

robots.txt (http://www.anerbarrena.com/etiquetas/robots-txt/)

script (http://www.anerbarrena.com/etiquetas/script/)

Sistemas de comentarios para tu web o WordPress (http://www.anerbarrena.com/etiquetas/sistema-de-

comentarios/)

Sitemap (http://www.anerbarrena.com/etiquetas/sitemap/)

Copyright @ Aner Barrena . Powered by WordPress and Valenti theme.

Poltica de cookies (http://www.anerbarrena.com/politica-de-cookies/)

Ms informacin sobre las cookies (http://www.anerbarrena.com/mas-informacion-sobre-las-cookies/)
Contactar (http://www.anerbarrena.com/contactar/)