En este artículo, diferenciaremos las dos etiquetas: <lista de datos> y etiqueta <seleccionar> . Generalmente, ambas etiquetas se utilizan para elegir una opción de la lista dada. Pero la principal diferencia entre ambos es que en la etiqueta <datalist> el usuario puede ingresar su propia entrada y agregarla como una opción con la ayuda del elemento <input> mientras que la etiqueta <select> no proporciona esta función.
Etiqueta HTML <datalist>: esta etiqueta especifica las opciones predefinidas para un elemento <input>. Esta etiqueta también brinda la función de autocompletar para el elemento <input> de HTML. Al igual que una vez que el usuario comienza a escribir el elemento de entrada de la etiqueta <datalist>, el usuario verá las opciones predefinidas que comienzan con la letra o palabra escrita por el usuario. Tenga en cuenta que para usar la etiqueta <datalist>, la identificación de la etiqueta debe ser la misma que la del atributo del elemento <input>.
Sintaxis:
<datalist id="courses"> <option value="DSA"> <option value="ML and AI"> </datalist>
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h3>Using Datalist</h3> <label for="courses"> Choose your favorite course from the list: </label> <input list="courses" name="course" id="course"> <datalist id="courses"> <option value="Java"> <option value="C++"> <option value="Python"> <option value="DSA"> <option value="ML and AI"> </datalist> <p style="color: gray;"> User can choose an option from a given options <br>and also give an input and filter values from the option list. </p> </body> </html>
Producción:
Etiqueta HTML <select>: esta etiqueta crea una lista de menú desplegable en una página web que se usa principalmente en los formularios en línea que todos usamos para recopilar la entrada del usuario. La etiqueta <select> contiene la etiqueta <option> para mostrar la lista de opciones disponibles en la lista desplegable. La etiqueta tiene varios atributos que incluyen <nombre>, <enfoque automático>, etc.
Sintaxis:
<select id="courses"> <option value="Java">Java</option> <option value="C++">C++</option> </select>
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h3>Using Select</h3> <label for="courses"> Choose your favorite course from the list: </label> <select id="courses"> <option value="Java">Java</option> <option value="C++">C++</option> <option value="Python">Python</option> <option value="DSA">DSA</option> <option value="ML and AI">ML and AI</option> </select> <p style="color: gray;"> User has to choose any one option from a list. </p> </body> </html>
Producción:
Diferencias entre la etiqueta <datalist> y <select>
|
etiqueta <seleccionar> |
etiqueta <lista de datos> |
| El usuario puede elegir solo una opción de la lista dada. | El usuario puede elegir cualquier opción de la lista dada, pero también puede usar su propia entrada. |
| Esta etiqueta es un tipo de entrada de formulario. | Esta etiqueta no es un tipo de entrada de formulario. |
| El usuario tiene que escanear una larga lista para seleccionar una opción. | El usuario puede ingresar fácilmente la opción y obtener las sugerencias y luego puede ser elegido por el usuario. |
| El usuario puede estar restringido a una lista de opciones. | El usuario no está restringido por la lista de opciones. |
| No proporciona la función de autocompletar. | Proporciona la función de autocompletar. |
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA