In most cases, there is a field on forms that allows for auto-completion of user input. This can be achieved using the HTML <datalist>. The <datalist> tag works with the input tag to enable users to quickly fill in data on forms by presenting them with a dropdown list of pre-defined options. In this article, we will explain how to create an input suggestion form using HTML and CSS, and demonstrate how to use the <datalist> tag to enable the auto-completion feature on your website.
Note: The element’s id attribute used in the <datalist> tag should be equal to the element’s list attribute in the <input> tag which will help to bind them together.
Syntax:
<datalist> ... </datalist>
Preview:
Approach:
- Create a div with the class as a container. Inside this div, create another div with a class as a ‘text container’ that will contain the <input> tag & <datalist> tag.
- Declare the list attribute as a text container inside the <input> tag. Similarly, declare the id attribute as the same as the list attribute, inside the <datalist> tag.
- Now, create the drop-down list of programming languages for building the pre-defined options.
We have used google font to build some awesome input forms & for decorating the text. In order to use the google font, we need to import the following font URL in our stylesheet.
@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’);
Example : This example illustrates the use of the <datalist> tag to make input suggestions in 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 >
|
Output: