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


Atributo list HTML5 para las etiquetas datalist y option

Vamos a repasar el atributo list HTML5, anteriormente hablé sobre la etiqueta datalist HTML5 la cual permite establacer una serie de valores predefinidos en etiquetas de tipo input.

Sintaxis del atributo list HTML5

Voy a poneros la sintaxis de datalist extraída de su web oficial:

Os explico el código superior:

  • Vemos como el atributo list está asociado a un input.
  • Después ponemos la etiqueta datalist HTML5 con los diferentes valores de la lista y la relacionamos con el input mediante el 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 mientras se escribe.

Ejemplo del atributo list html5

Este ejemplo del atributo HTML5 lo he realizado con Google Chrome, 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 del atributo list 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’ y valor ‘listas’.

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 y list HTML5 son:

  1. text
  2. url input
  3. number input
  4. tel input
  5. email input
  6. color input
  7. range input
  8. search input
  9. date input
  10. datetime input
  11. datetime-local
  12. month input
  13. time input
  14. week input

Obtener el valor de un datalist HTML5 con PHP

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

Listado de los nuevos atributos HTML5

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

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de 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

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr