All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

HTML Autocomplete From List

Last Updated : Jul 1, 2023

HTML Autocomplete From List

In this tutorial we will show you the solution of HTML autocomplete from list, in HTML there are many ways to with the help of which you are to able autocomplete your data from list.

Here, we are going to describe two ways with the help of which we are able to get autocomplete in html from list.

The first one is by using autocomplete attribute in html and other way is to done this with the help of datalist tag which is inbuilt tag of html.

Step By Step Guide On HTML Autocomplete From List :-

Now, here in below code we show you two ways which we already tell you.

The first one is used when you want from user to select any option from drop down list. It is different from select tag which we used in html forms.

But as similar to select, we also have to create options here.

Whereas in next method, we use autocomplete attribute. As we see in chrome also, that we enter the initials of our email, a drop down menu appears with the same of common characters which you enter.

Let us understand this with the example of html codes.

<!DOCTYPE html>
    <input type="text" list="json-datalist" placeholder="enter no. from 0 to 9">
    <datalist id="json-datalist">
        <option value="0">
        <option value="1">
        <option value="2">
        <option value="3">
        <option value="4">
        <option value="5">
        <option value="6">
        <option value="7">
        <option value="8">
        <option value="9">
        <label for="email">Email Address</label>
        <input type="email" name="email_name" id="email_id" autocomplete="on">
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page.
  4. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Here, the content to be showed on browser’s display is written here. Here, we show you two example mostly both are same.
  6. Here, first we create a datalist tag, which is similar to select tag and also we have to create options within this tag.
  7. Whereas in other side, we create an input tag with email type, you can create any type which you want. And in this we add an attribute with name autocomplete and we also have to give it value.
  8. There are two values of autocomplete tag and that are on and off. On is used if you want to turn you autocomplete method on where off is used to off this method. Here, we used on to turn on autocomplete.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we want to say that with the help of this article you learn about two different methods to complete one task.

As we already say that there are many methods to complete one task.

Hence, we will publish other sessions on same topic name also. I hope this tutorial on HTML autocomplete from list helps you.