1
00:00:07,110 --> 00:00:15,030
The last concept that I'm going to show you is called data list in HTML forms.

2
00:00:15,750 --> 00:00:19,860
So what is data list in HTML?

3
00:00:20,310 --> 00:00:28,860
It is an element that is used to create a list of predefined options for an input element.

4
00:00:29,070 --> 00:00:37,110
And the options in the data list are displayed as suggestions to the user as the type.

5
00:00:37,380 --> 00:00:42,330
So let me demo for you to see how we are going to implement that.

6
00:00:42,600 --> 00:00:49,050
And I'm going to create one file called data list dot HTML.

7
00:00:50,670 --> 00:00:53,430
And it goes like.

8
00:00:55,500 --> 00:00:56,550
There are lists.

9
00:00:57,150 --> 00:01:07,490
And each one has that underline and the comment as that save it and let me open it as data list.

10
00:01:07,500 --> 00:01:11,070
So let's see the demo for this one.

11
00:01:11,070 --> 00:01:20,220
We are going to create some options about the user favorite browser, so you can use the select, but

12
00:01:20,220 --> 00:01:25,290
let's see how we can create that one using the data list.

13
00:01:25,290 --> 00:01:28,740
And let's bring in the label.

14
00:01:29,430 --> 00:01:33,390
And here I will say choose a browser.

15
00:01:33,390 --> 00:01:40,380
And next is let's bring in the input, add, save closing tag.

16
00:01:40,560 --> 00:01:46,530
Remember, impute a closing tax and we bring in list attribute.

17
00:01:46,530 --> 00:01:54,390
Then the value I will provide browsers because we want the user to choose from his or her favorite browser

18
00:01:54,570 --> 00:01:57,390
and next is we bring in the.

19
00:01:58,440 --> 00:02:01,920
Data lists as that.

20
00:02:02,340 --> 00:02:07,140
Then inside the data list, let's provide the options.

21
00:02:07,140 --> 00:02:11,940
So the first option is going to be self-closing closing.

22
00:02:13,060 --> 00:02:14,410
Supposed to be.

23
00:02:16,890 --> 00:02:17,670
Option.

24
00:02:18,650 --> 00:02:19,640
As that.

25
00:02:19,880 --> 00:02:24,470
And for the first value, I'm going to provide Chrome.

26
00:02:25,650 --> 00:02:28,200
Then I'm going to duplicate this.

27
00:02:29,030 --> 00:02:40,370
And provide Firefox and provide Internet Explorer, but it has been deprecated, so lets use Safari

28
00:02:40,880 --> 00:02:42,770
for Mac users.

29
00:02:43,160 --> 00:02:44,420
And opera.

30
00:02:44,420 --> 00:02:47,630
Mini opera mini.

31
00:02:48,020 --> 00:02:59,000
Then the last attribute is provide ID for the data list and provide the value as the list which is equal

32
00:02:59,000 --> 00:02:59,900
as this.

33
00:02:59,930 --> 00:03:01,670
So with this one.

34
00:03:02,520 --> 00:03:03,740
Let's save it.

35
00:03:03,750 --> 00:03:11,670
And as you can see, when I move my mouth on it, I have this beautiful dropdown and I can type chrome,

36
00:03:11,670 --> 00:03:16,400
as you can see, as I type is being filtering out the data.

37
00:03:16,410 --> 00:03:18,330
So let's say I want opera money.

38
00:03:18,330 --> 00:03:25,350
So when I type opera money, as you can see it is been selecting that how cool it is.

39
00:03:25,350 --> 00:03:29,110
So here is the HTML forms.

40
00:03:29,130 --> 00:03:32,220
Thanks for watching and catch you up in the next section.