WEBVTT 0 00:00.080 --> 00:02.210 What are radio buttons? 1 00:02.210 --> 00:05.860 Well, of course, it's where we set the type of the input to 2 00:05.870 --> 00:11.540 radio. And radio buttons are similar to checkboxes, but with an important distinction. 3 00:11.570 --> 00:18.980 Radio buttons are grouped into a set, which only allows one radio button to be selected at any given 4 00:18.980 --> 00:19.490 time. 5 00:19.490 --> 00:21.110 This is different to checkboxes, right? 6 00:21.110 --> 00:26.090 Because checkboxes allow us to turn single values on and off however many we want. 7 00:26.180 --> 00:26.870 Remember that. 8 00:26.870 --> 00:28.960 That's a very big distinguishing difference. 9 00:28.970 --> 00:29.480 Cool. 10 00:29.480 --> 00:33.860 So we know that radio buttons are generally defined in groups, but how do we define a group? 11 00:34.270 --> 00:35.420 Well, that's easy. 12 00:35.420 --> 00:41.930 If they share the same value for their "name" attribute, they will be in the same group. 13 00:41.930 --> 00:47.930 So having the same value for their name attribute means that radio buttons will be tied together. 14 00:48.020 --> 00:52.730 They will be considered to be in the same group of buttons. 15 00:52.730 --> 00:58.610 And remember, the distinguishing feature of a radio button is that only ONE radio button in a group 16 00:58.610 --> 01:01.620 can be selected at any given time. 17 01:01.620 --> 01:07.050 And this means that when one of them is checked, all the others automatically get unchecked. 18 01:07.050 --> 01:12.030 When the form is sent, only the value of the checked radio button is sent. 19 01:12.030 --> 01:14.250 "And what happens, Clyde, if none of them are checked?" 20 01:14.280 --> 01:19.950 Well, in that case, the whole pool of radio buttons is considered to be in an unknown state and no 21 01:19.950 --> 01:21.870 value is sent with the form. 22 01:21.870 --> 01:28.320 It's very intuitive. But once one of the radio buttons in the same named group of buttons is checked, 23 01:28.350 --> 01:32.370 then it's kind of weird because it's not possible for the user to revert back. 24 01:32.550 --> 01:37.980 In other words, it's not possible for the user to uncheck all of the buttons without resetting the 25 01:37.980 --> 01:38.520 form. 26 01:38.700 --> 01:40.140 Whew, I know I know. 27 01:40.140 --> 01:41.220 We're going through a lot. 28 01:41.250 --> 01:44.130 What else can I say about submitting a radio button? 29 01:44.340 --> 01:51.750 Well, unlike a checkbox, the value attribute is very important for radio buttons. 30 01:51.750 --> 01:55.410 Remember, with the checkbox, we weren't too concerned with the value attribute, were we? 31 01:55.440 --> 02:02.460 We were more concerned whether it was toggled on or off. Radio buttons are very, very different. 32 02:02.460 --> 02:06.060 And it's different because the selected option is sent to the server 33 02:06.060 --> 02:10.620 who needs the value attribute to know which option was selected. 34 02:10.620 --> 02:15.390 Because remember, the names of all the radio buttons in a group are the same. 35 02:15.390 --> 02:18.270 The only distinguishing feature is the value attribute. 36 02:18.270 --> 02:20.550 And that's why it's so important, right? 37 02:20.550 --> 02:25.890 So let's look at this example where we set the type of radio and we've got a name here and we've assigned 38 02:25.890 --> 02:32.640 the name to favFood. And if we omit the value attribute, the submitted form assigns the value of 39 02:32.640 --> 02:34.620 "on" to the entire group. 40 02:34.950 --> 02:37.090 So it's kind of weird, and it's meaningless. 41 02:37.110 --> 02:42.900 favFood is going to be on, and if you have a few different radios within the group that's not going 42 02:42.900 --> 02:43.950 to tell us anything, is it? 43 02:43.950 --> 02:45.870 It's not going to tell us what the favorite food is, 44 02:45.870 --> 02:47.940 it's just going to say that one of them was selected. 45 02:47.940 --> 02:54.960 So this is exactly why the value attribute needs to be unique for each radio button within a group. 46 02:54.960 --> 03:00.090 This is different to the name attribute. For a set of radio buttons that belong to the same group, 47 03:00.090 --> 03:04.080 all of them should have the same value in the "name" attribute. 48 03:04.110 --> 03:09.630 The next point I want to make is that all radio buttons in a group must be in the same document and 49 03:09.630 --> 03:13.800 belong to the same form or belong to no form at all. 50 03:13.800 --> 03:19.380 In other words, placing radio buttons in different forms or documents will break their grouping even 51 03:19.380 --> 03:22.050 if they do have the same name value. 52 03:22.260 --> 03:28.500 Let's quickly hop over to Visual Studio Code and have a quick look at coding up some radio buttons. 53 03:28.500 --> 03:30.930 We've seen an example of using checkboxes. 54 03:30.930 --> 03:33.720 Here's a quick one using a radio button. 55 03:33.720 --> 03:37.050 We don't need an action because we're not going to be submitting this to a real server. 56 03:37.050 --> 03:38.490 And let's create our form. 57 03:38.490 --> 03:44.850 Let's wrap each widget within a paragraph tag, and here we're going to pretend we're doing a booking 58 03:44.850 --> 03:46.860 sites for a hotel, maybe. 59 03:47.070 --> 03:48.000 Who knows? 60 03:48.150 --> 03:49.860 So here we go, select a room. 61 03:49.860 --> 03:51.270 Let's just break it up here. 62 03:51.570 --> 03:53.070 Let's have a label. 63 03:53.070 --> 03:54.450 And we all know what this label does. 64 03:54.480 --> 04:00.860 And I'm going to implicitly use this label, right, by wrapping our input within it. 65 04:00.870 --> 04:04.320 So here we've got an input, and here I want a type of radio. 66 04:04.410 --> 04:06.870 It's name can be roomType. 67 04:07.020 --> 04:10.350 We don't need an ID, I'm not going to be styling this up with CSS. 68 04:10.380 --> 04:19.950 This one can be budget, and we can say here we're trying to find a budget [for] one bedroom. 69 04:20.550 --> 04:21.300 How's that? 70 04:21.360 --> 04:22.230 Let me just zoom out a bit 71 04:22.230 --> 04:23.100 so it's on one line. 72 04:23.100 --> 04:24.420 Let's copy this label 73 04:25.060 --> 04:26.210 three more times. 74 04:26.230 --> 04:26.960 There we go. 75 04:26.980 --> 04:35.410 We can have a budget type, a standard room type, and you guessed it, an executive room type. 76 04:35.440 --> 04:38.200 This can be a standard 77 04:38.940 --> 04:39.930 suite. 78 04:40.620 --> 04:43.600 And this can be the penthouse. 79 04:43.620 --> 04:50.820 Firstly, I want you to notice that the name attribute is the same and it has to be the same to group 80 04:50.820 --> 04:52.330 all these radio buttons. 81 04:52.350 --> 04:58.200 This is what's telling the browser that these are all part of the same group, and it will only allow 82 04:58.200 --> 04:59.640 a user to select one. 83 04:59.640 --> 05:05.910 And for example, when the user comes on to a site, let's say we want one of these to be checked by 84 05:05.910 --> 05:07.920 default, the standard suite. 85 05:07.950 --> 05:13.050 The next thing I want you to notice is that the value attributes have to be unique when it comes to 86 05:13.050 --> 05:13.800 radio buttons. 87 05:13.800 --> 05:18.360 They are vitally important because it tells us when it's submitted to the server, which item has been selected, 88 05:18.360 --> 05:20.850 and that's why they have to be unique. 89 05:20.880 --> 05:24.900 Then next, just to mix things up, let's have an input of type submit. 90 05:24.930 --> 05:26.160 Well, you know what? 91 05:26.160 --> 05:27.030 Let's do the better one. 92 05:27.030 --> 05:28.770 And that is a button. 93 05:28.770 --> 05:33.150 Well, actually, before I even do that, let's wrap our submit buttons in a paragraph. 94 05:33.180 --> 05:35.340 Then all the styling looks the same here. 95 05:35.340 --> 05:39.780 We can have a button with type submit and that can be 96 05:39.780 --> 05:44.550 Book Now. And then we can have an input with type reset. 97 05:44.580 --> 05:47.130 How's that, "Start again". 98 05:47.310 --> 05:48.450 Let's save this. 99 05:48.990 --> 05:50.820 Let's open it up with Live Server. 100 05:50.820 --> 05:53.180 And how cool is this? 101 05:53.190 --> 05:54.890 (sound effect: Yeah) Well, you know what, 102 05:54.900 --> 05:56.150 I actually want to break these up. 103 05:56.160 --> 05:59.670 It's a bit annoying having them right there so we can put a break, and a break. 104 06:00.030 --> 06:00.900 There we go. 105 06:00.900 --> 06:04.230 So we're selecting a room - budget, standard or penthouse. 106 06:04.230 --> 06:10.200 And what's cool is that these are grouped now. The user can only toggle one at a time. 107 06:10.200 --> 06:14.190 So let's now do Penthouse, click on Book Now. 108 06:14.190 --> 06:20.130 We can see that the room type has been set to executive, it's sent to the server. 109 06:20.520 --> 06:21.900 How awesome is that? 110 06:21.930 --> 06:28.020 Of course, if the user has done a whole lot in the form and wants to start again, we've made it clear 111 06:28.020 --> 06:32.400 that he's going to be starting again and that defaults back to the original form. 112 06:32.400 --> 06:34.560 So just something different for you to look at. Now 113 06:34.560 --> 06:37.050 you kind of know what radio buttons do, how they are grouped. 114 06:37.080 --> 06:39.210 It's not that difficult, I told you. 115 06:39.550 --> 06:40.200 Right. 116 06:40.200 --> 06:42.820 And yeah, hope you're having a lot of fun. 117 06:43.210 --> 06:44.110 So there we go 118 06:44.140 --> 06:48.010 my dear students. We've done an incredible amount in a short space of time. 119 06:48.010 --> 06:54.400 We've spoken about checkable items and in particular, we've spoken about checkboxes which allow you 120 06:54.400 --> 07:01.030 to toggle something on and off, however many you want, and radio buttons. And radio buttons belonging 121 07:01.060 --> 07:07.660 to the same group only allow you to select one in the group, no more than one. 122 07:07.990 --> 07:12.130 And this concludes the lecture on checkable items.