Otro tipo de lista que se puede utilizar es una lista de datos. Esto es nuevo en HTML5. El La lista de datos es como una lista desplegable de opciones, sólo que la parte desplegable no aparecen hasta que empiezas a escribir. Los elementos de su lista aparecen entonces, permitiendo el usuario para seleccionar un elemento. Sólo está soportado en Firefox y Opera, en el en el momento de escribir. Esto es lo que parece antes de empezar a escribir:

Listas de datos en HTML 5

Así que parece un cuadro de texto normal.

Sin embargo, cuando haga clic en el interior del cuadro de texto y escriba una carta, verá esto en Firefox:

Listas de datos en HTML 5

Los elementos de su lista aparecerán.

Cuando seleccionas un elemento, cambias el valor:

Listas de datos en HTML 5

El código HTML5 de la lista de datos anterior es el siguiente:

TIPO DE ENTRADA="Texto" LIST="zip_codes">

DATALIST ID="zip_codes">

VALOR DE OPCIÓN="AL" LABEL="ALABAMA"
VALOR DE OPCIÓN="AK" LABEL="ALASKA"
LABEL="AMERICAN SAMOA"
<OPTION VALUE="AZ" LABEL="ARIZONA"
VALOR DE OPCIÓN="AR" LABEL="ARKANSAS"
OPTION VALUE="CA" LABEL="CALIFORNIA"
VALOR DE OPCIÓN="CO" LABEL="COLORADO"
VALOR DE OPCIÓN="CT" LABEL="CONNECTICUT "*;

Todavía tienes un TIPO DE ENTRADA. Este es de texto. Fíjate en el atributo LIST, sin embargo. Necesitas esto para que coincida con la identificación de la etiqueta de DATALISTA.

DATALIST viene después del código de entrada, y tiene una etiqueta de cierre de DATLIST. Para cada ...en tu lista tienes un VALOR y una ETIQUETA. La ETIQUETA es el texto que aparece en la lista. El VALOR es a lo que cambia cuando se selecciona un elemento. Es el también el valor que se envía cuando se procesa el formulario.

Ten en cuenta que en el navegador de Opera, verás esto tan pronto como hagas clic en el interior de la lista de datos:

Listas de datos en HTML 5

Así que se muestran el VALOR y la ETIQUETA, lo que podría ser útil.

Lo que no es útil es el tratamiento de las listas de datos de Safari, todo lo que hay después sus etiquetas de la Lista de Datos serán ocultadas. Así que si tienes un botón de envío después de un Data Lista, ¡los usuarios de Safari no la verán! Una solución es poner una etiqueta final para todos tus OPCIONES:

VALOR DE OPCIÓN="AL" LABEL="ALABAMA"/OPCIÓN;

El botón de envío reaparecerá entonces. Sin embargo, la Lista de datos no lo hará.

Y eso es todo para los elementos del formulario HTML5. Pruébelos en diferentes navegadores, y ver lo que funciona y lo que no. No te olvides de añadir algo de CSS para animar sus elementos de forma!

En la siguiente sección, veremos cómo presentar sus elementos de forma.

Fechas y horas | diseños de formularios HTML