La etiqueta <datalist>, agregada a un campo de texto, abre una lista de sugerencias para introducir el dato sobre el que se ha situado el foco. Este comportamiento es similar al de Google Suggest a la hora de introducir alguna palabra clave en la barra de búsqueda.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="UTF-8"> </head> <body> <form action=""> Escoja una fruta: <input type="text" list="frutas"> <datalist id="frutas"> <option value="Naranja"></option> <option value="Manzana"></option> <option value="Pera"></option> <option value="Ciruela"></option> </datalist> </form> </body> </html>
La etiqueta <datalist> contiene una lista de etiquetas <option> con las sugerencias. Estas etiquetas <option> deben poseer un atributo value.
La etiqueta <datalist> está ligada a un campo de formulario mediante un identificador id que se asocia con el atributo list de aquel.
Esta etiqueta está implementada en Internet Explorer 10+, Firefox 4.0+, Chrome 20.0+ y Opera 10+.
Suscripción
acceso ilimitado a todos los libros de ENI sin compromiso de permanencia
libro impreso o digital online