In the session, let us learn about the next form element data and this data is used to provide a set of predefined options on an input tag. So, you will have an input tag with a list of options. The user can either choose from the list of options that are available, ah, he can input his own data. So, basically a data list provides an auto completed auto completion feature on an input tag, how to provide the option for that you have to go into the data list, you will have a separate input type for binding them together you need to use the list attribute in input tags. How to convert example, I have got an input tag within this attribute. And again, I've got the data with a set of options to bind them together.

Using the ID of the data and binding it to the list attribute. If you see closely, this data list is similar to drop down. In drop down also you have a list of options, and you allow the user to select either one value or many values. First, let us see an example of how to use this data list. And we will discuss the difference between the data list and the drop down. Let me go back to sublime HTML page with a simple form tag.

Let me now go and add the data and the data list. Id equal to some name. I'm going to use a list of cities where I have given ID equal to city. Next, I need to go in for option options value equal to specify a value. You can play option tab here it says you don't have to specify any value outside the option In fact, let me add on the stock options. My data list is ready.

Next, let me add the input tab input list is equal to, I have to give the same value that I have given for the ID of data and the size of the city. I want to know what is the value that is getting selected, so I'm giving a name also, I'm giving it a cm city. Let me add a label to city. Let me save this. Let me open it in the browser. Now the output has come, you can see it has just a simple input tab.

If I keep the cursor I will have a drop down. When I click this, I will get the list of options. Either I can select from this option, or I can do my own value, like I can just pass on my own value. So with the help of data analysts, you are giving an option to the user. I am You can choose from the predefined set of values are you can input your own values. If you want the user to select only from the desktop values going for a drop down, if you want to give an option for the user to yield his one value, then in that scenario, use a data let's say for example, you when you go into certain website wherein they are asking for the scores, which you want to select, there are a number of options which are available, what they used to give us together with a desktop option, they will have one other category like other when you select other it is given command box wherein you have to give the name of the code which is not available in the drop down.

But with the help of data. You can give your own option also. So, as a developer, you you want the user to choose his own option or give his own options. You go in for data lists, don't use drop down Now also see whether the output is coming over here. Now we need a submit button so that when we click the submit button you can see from the URL itself. Now let me add a submit via the submit button.

Let me come and refresh. So, I have got a input tag with a submit button. Let me just select the value from the list. Let me select click now I will maximize the console Have a look what is the value of pm city Bangalore whatever I have given over there are whatever I have selected is assigned to the CM city city is nothing but the name of the input tab. Let me go back let me input my own value. Let me select click.

Now again you see em city equal to Chennai, we can understand with the help of data unless you are giving an option to the user either select from the three to find the stock options which are available. Ah give your own options or give your own choice Now, let us discuss about the difference between a dropdown and this data we have discussed one point in case of data that the user can select from the predefined list of options are we can give his own choice. In case of dropped off, it is not possible, the user has to select only from the set of predefined options which are given over there. And in case of drop down, the user can select either one value or many value, you know how we can do that by using this multiple attribute. But in case of data loss, the user can choose only one value either in short choice are from the predefined list.

And the third point is in case of a drop down you can have one name for our one value for the label and one value that has to be carried to the back end. In case of data lists, both has to be safe, whatever you are specifying in value, that only will be Carry to the backend. I mean to say that whatever you're showing to the user in case of drop down maybe the front whatever you are assigning to value may be different. already we have discussed while working with select. So that is what is listed out here, the differences between data list and select next session, let us learn about the new input types that are from html5 data and thank you