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


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

Vamos a repasar esta etiqueta datalist de HTML5, es uno de las nuevos input, etiquetas  y atributos del form en HTML5 para formularios. Ver también atributo list HTML5.

Este nuevo elemento agrupa varios valores predefinidos que facilitan el autocompletado de un campo tipo input. De manera que el usuario según vaya escribiendo el navegador abre una lista desplegable con las diferentes opciones a seleccionar.

Lo que anteriormente veníamos haciendo con plugins en jQuery ahora lo podemos hacer fácilmente con esta nueva etiqueta de los formularios en HTML5.

En ningún momento se fuerza al usuario a elegir el valor del datalist, simplemente le sugiere ciertos valores.

Sintaxis de datalist HTML5

Voy a poneros la sintaxis de datalist extraída de su web oficial para que veáis de un vistazo su nomenclatura:

En el ejemplo de sintaxis vemos como primero declaramos un input con el nombre de la lista en el atributo ‘list’. Después ponemos la nueva etiqueta datalist con los diferentes valores de la lista y la relacionamos con el input mediante id ‘listacolores’.

Es decir, el atributo ‘list‘ del input y el ‘id’ del datalist tienen que coincidir, de lo contrario no se relacionarían y no saldría la lista de valores sugeridos.

Ejemplo de datalist en html5

Como a día de hoy (abril 2013) todavía no está estandarizado el HTML5, os recomiendo que los ejemplos los veáis con con Google Chrome, ya que es el navegador que más actualizado está con las funcionalidades HTML5.

Vamos a sugerir una serie de colores tal y como muestra la imagen inferior cuando comenzamos a escribir ‘verde’.

datalist html5Aquí va el código fuente de la demo de ejemplo de datalist HTML5.

Os explico el código de la demo:

  • Creamos un sencillo formulario con action POST.
  • Creamos una etiqueta <datalist> con un id ‘listas‘ con un conjunto de tags <option> para poner los colores sugeridos.
  • Relacionamos el <input> con el <datalist>  mediante el atributo ‘list’.

Si queremos dotar a los <option> de algo más de información podemos añadirles el atributo label.

Tipos de input compatibles

Los tipos de input más comunes que soportan datalist en HTML5 son:

  1. text
  2. url
  3. tel input
  4. color input
  5. range input
  6. datetime

Obtener el valor de un datalist HTML5 con PHP

Por último recogemos por POST el valor seleccionado del <datalist> del valor del <input>

Obtener el valor del datalist en HTML5 con jQuery

A petición del comentario, pongo un ejemplo para obtener el valor con jQuery. Aquí tenéis el 2º ejemplo de datalist HTML5.

Tal y como veis en el ejemplo, he realizado la obtención del valor con el método change() de jQuery. También podéis ver más ejemplos en el post de jQuery click().

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

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