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