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
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Etiquetado de los campos de formulario
Siguiente
Campo de texto para la dirección de correo electrónico