The last concept that I'm going to show you is called data list in HTML forms.
So what is data list in HTML?
It is an element that is used to create a list of predefined options for an input element.
And the options in the data list are displayed as suggestions to the user as the type.
So let me demo for you to see how we are going to implement that.
And I'm going to create one file called data list dot HTML.
And it goes like.
There are lists.
And each one has that underline and the comment as that save it and let me open it as data list.
So let's see the demo for this one.
We are going to create some options about the user favorite browser, so you can use the select, but
let's see how we can create that one using the data list.
And let's bring in the label.
And here I will say choose a browser.
And next is let's bring in the input, add, save closing tag.
Remember, impute a closing tax and we bring in list attribute.
Then the value I will provide browsers because we want the user to choose from his or her favorite browser
and next is we bring in the.
Data lists as that.
Then inside the data list, let's provide the options.
So the first option is going to be self-closing closing.
Supposed to be.
Option.
As that.
And for the first value, I'm going to provide Chrome.
Then I'm going to duplicate this.
And provide Firefox and provide Internet Explorer, but it has been deprecated, so lets use Safari
for Mac users.
And opera.
Mini opera mini.
Then the last attribute is provide ID for the data list and provide the value as the list which is equal
as this.
So with this one.
Let's save it.
And as you can see, when I move my mouth on it, I have this beautiful dropdown and I can type chrome,
as you can see, as I type is being filtering out the data.
So let's say I want opera money.
So when I type opera money, as you can see it is been selecting that how cool it is.
So here is the HTML forms.
Thanks for watching and catch you up in the next section.