Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Display Suggestions for Input Field in HTML ?

  • Difficulty Level : Expert
  • Last Updated : 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<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:

input suggestion




My Personal Notes arrow_drop_up
Recommended Articles
Page :