Campos de texto con lista de valores predefinidos – Datalist (HTML5)

Usando datalist, una aplicación puede definir una lista de resultados a mostrar a un usuario en forma de lista desplegable. Éste puede elegir entre seleccionar el resultado de la lista sugerida o escribir libremente el texto que desee.

Las opciones se han de emparejar con un datalist y éste especificarlo como id  en el atributo list del input.

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option>
  <option value="Orange"></option>
<option value="Peach"></option>
</datalist>

datalist está soportado por las últimas versiones de Firefox, Opera e Internet Explorer después de su versión 10, con lo que no habrá mucho problema a la hora de utilizarlo. Si no estamos seguros si el navegador lo soporta, se puede utilizar lo siguiente:

<datalist id="fruits">
  Pick your favorite fruit
  <select name="fruit_sel">
  <option value="Apple">Apple</option> 
  <option value="Orange">Orange</option> 
  <option value="Peach">Peach</option> 
  </select>
  or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

Si datalist está disponible en el navegador todos los elementos de la lista estará ocultos.

Demohttp://demo.agektmr.com/datalist/

Entradas relacionadas:

  1. Validar formulario en HTML5
  2. Usando HTML5 localStorage en un formulario
  3. Utilización de LDAP con PHP
  4. Temporizador en javascript
  5. “Best practice” para SEO
Etiquetado con: , , ,
Publicado en: Programación

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*