El atributo de lista en HTML se usa para identificar una lista de opciones predefinidas para un elemento <input> para sugerir al usuario.
Uso: este atributo es utilizado por el elemento <input >.
Sintaxis:
<input list="name">
Donde, name es una string que funcionará como id y se usará para vincular el elemento <input> con el elemento <datalist>.
Los siguientes programas ilustran el atributo de lista :
Valores de atributos:
- datalist_id: se usa para especificar el Id de la lista de datos que se usará para hacer un enlace con el elemento de entrada.
Programa 1:
html
<!DOCTYPE html> <html> <head> <title>HTML list Attribute</title> </head> <body> <h1 style = "color:green">HTML list Attribute</h1> <form action=""> <label>Your Cars Name: </label> <input list="cars"> <datalist id="cars"> <option value="BMW"/> <option value="Bentley"/> <option value="Mercedes"/> <option value="Audi"/> <option value="Volkswagen"/> </datalist> </form> </body> </html>
Producción:
Programa 2:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML | list Attribute</title>
</head>
<body style = "text-align:center">
<h1 style = "color:green">HTML list Attribute</h1>
<form action="">
<label>Your Cars Name: </label>
<input list="cars" id="carsInput">
<datalist id="cars">
<option value="BMW"/>
<option value="Bentley"/>
<option value="Mercedes"/>
<option value="Audi"/>
<option value="Volkswagen"/>
</datalist>
<button onclick="geek()" type="button">
Click Here
</button>
</form>
<p id="output"></p>
<script type="text/javascript">
function geek(){
var o1 = document.getElementById("carsInput").value;
document.getElementById("output").innerHTML = "You select "
+ o1 + " option";
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con el atributo de lista se enumeran a continuación:
- Google Chrome 20.0
- Internet Explorer 10.0
- Firefox 4.0
- Ópera 9.6
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA