Open In App

How to Display Suggestions for Input Field in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Screenshot-2024-01-03-234218

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.

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



Last Updated : 05 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads