1
00:00:05,190 --> 00:00:09,270
Welcome back, everyone, to this lecture where we're going to be discussing the basics of forms with

2
00:00:09,270 --> 00:00:12,750
bootstrap forms actually have their own section in the documentation.

3
00:00:13,080 --> 00:00:18,360
So we're just going to briefly explore some important class ideas about forms and how to best utilize

4
00:00:18,360 --> 00:00:19,800
what Bootstrap provides for us.

5
00:00:20,160 --> 00:00:23,820
Let's head over to Visual Studio Code Editor as well as the bootstrap documentation.

6
00:00:24,060 --> 00:00:24,330
All right.

7
00:00:24,360 --> 00:00:26,580
Here I am inside a Visual Studio Code Editor.

8
00:00:26,790 --> 00:00:31,140
You'll notice that I have already loaded up the CSS and JavaScript, as well as our own CSV file.

9
00:00:31,290 --> 00:00:33,430
We actually won't be messing around for our own CIUSSS file.

10
00:00:33,450 --> 00:00:34,710
You can notice that it's blank.

11
00:00:35,070 --> 00:00:40,260
What I'm going to do is I'm going to check out the bootstrap documentation for forms to find it.

12
00:00:40,770 --> 00:00:44,730
Just go to get this Trip.com on docs in the top navigation bar.

13
00:00:45,060 --> 00:00:47,670
And you'll notice on the left hand side you should see forms.

14
00:00:47,790 --> 00:00:49,470
Forms actually has its own section.

15
00:00:49,860 --> 00:00:56,190
The main way this works inside the documentation is there's a general overview of forms like overview

16
00:00:56,190 --> 00:00:58,770
on how it works and how you set up the divisions.

17
00:00:59,040 --> 00:01:04,050
And then beyond that, it's basically just the different types of inputs you can have within a form

18
00:01:04,379 --> 00:01:05,430
like select.

19
00:01:05,459 --> 00:01:11,220
So this is a select menu one two, three four, etc. You can notice there's just a specific class.

20
00:01:11,490 --> 00:01:17,910
So the main thing I want to point across here or get across in this lecture is the fact that you just

21
00:01:17,910 --> 00:01:18,720
set up your form.

22
00:01:19,020 --> 00:01:24,000
And then depending on the different types of inputs you want, there may be specific class calls to

23
00:01:24,000 --> 00:01:25,080
actually look up.

24
00:01:25,440 --> 00:01:30,390
So again, this particular class is called input group text, for instance, and form control.

25
00:01:30,420 --> 00:01:35,250
There are some basic classes that are going to be used across multiple different types of inputs, but

26
00:01:35,250 --> 00:01:36,370
just want you to be aware of that.

27
00:01:37,170 --> 00:01:37,440
OK.

28
00:01:37,500 --> 00:01:41,490
So have check boxes and radios, multiple inputs, etc. Multiple add ons.

29
00:01:41,490 --> 00:01:44,220
Some of these you may use a lot, some of these you probably won't use at all.

30
00:01:44,490 --> 00:01:49,200
But where there's just start off with just the very basics of form control and how bootstrap actually

31
00:01:49,200 --> 00:01:49,860
styles these.

32
00:01:50,130 --> 00:01:52,710
So it's going to look slightly different than what we're already familiar with.

33
00:01:53,010 --> 00:01:56,550
We can see here we have a very basic form for email address and password.

34
00:01:56,800 --> 00:01:59,700
We also have this little checkbox and then a submit button.

35
00:02:00,150 --> 00:02:05,100
Let's explore how Bootstrap thinks about these forms and what are the key classes we need to learn.

36
00:02:05,640 --> 00:02:07,650
It's going to copy this to my clipboard again.

37
00:02:07,650 --> 00:02:10,680
This is the code that goes along with this, for example.

38
00:02:11,220 --> 00:02:16,620
So I'm going to copy this, going to come back here and then let's paste that into the body.

39
00:02:17,530 --> 00:02:19,120
And there's a couple of things I want to point out.

40
00:02:19,180 --> 00:02:25,210
The first one is right off the bat, you'll notice that we have a form tag, but then each individual

41
00:02:25,210 --> 00:02:29,140
section of the form is actually a phone div tag.

42
00:02:29,740 --> 00:02:30,820
So that's kind of interesting.

43
00:02:30,820 --> 00:02:32,170
We haven't seen that really before.

44
00:02:32,470 --> 00:02:35,050
And you'll notice there's a class here called M.B. That's three.

45
00:02:35,440 --> 00:02:38,080
This actually has to do with the grid system with bootstrap.

46
00:02:38,290 --> 00:02:39,940
We're going to learn that in a future lecture.

47
00:02:39,970 --> 00:02:41,560
So kind of just ignore that for right now.

48
00:02:41,740 --> 00:02:48,850
But keep in mind that the way this is organized is a single div per like label input combo within the

49
00:02:48,850 --> 00:02:49,600
form itself.

50
00:02:49,630 --> 00:02:53,350
That's a little different than what we've done before, but it's an important distinction to make.

51
00:02:53,740 --> 00:02:58,570
Then the other thing to note here is typically you're going to have three main elements.

52
00:02:58,570 --> 00:03:00,490
You won't use all of them, but they may be there.

53
00:03:00,700 --> 00:03:02,890
When it comes to a form, you have an email address.

54
00:03:02,920 --> 00:03:05,110
This is the label of the form.

55
00:03:05,590 --> 00:03:10,090
Then you have the actual input of the form and then you have maybe some additional text.

56
00:03:10,510 --> 00:03:12,970
So what are the actual classes that bootstrap uses for that?

57
00:03:13,390 --> 00:03:18,440
We are already familiar with a label which is what goes or is connected to right before the input.

58
00:03:18,520 --> 00:03:23,600
And remember, we can use a label to give some sort of text assignment for the user to read.

59
00:03:23,620 --> 00:03:29,830
So here we're saying email address that you kind of get the idea this could be put your email colon,

60
00:03:30,010 --> 00:03:31,030
but it's just a label.

61
00:03:31,450 --> 00:03:35,050
The class for that within bootstrap is form that label.

62
00:03:35,500 --> 00:03:39,850
So when we're dealing with labels and HTML forms and we're also dealing with bootstrap, we're going

63
00:03:39,850 --> 00:03:43,150
to want to attach a form that's label class to the label.

64
00:03:44,050 --> 00:03:46,630
Then there comes the actual input.

65
00:03:46,990 --> 00:03:53,530
Remember, this could be something like type, email or type password or type text, et cetera.

66
00:03:53,650 --> 00:03:58,340
For that, the basic class for that is called form bash control.

67
00:03:58,810 --> 00:04:04,960
So you should be considering formed control as your class call when you have some sort of input tag.

68
00:04:05,200 --> 00:04:11,410
So it's formed a label for label form, bash control for input, and then you notice there's yet another

69
00:04:11,410 --> 00:04:12,160
division here.

70
00:04:12,670 --> 00:04:21,010
This is if you want to add extra information below the actual input box, and this is known as form

71
00:04:21,220 --> 00:04:21,779
text.

72
00:04:21,820 --> 00:04:26,560
So this says here we'll never share your email, if anyone else, and they put it within its own little

73
00:04:26,560 --> 00:04:26,920
div.

74
00:04:27,580 --> 00:04:29,290
Let's go ahead and explore this just a little bit.

75
00:04:29,320 --> 00:04:35,110
I'm going to copy this code, and then I'm actually going to put it inside the div for the password

76
00:04:35,260 --> 00:04:36,250
and see what that looks like.

77
00:04:37,060 --> 00:04:41,730
So I'm going to put it here, and you'll notice it basically creates this little text here, and this

78
00:04:41,750 --> 00:04:43,930
part doesn't make sense for the password.

79
00:04:43,940 --> 00:04:49,000
So maybe you want to say something like what is typical for text below a password box, which would

80
00:04:49,000 --> 00:04:52,120
be password must contain?

81
00:04:53,150 --> 00:04:54,500
Ten letters or something like that.

82
00:04:54,770 --> 00:04:59,240
You can see there's this formed Ash text class and what his form this text class do.

83
00:04:59,540 --> 00:05:04,670
Well, you can see it kind of makes it a little lighter of a gray, and it's just for saying, OK,

84
00:05:04,670 --> 00:05:10,460
this has to do with the kind of restrictions or constraints for what it has to do with the actual input.

85
00:05:10,760 --> 00:05:12,830
Then you can see there's the check me out button.

86
00:05:13,190 --> 00:05:16,070
This is going to be the most different from the email in the password.

87
00:05:16,670 --> 00:05:21,530
There's going to be many different types of inputs we can use of forms, and in that case, you will

88
00:05:21,530 --> 00:05:26,360
probably have to look up the actual class that is most relevant for the input.

89
00:05:26,840 --> 00:05:27,950
So here I have input.

90
00:05:27,960 --> 00:05:29,720
The type is a checkbox input.

91
00:05:29,990 --> 00:05:32,200
Remember, we have many types of inputs that we're familiar with.

92
00:05:32,210 --> 00:05:34,780
There's also, for instance, like a radio button input.

93
00:05:34,790 --> 00:05:38,060
You can see that already changed this to be a radio button.

94
00:05:38,870 --> 00:05:44,840
But the main idea being is for these kind of more esoteric inputs, you probably have to look up the

95
00:05:44,840 --> 00:05:45,500
actual forms.

96
00:05:45,500 --> 00:05:49,910
This specific class was made for class form that check input.

97
00:05:50,240 --> 00:05:55,700
But if you're using something like a specific radio, there's probably be a better class for it.

98
00:05:55,790 --> 00:06:00,230
So let's imagine I did want to use a radio button how to actually figure out the bootstrap class that

99
00:06:00,230 --> 00:06:00,830
should go with it.

100
00:06:00,950 --> 00:06:04,490
It's probably not form check input because that's really for a checkbox.

101
00:06:04,880 --> 00:06:09,740
I would just come to the documentation, check out the forms and then essentially scroll here until

102
00:06:09,740 --> 00:06:10,230
I find it.

103
00:06:10,520 --> 00:06:16,190
I can see there's a section for checks and radios, so I click down to check and radios tells me a little

104
00:06:16,190 --> 00:06:18,470
bit about their approach structurally with inputs.

105
00:06:18,770 --> 00:06:22,400
The fact that they can actually have disabled or checked a comeback.

106
00:06:22,400 --> 00:06:25,310
Here, you'll notice that there's a checked checkbox.

107
00:06:25,310 --> 00:06:28,880
That means kind of by default, when that person visits the page, there's already a check here.

108
00:06:29,040 --> 00:06:32,600
Remember, I was looking for things that had to do with radios, so I would just keep scrolling down

109
00:06:32,600 --> 00:06:32,990
here.

110
00:06:33,020 --> 00:06:37,070
I notice there's ability to disable things in case the user is not allowed to interact with it.

111
00:06:37,470 --> 00:06:43,480
Then I come here and I would say, OK, it looks like there's radios and what is the actual class four

112
00:06:43,490 --> 00:06:43,930
radios?

113
00:06:43,940 --> 00:06:49,900
And then I realized, Oh, it actually is formed that check the input for these specific radios.

114
00:06:49,910 --> 00:06:53,510
So I realize, OK, I'm actually OK for that particular class call.

115
00:06:53,900 --> 00:06:57,320
Then I could say, Well, maybe if I wanted to disable a radio button, how would I do that?

116
00:06:57,650 --> 00:07:02,030
You could just come over here and realize that they're adding in a disabled tag.

117
00:07:02,840 --> 00:07:03,650
So just come.

118
00:07:04,040 --> 00:07:07,040
Copy that and then put it in the input if I wanted to disable it.

119
00:07:07,550 --> 00:07:13,070
So it could say disabled and you'll notice it's actually disabled, they can't check it.

120
00:07:13,370 --> 00:07:15,320
Later on, we'll realize of Django.

121
00:07:15,320 --> 00:07:17,210
I can add in some logic of when to disable it.

122
00:07:17,570 --> 00:07:21,320
But again, the main idea here is just you look up in the documentation.

123
00:07:21,530 --> 00:07:27,440
What are the class calls that are relative or related to what I'm trying to achieve or accomplish in

124
00:07:27,440 --> 00:07:27,980
the forms?

125
00:07:28,640 --> 00:07:28,940
All right.

126
00:07:29,120 --> 00:07:29,840
That's really it.

127
00:07:29,930 --> 00:07:36,170
Again, it's figure out what's the correct class and also discover that device are utilized a lot within

128
00:07:36,170 --> 00:07:37,010
a bootstrap form.

129
00:07:37,860 --> 00:07:41,700
Coming up next, we're going discuss more about Bootstrap by talking about the navigation bar.

130
00:07:42,030 --> 00:07:42,570
I'll see you there.