Definición destacada
¿Como funciona el comando en HTML5: 'datalist'?
Última modificación: 2024-06-18
Descripción detallada de <datalist> en HTML5
El 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.
Atributos de <datalist>
El elemento <datalist> tiene algunos atributos que pueden ser utilizados para especificar su comportamiento. A continuación se describen los más comunes:
- id: Es un atributo global que permite identificar de manera única al elemento
<datalist>dentro del documento HTML. Este atributo es crucial porque el elemento<input>refiere al<datalist>mediante esteid.
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>Atributos de <option>
El <datalist> puede contener uno o más elementos <option>. Cada <option> puede tener los siguientes atributos:
- value: Define el valor predefinido que se mostrará en la lista de opciones sugeridas. Este es el valor que se insertará en el
<input>si el usuario selecciona esa opción. - label (opcional): Proporciona una etiqueta alternativa que se puede mostrar en lugar del valor del atributo
value. - Otros atributos globales como
class,style, ytitleque podrían aplicarse para personalizar la apariencia y el comportamiento del elemento.
Uso de <datalist> en HTML5: Ejemplos
El 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.
Ejemplo Básico 1: Lista de Nombres de Navegadores
<!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.
Ejemplo Básico 2: Lista de Colores
<!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>.
Ejemplo Avanzado 3: Personalización con Atributo Label
<!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.
Conclusión
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.