1
00:00:07,450 --> 00:00:10,200
Let's continue with HTML.

2
00:00:10,210 --> 00:00:18,790
Forbes And in this video, we are going to create multiple and single select.

3
00:00:18,970 --> 00:00:25,770
So let's get back to Visual Studio Code and explore more inside the forms.

4
00:00:25,780 --> 00:00:30,880
I'm going to create one file and I'll call it a select.

5
00:00:32,369 --> 00:00:37,290
Remember that select is also part of form input.

6
00:00:37,470 --> 00:00:39,330
All right, So here you go.

7
00:00:39,330 --> 00:00:49,200
Let me scaffold the template and I'll call this one as multiple and single select.

8
00:00:49,770 --> 00:00:50,100
All right.

9
00:00:50,100 --> 00:00:53,130
So over here as multiple.

10
00:00:53,760 --> 00:01:00,270
And let me underline it and let's open it as that.

11
00:01:00,420 --> 00:01:04,370
So let me show you how we are going to make use of it.

12
00:01:04,379 --> 00:01:08,670
And let me add a comment as multiple select.

13
00:01:08,670 --> 00:01:15,210
For the meantime, we are going to work with the single select this one.

14
00:01:15,210 --> 00:01:18,270
Help us to choose from options.

15
00:01:18,270 --> 00:01:20,300
So let's see how I'm going to do it.

16
00:01:20,310 --> 00:01:27,990
So we bring in the label to give more description about what we want the user to choose for.

17
00:01:28,020 --> 00:01:35,850
So for this, we want the user to select from his or her favorite programming languages or frameworks

18
00:01:35,850 --> 00:01:37,060
or libraries.

19
00:01:37,080 --> 00:01:39,630
So I will say select.

20
00:01:40,740 --> 00:01:44,510
You are based programming language.

21
00:01:44,520 --> 00:01:54,750
So we bring in select and close it as that and for select are going to provide name attribute.

22
00:01:54,900 --> 00:02:01,200
For the meantime, we are pretending or assuming that we are willing to send the data to back and we

23
00:02:01,200 --> 00:02:04,050
need to provide the name attribute.

24
00:02:04,050 --> 00:02:09,580
And here is about languages, that is programming languages.

25
00:02:09,600 --> 00:02:17,190
If you get to back end development to more specific MongoDB, we are going to use this one as a property

26
00:02:17,190 --> 00:02:18,140
on a model.

27
00:02:18,150 --> 00:02:25,560
But for the meantime, let's assume that then inside the select we are going to provide the options

28
00:02:25,560 --> 00:02:28,650
that we want the user to choose from.

29
00:02:28,740 --> 00:02:36,420
And it goes like this We provide the first programming language as JavaScript.

30
00:02:36,720 --> 00:02:39,960
With this one, save it and let's have a look.

31
00:02:39,960 --> 00:02:49,470
As you can see, we have JavaScript being here and I want the selects your programming language to be

32
00:02:49,470 --> 00:02:53,250
on top of the select with this one.

33
00:02:53,250 --> 00:03:01,920
Can you tell me the kind of element that is for the label and then the select looking at the behavior

34
00:03:01,920 --> 00:03:06,770
that is the arrangement from left to right, but not on top of each other?

35
00:03:06,780 --> 00:03:07,920
Can you tell me?

36
00:03:08,070 --> 00:03:14,520
Well, the answer is that the label and then the select are inline element.

37
00:03:14,520 --> 00:03:18,690
That is why they are moving from left to right.

38
00:03:18,690 --> 00:03:28,050
So I want the label to be on top of the select so I can put this one inside diff so that I'm going to

39
00:03:28,050 --> 00:03:28,860
have.

40
00:03:30,010 --> 00:03:35,020
A block level element, and I have it as that.

41
00:03:35,140 --> 00:03:37,900
For this one, we are not done yet.

42
00:03:38,440 --> 00:03:42,700
The most required attribute is called value.

43
00:03:43,390 --> 00:03:45,700
And why is a purpose for the value.

44
00:03:45,790 --> 00:03:52,630
The value that you pass in here is what is going to be sent to the server, but not this.

45
00:03:52,660 --> 00:03:58,030
This one is for the user to know what the user is trying to submit.

46
00:03:58,240 --> 00:04:08,050
So for the value we can make use of JZ for short or we can deceive the user by providing something like

47
00:04:08,050 --> 00:04:08,770
mango.

48
00:04:09,160 --> 00:04:17,500
So here we are allowing the user to select programming language, but at the back end we are saying

49
00:04:17,500 --> 00:04:22,230
we want mango, but this is not the proper way of doing it.

50
00:04:22,240 --> 00:04:26,650
Make your value and then the text to the user be more descriptive.

51
00:04:26,650 --> 00:04:31,540
So here I'm going to use JavaScript, then I'm going to copy this.

52
00:04:32,530 --> 00:04:37,060
And the next programming language I'm going to use is Java.

53
00:04:37,090 --> 00:04:41,800
Java and JavaScript are different, and I'm going to use Python.

54
00:04:42,520 --> 00:04:48,280
And I'm going to use the database here as MongoDB.

55
00:04:48,310 --> 00:04:55,870
Even though MongoDB is not a programming language, but let's assume that and I'm going to use a library.

56
00:04:55,870 --> 00:05:00,160
That's my favorite as React JS.

57
00:05:00,310 --> 00:05:01,420
And.

58
00:05:02,310 --> 00:05:07,490
Another favorite library or framework is Express Jazz.

59
00:05:07,500 --> 00:05:11,130
Then our best friend is going to be.

60
00:05:11,160 --> 00:05:13,860
Can you guess Node G?

61
00:05:15,030 --> 00:05:19,490
So let me bring Node.js at the top because I love Node.js.

62
00:05:19,500 --> 00:05:28,020
So this one, when I save it and I click on this, as you can see, we have the options to choose from.

63
00:05:28,110 --> 00:05:34,680
But for this one I can only select one instance of programming languages.

64
00:05:34,800 --> 00:05:40,950
Let's say that we want the user to choose from these options based on his or her experience.

65
00:05:40,950 --> 00:05:47,640
So for me, I'm good at Node.js, JavaScript, MongoDB, React Experts.

66
00:05:47,640 --> 00:05:52,730
So how are we going to allow the user to select multiple options?

67
00:05:52,740 --> 00:05:57,030
That is where we will talk about what is called multiple select.

68
00:05:57,030 --> 00:06:05,100
And I'm going to copy this and paste it here and change this one to multiple.

69
00:06:05,830 --> 00:06:06,910
Select.

70
00:06:07,150 --> 00:06:10,510
So how are we going to do it when I save it?

71
00:06:10,540 --> 00:06:11,860
It looks the same, right?

72
00:06:11,860 --> 00:06:15,430
Let me add some line breaks.

73
00:06:16,870 --> 00:06:19,130
I's that good.

74
00:06:19,150 --> 00:06:20,890
So it looks the same.

75
00:06:20,890 --> 00:06:24,250
But the cool thing is that if I pass.

76
00:06:24,280 --> 00:06:28,720
Attribute called multiple eyes that now let's have a look.

77
00:06:28,750 --> 00:06:31,870
As you can see, the behavior has changed.

78
00:06:31,870 --> 00:06:40,090
And when I press command on Mark I can select multiple instances and I think for window you can press

79
00:06:40,090 --> 00:06:44,230
control and then you click on what you want to select.

80
00:06:44,470 --> 00:06:50,650
So guy, this how we can create multiple and select box in HTML.

81
00:06:50,680 --> 00:06:52,780
Let's continue on into next video.