<datalist> en HTML5El elemento <datalist> en HTML5 proporciona una lista de opciones predefinidas para un elemento <input>. Es particularmente útil cuando se desea ofrecer al usuario una selección de valores sugeridos mientras se le permite la libertad de introducir uno que no esté en la lista.
<datalist>El elemento <datalist> tiene algunos atributos que pueden ser utilizados para especificar su comportamiento. A continuación se describen los más comunes:
<datalist> dentro del documento HTML. Este atributo es crucial porque el elemento <input> refiere al <datalist> mediante este id.Ejemplo de sintaxis:
<datalist id="browserList">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist><option>El <datalist> puede contener uno o más elementos <option>. Cada <option> puede tener los siguientes atributos:
<input> si el usuario selecciona esa opción.value.class, style, y title que podrían aplicarse para personalizar la apariencia y el comportamiento del elemento.<datalist> en HTML5: EjemplosEl uso de <datalist> es bastante sencillo. A continuación, se presenta una guía paso a paso y algunos ejemplos para ilustrar su aplicación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de datalist</title>
</head>
<body>
<form>
<label for="browser">Elige tu navegador:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist>
<input type="submit">
</form>
</body>
</html>En este ejemplo, el elemento <input> tiene un atributo list que referencia al id del <datalist>. Esto vincula el campo de entrada con la lista de opciones.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de datalist con colores</title>
</head>
<body>
<form>
<label for="color">Elige un color:</label>
<input list="colors" id="color" name="color">
<datalist id="colors">
<option value="Rojo">
<option value="Verde">
<option value="Azul">
<option value="Amarillo">
<option value="Negro">
</datalist>
<input type="submit">
</form>
</body>
</html>Aquí hemos creado una lista de colores , con las opciones predefinidas. El usuario puede seleccionar uno de los colores sugeridos en la lista desplegable proporcionada por el <datalist>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo avanzando de datalist</title>
</head>
<body>
<form>
<label for="fruit">Elige una fruta:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="Manzana" label="? Manzana">
<option value="Plátano" label="? Plátano">
<option value="Naranja" label="? Naranja">
<option value="Uva" label="? Uva">
<option value="Fresa" label="? Fresa">
</datalist>
<input type="submit">
</form>
</body>
</html>Aquí se usa el atributo label en los elementos <option>, lo que ofrece una etiqueta más descriptiva con emojis a cada opción de fruta.
El elemento <datalist> en HTML5 es una herramienta poderosa para mejorar la experiencia del usuario al llenar formularios, proporcionando una lista de opciones sugeridas mientras permite entradas personalizadas. Los atributos y estructuras simples de <datalist> lo convierten en una excelente opción para listas de opciones flexibles y amigables.