WEBVTT 0 00:00.640 --> 00:07.330 OK, so here we are, here's our site, and you know what, actually, if I zoom in here, I've noticed 1 00:07.330 --> 00:08.130 these are not aligned. 2 00:08.140 --> 00:09.040 Let me just get rid of this. 3 00:09.340 --> 00:10.980 Can you see we're not quite aligned here? 4 00:11.320 --> 00:12.980 Those two inputs are not quite aligned? 5 00:13.150 --> 00:14.140 Why? Well, 6 00:14.140 --> 00:17.750 let me just quickly show you, um here, if we inspect this, 7 00:17.770 --> 00:18.670 let me just zoom out. 8 00:20.310 --> 00:21.030 Have a look here. 9 00:22.610 --> 00:25.610 We haven't defined a width of our label yet. 10 00:25.640 --> 00:31.790 And you can see here that this name label has a width of 62.68px, and of course, 11 00:31.790 --> 00:34.730 email is just slightly less in size, 12 00:34.730 --> 00:35.270 in width. 13 00:35.600 --> 00:37.250 And that's why these two are not aligned. 14 00:37.800 --> 00:42.350 And if we look at our header, we can see we've given it a width of 600px. 15 00:42.360 --> 00:47.090 So maybe what we should do is just give our labels here a width of, let's say 200px, then 16 00:47.090 --> 00:48.440 at least it's a third of the size. 17 00:49.010 --> 00:52.370 So let's quickly do that, and then they're aligned, and they also will be centered. 18 00:52.490 --> 00:53.750 So it'll actually look quite nice. 19 00:54.350 --> 00:57.910 So here we go. Here's our code. And all I want to do is I want to grab our label, 20 00:57.980 --> 01:00.650 actually we are right here - that's very handy. 21 01:01.010 --> 01:02.450 And we want to define a width. 22 01:05.040 --> 01:12.930 Width, and we want that to be set to, um what did we define it, um --label-width. Remember at the top of our file, 23 01:13.200 --> 01:13.960 if I scroll up here, 24 01:14.610 --> 01:17.550 we've defined a "--label-width" for each one of our labels in the form 25 01:17.760 --> 01:22.860 so then it's uniform. Very very cool hey! And we've already done it as 200px. 26 01:23.610 --> 01:25.140 We actually did that right at the beginning. 27 01:25.830 --> 01:27.480 So there we go, let's scroll back down. 28 01:27.810 --> 01:28.450 Let's save. 29 01:28.470 --> 01:29.700 Let's go back to our browser. 30 01:29.730 --> 01:30.660 (sound effect: Wow) 31 01:31.260 --> 01:32.130 Isn't that beautiful 😍? 32 01:32.220 --> 01:33.630 So now if I zoom in 🔎, 33 01:33.630 --> 01:37.170 you can see that these are exactly the same width. 34 01:38.650 --> 01:43.390 If we inspect this element here, you can see firstly that I've pushed all the labels to the right. 35 01:44.650 --> 01:46.400 It's exactly, if we go back to our code, 36 01:46.870 --> 01:53.080 it's exactly why we've text-aligned it to the right ➡. That's all we've done. 37 01:54.460 --> 01:57.700 You might be wondering why I aligned items to "flex-start"? 38 01:58.000 --> 02:00.010 All that means is I'm wanting to align items, 39 02:00.010 --> 02:03.430 I want to push all the items to the start of each of its container. 40 02:03.550 --> 02:04.570 That's all that that means. 41 02:05.050 --> 02:08.760 I know these things can be quite confusing when you're beginning, but don't worry, 42 02:08.770 --> 02:12.700 again, I'm going to be talking a little bit more about the box model and these flexes a bit later in 43 02:12.700 --> 02:13.070 the course. 44 02:13.630 --> 02:15.430 For now, I just kind of want to build a form. 45 02:15.430 --> 02:18.800 I want you to get a feel for how this works and how we go about doing it. 46 02:19.710 --> 02:25.650 Enough on all this CSS, and enough on our existing page, let's add this radio button right now. 47 02:26.010 --> 02:27.720 So let's go to our file here, our HTML. 48 02:28.830 --> 02:33.750 And now let's add, um, "adding our radio button". 49 02:35.820 --> 02:39.330 That's what we're going to do now. And, of course, we get rid of myself so you can see the screen 50 02:39.330 --> 02:41.550 better and concentrate on what it is you're doing. 51 02:41.790 --> 02:42.450 Adios 👋. 52 02:43.140 --> 02:44.490 Remember what I said we should do? 53 02:44.520 --> 02:50.080 We should wrap our radio buttons within a group, and we do that using the fieldset 54 02:51.160 --> 02:51.840 element. 55 02:53.310 --> 02:53.940 (sound WHAT!) (music starts playing) 56 03:21.250 --> 03:24.610 And I want to give this fieldset element a class, just so we can style it nicely. 57 03:25.070 --> 03:31.210 Let's give it a class, and let's call this class radio-form-row, for example. 58 03:32.770 --> 03:33.520 What am I doing? 59 03:33.820 --> 03:36.110 This class needs to be in here. 60 03:36.940 --> 03:37.450 There we go. 61 03:38.050 --> 03:41.940 So there is kind of our wrapper. Then remember what I said we need to do? 62 03:42.040 --> 03:44.380 We need to give our group a name. 63 03:44.530 --> 03:47.920 And that's what we're going to be putting into this legend element. 64 03:48.490 --> 03:53.320 Let's just, for example, ask the user if they want to allow push notifications sent to them. 65 03:54.200 --> 03:54.830 That's all we're doing. 66 03:57.030 --> 04:01.170 If we see what this looks like now. Let me just actually put both ... let me delete this ... 67 04:02.620 --> 04:06.610 up to the screen, it looks terrible, but we're going to start building this up, so don't worry, 68 04:06.970 --> 04:08.830 but that's what we have in our browser so far. 69 04:09.250 --> 04:14.140 Now, what I want to do, is I want us to code the first selection, which is going to be "no". 70 04:14.860 --> 04:16.270 How would we go about doing that? 71 04:17.590 --> 04:23.980 Well, very simply, it's almost exactly the same as what we did for our text inputs. The first thing 72 04:23.980 --> 04:25.750 I want to do, is I want us to have an input. 73 04:25.750 --> 04:31.030 But this time the input has a type set to "radio", remember? 74 04:31.890 --> 04:38.460 And the name has to be the same with every single one of the radio types in the group, so let's just 75 04:38.460 --> 04:44.250 give this a "push-type" name. The ID we can call it anything we want, 76 04:44.580 --> 04:49.500 the ID here, let's just say is "push-type-1", which we know is "no". 77 04:51.020 --> 04:57.770 And of course, the value of this is going to be "no". Very very simple. If I save this, we've literally got 78 04:57.770 --> 05:02.270 that radio now on the screen. Let me zoom in so you can just see it a bit better. Is that better? 79 05:02.300 --> 05:03.010 You can see it there. 80 05:03.590 --> 05:05.050 But now there's no label, is there? 81 05:05.300 --> 05:06.230 So let's add a label. 82 05:08.350 --> 05:16.520 And the "for" is "push-type-1". Remember, that "for" attribute has to be the same as the ID. 83 05:17.590 --> 05:19.030 That's exactly why I've done that. 84 05:19.660 --> 05:22.960 And then I want to give this a class, because we can style it up nicely. 85 05:23.170 --> 05:25.180 I want this to be a radio-label, 86 05:25.960 --> 05:29.980 and of course, we're giving this the value of "no". Don't worry about styling yet. 87 05:29.980 --> 05:31.300 We just getting everything set up. 88 05:32.910 --> 05:35.290 That's our first selection, which is "no". 89 05:36.120 --> 05:41.430 Now we can just copy and paste this entire code, and of course, this is going to be "yes" 90 05:41.430 --> 05:44.160 and this is going to be the second selection. 91 05:44.910 --> 05:46.370 The type is radio. 92 05:46.650 --> 05:48.310 The name has to be the same, 93 05:48.330 --> 05:49.320 it's going to be push-type. 94 05:49.710 --> 05:51.960 Its ID is going to be push-type-2 95 05:53.470 --> 05:59.500 and the value, of course, is "yes". And the label has to be the same as the ID, which needs to be 96 05:59.500 --> 05:59.860 2. 97 06:00.990 --> 06:04.950 And we can have exactly the same class and of course, the value of "yes". 98 06:06.150 --> 06:09.240 Let's save that, got our browser, and there we go. 99 06:09.270 --> 06:11.020 Here are our radio buttons. Now 100 06:11.040 --> 06:13.020 check this out - if we click no, it's selected. 101 06:13.020 --> 06:17.100 If we click yes, the "no" is automatically unselected and the yes 102 06:17.100 --> 06:17.890 becomes selected. 103 06:18.240 --> 06:20.730 That's exactly why everything has to be within a group. 104 06:21.990 --> 06:23.430 Is this kind of making sense? 105 06:23.700 --> 06:24.390 I hope so. 106 06:24.410 --> 06:25.770 I hope it's becoming more intuitive. 107 06:25.800 --> 06:29.070 I know this is a very simple example, but we're going to be getting more into it a bit later. 108 06:29.640 --> 06:34.090 If we hadn't labeled each radio with the same name attribute, 109 06:34.110 --> 06:35.040 what do you think would happen? 110 06:36.660 --> 06:42.650 Let me show you what would happen. Let me go back to our code, and let's say the first one, instead of calling 111 06:42.650 --> 06:48.380 it push-type, we go "push-type-rebel", because it's being a rebel, it's not the same name as the other 112 06:48.380 --> 06:48.740 type. 113 06:49.070 --> 06:53.780 If we do that and we go back to our browser, what happens is it allows the user then to select more 114 06:53.780 --> 06:55.490 than one radio button at a time. 115 06:55.940 --> 06:58.980 In effect, this is not really then a radio button, is it? 116 06:59.600 --> 07:04.330 Remember, radio buttons only allow the user to select ONE within the group. 117 07:04.340 --> 07:08.780 And now because we've got different names, the browser doesn't know that both of these radio buttons 118 07:08.780 --> 07:10.530 are part of the same group. 119 07:11.300 --> 07:18.230 So that's exactly why we have to have the same name attribute for every radio button within the same 120 07:18.410 --> 07:18.820 group. 121 07:20.460 --> 07:20.950 There we go. 122 07:21.750 --> 07:27.090 That's what you'd expect. And what's really cool with all of these input types in HTML is that we 123 07:27.090 --> 07:30.120 have certain attributes available to us straight out of the box. 124 07:30.120 --> 07:37.500 For example, often you'll have a default selected type, or checked type, and we can specify what that 125 07:37.500 --> 07:38.010 is. So say here, 126 07:38.010 --> 07:43.620 we wanted the default push notification selection to be "yes", all we'd have to do is go to our code 127 07:43.620 --> 07:50.460 and within the input type, we introduce a attribute called "checked". And this "checked" is literally 128 07:50.460 --> 07:51.840 just a boolean value. 129 07:51.840 --> 07:53.040 It doesn't have to equal anything, 130 07:53.040 --> 07:54.420 it's either there or it's not. 131 07:54.900 --> 07:59.550 And if we go to the browser now and look at that, the "yes" is automatically checked. 132 08:00.360 --> 08:05.040 So if there's one thing I want you to remember from this, its that with radio buttons, the user cannot type 133 08:05.040 --> 08:06.840 in their own value. 134 08:07.050 --> 08:13.860 And this is why it's so important that each radio button needs to have the own unique "value". And that 135 08:13.860 --> 08:18.100 information will be submitted to the server when the user submits this form. 136 08:18.630 --> 08:23.340 But before we move on, I just want to quickly recap this radio button in another lecture, and then we will 137 08:23.340 --> 08:27.720 continue to style this, and we'll continue to build this awesome form. See you in the next lecture.