HTML | Atributo de lista – Part 1

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: 
 

list

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: 
 

list

Después de hacer clic en el botón: 
 

list

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

Deja una respuesta

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