Índice

Campo de texto con lista de sugerencias

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

images/CAP09IMG23.png