Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Los nuevos input HTML5 para formularios

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:

Tal y como sabréis tenemos muchas razones para usar estos input HTML5 y otras para no usarlos de momento:

  • PROS: Ahorro considerable de código combinando los nuevos input y atributos. De esta manera no necesitaremos realizar tantas validaciones usando PHP, jQuery o similares.
  • CONTRA: Al no estar estandarizado HTML5 hace que aún 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 :

Datalist input HTML5

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

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

Podéis ver la documentación y ejemplos en el post ‘Datalist en HTML5: Sugiere una lista de valores en un form‘.

Os dejo una imagen de ejemplo:

datalist HTML5keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Tenéis mas info y ejemplos en el post  ‘keygen HTML5: Un nuevo campo para la generación de claves‘.

output HTML5

Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.

Tened en cuenta que solo representa y no se recoge dicho dato en el envio del formulario. Podéis verlo en funcionamiento en el post ‘HTML5 output: operaciones matemáticas en tiempo real en tu form‘.

number input HTML5

Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

El post en el que hay más info es ‘HTML5 number input: Un nuevo campo de tipo numérico en el form‘.

Os dejo una imagen del elemento.

number input HTML5range input HTML5

Este input es muy parecido al HTML5 number input, la diferentecia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.

Podéis verlo en funcionamiento en el post ‘HTML5 range input: rangos de valores con barras de desplazamiento‘.

Y aquí una imagen.

range input html5tel input HTML5

Este nuevo input html5 resulta muy últil en los dispositivos móviles actuales.

El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del movil para insertar el número en cuestión.

Lo tenéis todo documentado en el post ‘HTML5 tel input: Campo de formulario para números de teléfono‘.

Os pongo un pantallazo capturado en mi iPhone.

HTML5 tel input

email input HTML5

Pues con este  la validación de campos de email va a ser tarea sencilla.

El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hara las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

Tenéis más info en el post ‘HTML5 email input: Validación automática de emails en formularios‘.

Imagen de ejemplo.

html5 email input tecladocolor input HTML5

Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.

Los ejemplos los podéis ver en el post ‘HTML5 color input: Paleta de colores hexadecimal para formularios‘.

Imagen de ejemplo de la paleta de colores.

html5 color inputsearch input HTML5

Con este input podremos decir en la validación del formulario que el campo contendrá valores de búsqueda, así el propio input nos porporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.

Más info en esta entrada del blog ‘HTML5 search input: Campo de búsqueda para formularios‘.

Imagen de ejemplo.

html5 search input iphoneurl input HTML5

Se parece bastante a el input tel de HTML5. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

Más info en el post ‘HTML5 url input: Un campo de formulario para urls‘.

Ejemplo.

HTML5 url input

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’.

Podéis ver toda la documentación y ejemplos en el post original ‘Date input HTML5: Un sencillo datepicker para tu formulario‘.

Os dejo una imagen de ejemplo.

date input html5datetime input HTML5

Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.

Podéis ver en funcionamiento y su documentación en el post ‘Datetime input HTML5: Un campo de fecha y hora para formularios‘.

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

datetime-local input HTML5

Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.

Podéis consultar su sintaxis y funcionamiento en el post ‘Input datetime-local HTML5: fecha y hora local sin timezone para formularios‘.

Os dejo una imagen de ejemplo:

datetime-local input html5Month input HTML5

Input para representar mes y año con formato ‘AAAA-MM’.

Su documentación y ejemplos la podéis encontrar en ‘Month input HTML5: Un campo de tipo mes para formularios‘.

Os dejo un pantallazo de su representación:

month input html5Time input HTML5

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

Podéis ver una amplia explicación de su uso en ‘Time input HTML5: Un campo de formulario para introducir la hora‘.

Y aquí tenéis una imagen:

time input html5Week input HTML5

Por último nos queda el input para la inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.

También tengo un post hablando sobre este elemento: ‘Week input HTML5: Un nuevo input para insertar semanas‘.

Os muestro una imagen de su funcionamiento:

week input html5

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies