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:

<input list="listacolores">

<datalist id="listacolores">
  <option value="Azul">
  <option value="Rojo">
  <option value="Amarillo">
  <option value="Negro">
  <option value="Blanco">
</datalist>

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

Aquí va el código fuente de la demo de ejemplo del atributo list HTML5.

<form name="formulario" id="formulario" action="032-atributo-list-html5.php" method="POST">
<!-- La datalist con id 'listas' y sus diferentes valores -->

Escribe un color (Azul, rojo, amarrillo, negro, verde): 
<datalist id="listas">
    <option value="azul">
    <option value="rojo">
    <option value="amarillo">
    <option value="negro">
    <option value="verde">
</datalist>

<!-- Asociamos al input la datalist 'listas' -->
    <input name="color" list="listas">
    <input type="submit" value="Enviar">
</form>

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.

<datalist id="listas">
    <option value="azul" label="color azul">
    <option value="rojo" label="color rojo">
    <option value="amarillo" label="color amarillo">
    <option value="negro" label="color negro">
     <option value="verde" label="color verde">
</datalist>

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>

<?php
//si hay post saco el valor
if($_POST)
 {
 echo "El color seleccionado es: ".$_POST['color'];
 }
?>

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.