How to Display Suggestions for Input Field in HTML ?
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.
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.
- 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.
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.