En general, hemos visto la mayor parte del tiempo, hay un campo de entrada que proporciona una función de autocompletar, ya sea escribiendo los datos de entrada específicos o viendo una lista desplegable de opciones predefinidas mientras completa el formulario. Esta función se puede diseñar y utilizar utilizando la etiqueta HTML <datalist> en el formulario. La etiqueta <datalist> se utiliza para proporcionar la función de autocompletar en los archivos HTML. Se puede usar con una etiqueta de entrada para que los usuarios puedan completar fácilmente los datos en los formularios usando seleccionar los datos. En este artículo, aprenderemos a crear un formulario de sugerencia de entrada utilizando HTML y CSS e implementaremos la etiqueta <datalist> para habilitar la función de autocompletar en HTML.
Sintaxis:
<datalist> ... </datalist>
Nota: El atributo de identificación del elemento utilizado en la etiqueta <datalist> debe ser igual al atributo de lista del elemento en la etiqueta <input> que ayudará a unirlos.
Acercarse:
- Crea un div con la clase como contenedor. Dentro de este div, crea otro div con una clase como un contenedor de texto que contendrá la etiqueta <input> y la etiqueta <datalist>.
- Declare el atributo de la lista como lenguajes de programación dentro de la etiqueta <input>. De manera similar, declare el atributo id como el mismo que el atributo list, dentro de la etiqueta <datalist>.
- Ahora, cree la lista desplegable de lenguajes de programación para construir las opciones predefinidas.
Hemos utilizado la fuente de Google para crear algunos formularios de entrada impresionantes y para decorar el texto. Para usar la fuente de Google, debemos importar la siguiente URL de fuente en nuestra hoja de estilo.
@importar url(‘https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap’);
Entenderemos el concepto de sugerencia de campo de entrada a través del siguiente ejemplo.
Ejemplo: Este ejemplo ilustra el uso de la etiqueta <datalist> para hacer sugerencias de entrada en HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto Condensed", sans-serif;
background-color: green;
padding: 40px 550px;
}
h1,
h3 {
font-family: Arial;
}
.container {
margin: 150px auto;
font-size: 18px;
color: white;
}
.container input {
margin-top: 4px;
height: 50px;
width: 100%;
outline: none;
border: none;
padding: 0 20px 0 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>HTML <datalist> Tag</h3>
<label for="programmingLanguages">
Choose Your Favourite Programming Language:
</label>
<div class="text-container">
<input type="text" list="programmingLanguages"
placeholder="Enter Here" />
<datalist id="programmingLanguages">
<option value="Objective C">Objective C</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Cobol">Cobol</option>
<option value="Go">Go</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="Pascal">Pascal</option>
<option value="Perl">Perl</option>
<option value="R">R</option>
<option value="Swift">Swift</option>
</datalist>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhartik021 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA