How to Display Suggestions for Input Field in HTML ? - GeeksforGeeks

09 Oct, 2021
Generally, we have seen most of the time, there is an input field that provides an autocomplete feature either by typing the specific input data or by seeing a drop-down list from pre-defined options while filling up the form. This feature can be designed & utilized using the HTML <datalist> tag in the form. The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill the data in the forms using select the data. In this article, we will learn to create an input suggestion form using HTML and CSS & will implement the <datalist> tag to enable the autocomplete feature in HTML. 
Syntax:
<datalist> ... </datalist>
Note: The element’s id attribute used in the <datalist> tag should be equal to the element’s list attribute in the <input> tag that will help to binds them together.
Approach:
Create a div with the class as a container. Inside of 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 programmingLanguages 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’);
We will understand the input field suggestion concept through the below example.
Example: This example illustrates the use of the <datalist> tag to make input suggestions in 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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?