WEBVTT 0 00:00.230 --> 00:01.840 Welcome back, my dear students. 1 00:01.850 --> 00:02.850 Hope you are motivated. 2 00:02.870 --> 00:04.700 Hope you're having coffee ☕ or Red Bull 🥤 or whatever 3 00:04.700 --> 00:07.670 keeps you motivated, because we have to keep marching on 🏃‍♂️. 4 00:07.700 --> 00:08.900 There's a lot to cover. 5 00:08.900 --> 00:14.840 And to remind you, we are discussing the original input types that have been around for a very long 6 00:14.840 --> 00:20.870 time, and the next set of input types are known as checkable items. 7 00:20.870 --> 00:23.210 Well, firstly, what are they? 8 00:23.810 --> 00:24.920 Very good question. 9 00:25.130 --> 00:26.930 These are just controls 10 00:26.930 --> 00:30.140 whose state you can change by clicking on them. 11 00:30.140 --> 00:36.500 And there are two kinds of checkable items: (1) the checkbox and (2) the radio button. 12 00:36.500 --> 00:42.020 We're going to be looking at examples shortly as to the differences between these, but importantly, 13 00:42.020 --> 00:48.800 both use the checked attribute to indicate whether the widget is checked by default or not. 14 00:48.830 --> 00:51.080 Let me quickly show you an example. 15 00:52.130 --> 00:52.870 Here we are. 16 00:52.880 --> 01:00.000 I want to show you a very quick example of checkable items by using both a checkbox and a radio button. 17 01:00.000 --> 01:02.100 It's going to be super, super quick. 18 01:02.100 --> 01:03.720 So let's just create a form. 19 01:03.840 --> 01:05.520 Action can just be blank. 20 01:06.090 --> 01:11.040 Um, and yeah, let's just deal with sweets. 21 01:12.030 --> 01:15.210 And let's have an input here of type checkbox. 22 01:15.720 --> 01:16.790 Checkbox. 23 01:16.800 --> 01:17.400 There we go. 24 01:17.400 --> 01:18.960 Its name can be "item". 25 01:20.440 --> 01:22.270 This default value can be checked. 26 01:22.300 --> 01:23.590 Okay, so that's the one. 27 01:23.590 --> 01:26.500 And then we've got veggies here. 28 01:26.530 --> 01:28.780 Let's just put a radio button. 29 01:31.170 --> 01:35.040 You know, we're not going to be submitting things to a server, so let's just have type [of] radio. 30 01:35.400 --> 01:39.240 And then of course, we need a submit button, don't we? 31 01:39.240 --> 01:43.230 And its value can be Submit. If we open this up with Live Server, 32 01:43.230 --> 01:43.710 here you go. 33 01:43.710 --> 01:47.880 You can see that the default is checked for the Sweets - for the checkbox. 34 01:47.880 --> 01:52.170 If we take it off the checkbox, we can put it on the radio. 35 01:53.030 --> 01:53.540 Checked. 36 01:54.780 --> 01:55.770 And there you go. 37 01:55.770 --> 02:00.480 So you can already see there's a visual difference between a checkbox and a radio button. 38 02:00.480 --> 02:02.220 And there are a few things worth noting. 39 02:02.220 --> 02:06.620 One, if we go and submit this form now, nothing is going to be submitted. 40 02:06.630 --> 02:07.360 Why? 41 02:07.380 --> 02:14.130 Well, firstly, Sweets is not checked., and although the radio button is checked, we haven't defined 42 02:14.130 --> 02:18.200 a name or value attribute for the radio button, have we? 43 02:18.210 --> 02:23.700 If we go name, and we define that as veggies, 44 02:25.370 --> 02:28.440 and its value can be "boo". 45 02:28.880 --> 02:33.950 If we now submit it, it gets submitted to a server. 46 02:34.040 --> 02:41.540 If we toggle Sweets, or we check Sweets, submit that ... then Sweets does get submitted to the server. 47 02:41.540 --> 02:42.860 But it's a weird thing. 48 02:42.860 --> 02:47.240 It's submitted to the server as item and its value is 1. 49 02:47.480 --> 02:48.020 Right. 50 02:48.020 --> 02:51.650 Because we've named this Sweets item "item" 😨. 51 02:53.340 --> 02:54.000 But don't panic. 52 02:54.000 --> 02:59.250 I'm going to be explaining exactly why it's default value is 1, and what these all mean shortly. 53 02:59.250 --> 03:02.940 I just wanted to give you a quick, quick intro into checkable items. 54 03:02.970 --> 03:04.800 Let's hop back into the lecture. 55 03:05.970 --> 03:06.670 So there you go. 56 03:06.690 --> 03:14.220 We used that checked attribute and you saw very briefly anyway, the differences between a type of radio 57 03:14.220 --> 03:16.080 and a type of checkbox. 58 03:16.080 --> 03:18.970 But we're going to be getting into more details shortly. 59 03:18.990 --> 03:23.290 For now, there are just a few more things I want to say about checkable items in general. 60 03:23.310 --> 03:29.340 Firstly, it's worth noting that these widgets do not behave exactly like other form widgets. 61 03:29.370 --> 03:31.260 For most form widgets, 62 03:31.290 --> 03:38.310 once the form is submitted, all widgets that have a name attribute is sent to the server, even if 63 03:38.310 --> 03:40.380 no value has been filled out. 64 03:40.410 --> 03:47.640 But in the case of checkable items, their values are only sent if they are checked. 65 03:47.670 --> 03:48.720 That's important. 66 03:48.720 --> 03:51.570 If they are not checked, nothing is sent. 67 03:51.600 --> 03:53.650 Not even their name. 68 03:54.100 --> 03:58.060 But when a form is submitted, what sent isn't the checked state, 69 03:58.060 --> 03:59.320 because that doesn't matter, does it? 70 03:59.320 --> 04:01.280 But the name:value pair. 71 04:01.300 --> 04:08.440 But anyways, the bottom line is that the state of the checkable items decides whether the control's 72 04:08.440 --> 04:11.870 value should be sent with the form data. 73 04:11.890 --> 04:16.600 So just remember, the control is submitted only if it's checked. 74 04:16.600 --> 04:21.880 So this is a huge distinguishing feature of checkable items. 75 04:21.910 --> 04:23.380 Well, let's move on. 76 04:23.630 --> 04:25.270 So that's checkable items. 77 04:25.270 --> 04:27.280 And remember how I said the two types? 78 04:27.940 --> 04:28.440 That's right. 79 04:28.450 --> 04:30.490 Checkboxes and radio buttons. 80 04:30.490 --> 04:33.730 So these are the two I want to discuss next.