WEBVTT

0
00:15.800 --> 00:22.220
And firstly, I want to look at checkboxes. And to remind you, we're looking at the input element,

1
00:22.260 --> 00:25.550
we're setting its type attribute to checkbox.

2
00:25.550 --> 00:27.290
And what does a checkbox do?

3
00:27.320 --> 00:34.070
Well, very simply, it allows you to select single values for submission in a form.

4
00:34.070 --> 00:38.620
And because of the on/off nature of a checkbox, it's either on or off,

5
00:38.630 --> 00:42.110
the checkbox is considered a toggle button.

6
00:42.200 --> 00:48.440
This just means many developers, including myself and designers, expand on the default checkbox styling

7
00:48.470 --> 00:51.470
to create buttons that look like toggle switches.

8
00:51.470 --> 00:56.540
And in fact, we're going to have a challenge coming up where I want to design our own toggle button.

9
00:56.540 --> 01:01.760
It's going to be really, really epic! And we've already seen that, including the checked attribute

10
01:01.760 --> 01:05.990
makes it checked automatically when the page loads.

11
01:06.020 --> 01:12.680
Another thing to note, is that any checkboxes and radio buttons in fact with the checked attribute on

12
01:12.680 --> 01:18.390
load, will match the :default pseudo class even if they are later unchecked.

13
01:18.540 --> 01:24.990
And when an item gets checked, that item is going to match the :checked pseudo class.

14
01:27.410 --> 01:30.740
And this is what's really cool with these type of widgets.

15
01:30.740 --> 01:36.530
We've got this :checked class that toggles on and off every time a user selects it.

16
01:36.530 --> 01:43.460
Let me hop over to Visual Studio Code and show you. I want to show you a very quick example of checked

17
01:43.460 --> 01:47.000
and how we can use this checked kind of attribute.

18
01:47.000 --> 01:48.500
It's really, really useful.

19
01:48.500 --> 01:50.570
This is going to be a very, very simple example.

20
01:50.570 --> 01:52.670
I'm not even going to put it in HTML tags.

21
01:52.670 --> 01:53.630
I know, I know.

22
01:53.660 --> 01:56.210
Very bad practice, but it's going to be super, super quick.

23
01:56.210 --> 01:56.630
Okay.

24
01:56.630 --> 02:05.210
We want to create an input, but this time with type of checkbox. Name can just be "name", ID can be "name".

25
02:05.570 --> 02:07.910
And I want this to be checked by default.

26
02:07.910 --> 02:14.120
If we save this, and open it up in Live Server, this is what it looks like, right?

27
02:14.150 --> 02:18.890
And what I want to show you is I actually want to look at this in the console.

28
02:20.110 --> 02:23.950
Let's grab it, and console log its properties out to the console.

29
02:23.950 --> 02:28.390
So let's include <script> tags because we're going to be writing JavaScript. We're going to define a

30
02:28.390 --> 02:32.950
variable and I want to grab that checkbox. And all we're going to do is we're going to grab the document

31
02:32.950 --> 02:34.450
object. On there,

32
02:34.450 --> 02:42.220
we can use the method querySelector() and what I want, well, I want the inputs and I want an input with

33
02:42.250 --> 02:44.860
type attribute is set to

34
02:45.720 --> 02:46.510
checkbox. 

35
02:46.510 --> 02:47.930
That's all I want to do.

36
02:47.950 --> 02:49.510
It's really, really this simple.

37
02:49.510 --> 02:54.670
And then I'm going to console.dir(), which is different to console.log().

38
02:54.820 --> 03:02.020
I'm wanting to "dir" it out because that gives us kind of a JSON tree visual representation of the actual

39
03:02.020 --> 03:02.740
element.

40
03:02.770 --> 03:05.890
And let's console.dir() out the checkbox.

41
03:05.890 --> 03:09.640
So let's go back to our browser, let's refresh the page and there we go.

42
03:09.640 --> 03:12.970
We've literally got this in the console.

43
03:12.970 --> 03:18.760
And what's interesting here, okay, is we've got a whole lot of properties and methods. And the first

44
03:18.760 --> 03:24.370
thing I want to show you, is that when it's checked, remember I said the :default pseudo class is selected?

45
03:24.910 --> 03:25.990
Well, there it is.

46
03:26.110 --> 03:28.540
defaultChecked is true.

47
03:28.540 --> 03:31.180
So that's the first thing I wanted to show you.

48
03:31.180 --> 03:37.810
The second thing I want to show you is this checked state and that it toggles on and off.

49
03:37.810 --> 03:39.100
So how can I show you that?

50
03:39.100 --> 03:40.900
Well, let me write a comment here.

51
03:40.930 --> 03:46.810
Let's see the checked state being toggled.

52
03:48.180 --> 03:50.640
Oh, the other thing I want to show you quickly, if I just go here.

53
03:52.370 --> 03:54.740
And we search for a checked.

54
03:58.310 --> 04:03.290
There, if we scroll further down, we can see that the :checked state is also true. And that checked state

55
04:03.290 --> 04:05.810
is going to be toggling off and on.

56
04:05.810 --> 04:06.930
And that's what I want to show you

57
04:06.950 --> 04:08.870
now - I want to show you that in action.

58
04:09.200 --> 04:09.500
Okay.

59
04:09.500 --> 04:10.810
So let's go back to our code.

60
04:10.820 --> 04:16.400
In order to do this, I'm going to be using an event listener, and I've discussed this at length in

61
04:16.400 --> 04:18.920
my DOM courses, so please check it out if you're interested.

62
04:18.920 --> 04:20.270
But you don't have to.

63
04:20.720 --> 04:22.370
And if you know it, that's great.

64
04:22.370 --> 04:28.170
So all I want to do is grab our checkbox, add an event listener to it. And what is the event listener

65
04:28.170 --> 04:29.050
I want to listen to?

66
04:29.060 --> 04:38.810
Well, every time a user toggles a checkbox, the "change" event is fired by the browser - by the DOM.

67
04:39.500 --> 04:42.470
And when that happens, I want to execute a function.

68
04:42.470 --> 04:46.700
All I want to do right now is I want to console.log out to the screen,

69
04:46.850 --> 04:51.110
the checkbox checked state, And this is all I want to do.

70
04:51.110 --> 04:52.580
I want to listen for a change event.

71
04:52.580 --> 04:56.990
When the change event is fired, I want us to see its checked state.

72
04:56.990 --> 05:03.350
So if we go to the browser and we start toggling this ... why is it not working 🙈?

73
05:07.400 --> 05:10.610
Why is this not working?

74
05:11.060 --> 05:12.200
It should work.

75
05:12.230 --> 05:13.640
Let me refresh the page.

76
05:14.810 --> 05:15.360
Oh, there we go.

77
05:15.390 --> 05:16.130
I don't know why.

78
05:16.160 --> 05:21.140
I just needed to refresh, but every time we toggle this checkbox, we can see the checked state.

79
05:21.140 --> 05:25.790
So the checked state is true when it's on, false when it's off.

80
05:26.540 --> 05:31.890
All I did was I grabbed this checkbox and I went to its checked state.

81
05:31.910 --> 05:33.050
That's all I did.

82
05:33.530 --> 05:35.240
Where is the checked box?

83
05:35.920 --> 05:36.730
Checked.

84
05:38.660 --> 05:39.350
There we go.

85
05:39.380 --> 05:44.750
It's all I did. I grabbed that checked property and I'm console logging that to the screen.

86
05:45.290 --> 05:46.400
How awesome.

87
05:46.400 --> 05:47.840
How awesome is that?

88
05:47.840 --> 05:53.300
So that's all I wanted to show you about the :default pseudo class and that :checked [pseudo] class.

89
05:53.300 --> 05:58.040
And it's really cool because we can target these things and then style them in certain ways.

90
05:58.040 --> 06:02.150
But let's hop back to the lecture before I start babbling on for too long.

91
06:02.630 --> 06:03.980
How cool was that?

92
06:03.980 --> 06:04.640
So there we go.

93
06:04.640 --> 06:10.010
We're looking at input of type checkbox. And now I want to talk about submitting a checkbox.

94
06:10.010 --> 06:13.010
What happens when you submit a checkbox?

95
06:13.130 --> 06:18.410
Well, we know that form data is always sent to the server as name:value pairs.

96
06:18.440 --> 06:19.190
Makes sense.

97
06:19.190 --> 06:24.890
So with a checkbox, if we have a name and a value, those will be sent to the server.

98
06:25.250 --> 06:29.600
This example here has a name of "accept" and its value is "T&Cs".

99
06:30.950 --> 06:32.240
And what about the value?

100
06:32.270 --> 06:38.000
Well, the value is not so important and in fact it's optional because it's never seen client side and

101
06:38.000 --> 06:42.900
it's default value when the checkbox is checked, is on.

102
06:42.900 --> 06:47.640
All that we care about is that it's on, not necessarily what the value is.

103
06:47.760 --> 06:53.760
For instance, let's say the user submits this form. We know it's name attribute is accept.

104
06:53.760 --> 06:55.950
So the server is going to get a name:value pair.

105
06:55.980 --> 06:58.350
Let's say value is defined as "T&Cs".

106
06:58.350 --> 07:01.650
It's going to be sent to the server like this, as a "name=value" pair.

107
07:02.010 --> 07:07.110
If we don't define value, it's going to be sent as "accept=on".

108
07:07.290 --> 07:12.870
And in both of these instances, what's important to us is that it's been checked and the user has accepted.

109
07:12.870 --> 07:15.930
Whether we've got "T&Cs" or "on" doesn't really matter.

110
07:15.930 --> 07:19.980
And that's why the value attribute is optional and often ignored.

111
07:20.010 --> 07:21.140
Have you got it?

112
07:21.150 --> 07:22.110
I hope so.

113
07:22.140 --> 07:26.610
You might be thinking, well, what happens if nothing is actually checked?

114
07:26.790 --> 07:33.030
Well, if a checkbox is unchecked and the form is submitted, no value is going to be submitted to the

115
07:33.030 --> 07:33.630
server.

116
07:34.020 --> 07:41.040
If it was, it would kind of be like this: "name=unchecked". And the server can't put a value to unchecked.

117
07:41.040 --> 07:43.890
And so the value is not even submitted to the server at all.

118
07:43.920 --> 07:44.760
"Well then Clyde, 

119
07:44.760 --> 07:47.520
how do I submit a default value to a server if I want to?"

120
07:47.520 --> 07:53.730
Well, if you want to do that, then you can always revert back to the hidden input type.

121
07:53.730 --> 07:56.280
Remember that, we discussed that a while back?

122
07:56.280 --> 07:57.930
But anyway, enough blubber blabber.

123
07:57.930 --> 08:02.550
Let me hop over to Visual Studio Code and let's just look at this checkbox in more detail.

124
08:02.550 --> 08:05.160
Let's just code up a very simple checkbox.

125
08:06.120 --> 08:07.970
Oh man, I love this coffee 😍☕.

126
08:07.980 --> 08:09.840
It is so, so delicious.

127
08:09.840 --> 08:11.640
I wish I could be having some with you.

128
08:12.600 --> 08:13.470
Oh, it's good.

129
08:13.470 --> 08:14.070
Anyway.

130
08:14.070 --> 08:14.760
Yes.

131
08:14.790 --> 08:15.480
Checkboxes.

132
08:15.480 --> 08:17.940
Let me show you a quick example of building up some checkboxes.

133
08:17.940 --> 08:20.850
So here we are in Visual Studio Code. A blank file,

134
08:20.850 --> 08:24.600
as usual. We can set up HTML. Within here,

135
08:24.600 --> 08:28.110
we can set up, call it a body. Within the body

136
08:28.140 --> 08:28.920
you guessed it,

137
08:28.950 --> 08:32.130
we want to wrap everything within our form.

138
08:33.040 --> 08:35.560
And we're going to do a very, very quick example here.

139
08:35.600 --> 08:35.970
Okay.

140
08:35.980 --> 08:40.840
All I want to do is I want to create an input, and this time, you guessed it, with type checkbox.

141
08:41.200 --> 08:42.490
Let's save this.

142
08:42.520 --> 08:44.080
Let's just open Live Server.

143
08:44.560 --> 08:46.330
And let's put it side by side

144
08:47.700 --> 08:48.750
so you can see what's going on.

145
08:48.750 --> 08:53.510
So you can see already in the browser it's visually displayed that square box.

146
08:53.520 --> 08:58.020
And visually we know that that is a checkbox versus a radio button.

147
08:58.080 --> 08:59.160
Let me just zoom in a bit more.

148
08:59.190 --> 08:59.820
There you go.

149
08:59.850 --> 09:00.660
You can [now] see that better.

150
09:00.840 --> 09:06.270
And the browser automatically applies these default stylings to it when it's checked or unchecked.

151
09:06.300 --> 09:07.440
Pretty straightforward.

152
09:07.440 --> 09:08.400
Pretty intuitive.

153
09:08.430 --> 09:10.950
Now, normally with checkboxes, you have more than one, right?

154
09:10.950 --> 09:12.180
So I don't know.

155
09:12.180 --> 09:18.240
Let's just have a paragraph saying choose your favorite food.

156
09:19.140 --> 09:19.770
Save that.

157
09:19.770 --> 09:20.450
There we go.

158
09:20.460 --> 09:21.420
Now with checkboxes,

159
09:21.420 --> 09:27.150
as I mentioned, we don't need a value attribute, but the name attribute is extremely important.

160
09:27.150 --> 09:30.300
So let's have a food here of meat.

161
09:30.850 --> 09:33.210
Don't need an ID, we're not styling anything now.

162
09:33.240 --> 09:38.910
We can do a few checkboxes. One is meat, one is sweets & one is veggies.

163
09:39.180 --> 09:42.660
And then of course, we can have a button with type submit.

164
09:43.940 --> 09:45.500
So if we look at this, there we go.

165
09:45.530 --> 09:48.110
We've got three checkboxes, right.

166
09:48.590 --> 09:52.130
And what's different to a radio button is we can select all three at once.

167
09:53.430 --> 09:55.620
Let's just put a break here with the submit button.

168
09:55.620 --> 09:58.410
And of course, we usually want, you know, text.

169
09:58.830 --> 10:00.000
So this will be meat.

170
10:00.870 --> 10:01.920
Let's break it up.

171
10:02.220 --> 10:03.390
This can be sweets 🍬.

172
10:04.910 --> 10:06.500
Sweeeeeets.

173
10:08.660 --> 10:10.190
And we can implement a break.

174
10:10.700 --> 10:14.060
And you guessed it, veggies.

175
10:15.020 --> 10:15.800
How does it look?

176
10:17.350 --> 10:18.550
Let's have another break there.

177
10:19.150 --> 10:19.750
There we go.

178
10:21.220 --> 10:22.210
There we go.

179
10:22.240 --> 10:24.370
Capital S, Sweets.

180
10:24.400 --> 10:25.150
One more thing.

181
10:25.150 --> 10:26.620
Just to make it consistent.

182
10:26.950 --> 10:27.610
There you go.

183
10:27.640 --> 10:30.790
You can see how quick and easy it is to create checkboxes,

184
10:30.790 --> 10:31.270
right?

185
10:31.270 --> 10:34.960
And if we just select Meat and Sweets, and we click submit,

186
10:35.470 --> 10:36.570
look at the browser.

187
10:36.580 --> 10:40.810
This is what I wanted to prove to you - that we don't need a value attribute.

188
10:40.840 --> 10:47.440
We know that Meat and Sweets were selected, and the mere fact that we've checked that checkbox tells

189
10:47.440 --> 10:49.720
us it's on, tells us that it's selected.

190
10:49.720 --> 10:55.480
And you can see what's appended in the URL - that Meat is assigned the value of "on" and Sweets is assigned

191
10:55.510 --> 10:56.160
the value of "on".

192
10:56.170 --> 10:56.830
That's enough.

193
10:56.830 --> 11:00.340
I mean, we could put a value attribute in here, but it really doesn't do much.

194
11:00.340 --> 11:03.760
We could say the value is,

195
11:04.820 --> 11:06.230
favFood. 

196
11:07.140 --> 11:08.490
How's that as an example?

197
11:09.650 --> 11:11.300
And we could put this everywhere.

198
11:11.720 --> 11:17.030
I'm just going to show you it really is meaningless. If we now refresh the page, and we just select veggies

199
11:17.030 --> 11:18.200
and we click submit

200
11:18.470 --> 11:23.410
we've got veggies and it's assigned the value of favFood. But it doesn't really matter.

201
11:23.420 --> 11:26.330
We could just exclude it all together.

202
11:26.330 --> 11:29.810
And of course here, if we click actually on the text itself, it does nothing.

203
11:29.810 --> 11:32.780
And that's because we haven't wrapped these in a .... ??? .... that's right, 

204
11:32.780 --> 11:33.440
a label.

205
11:33.440 --> 11:37.100
So what we could do, if you wanted to be sneaky, and we could do it inline, 

206
11:38.990 --> 11:41.780
we could just take that entire input

207
11:42.410 --> 11:42.840
and put it here.

208
11:44.580 --> 11:45.240
There we go.

209
11:45.240 --> 11:46.350
And I've just done it with Meat.

210
11:46.350 --> 11:50.880
And now if we click Meat, obviously the checkbox toggles on and off.

211
11:50.880 --> 11:51.600
How cool.

212
11:52.050 --> 11:57.600
Anyway, very, very quick example to show you how easy it is to create a checkbox, how intuitive

213
11:57.600 --> 11:58.360
it is.

214
11:58.380 --> 11:59.970
Let's hop back into the lecture.

215
12:00.650 --> 12:00.810
Whew.

216
12:01.510 --> 12:02.850
This is so, so cool.

217
12:03.150 --> 12:09.840
Now there's one final comment I want to make, and that is checkboxes are similar to radio buttons,

218
12:09.840 --> 12:11.250
but they're not the same.

219
12:11.280 --> 12:13.200
Don't get confused, okay?

220
12:13.200 --> 12:18.450
We just been focusing on checkboxes, not radio buttons.

221
12:18.450 --> 12:21.240
Which brings me to our next topic.

222
12:21.240 --> 12:23.430
And that is ... radio buttons.
(music starts playing)