WEBVTT 0 00:00.200 --> 00:00.890 Here we are. 1 00:00.890 --> 00:06.500 We've got a blank file open and you'll see we've got a blank browser. 2 00:06.590 --> 00:07.070 Okay. 3 00:07.100 --> 00:09.230 But, there's nothing in here, obviously. 4 00:09.260 --> 00:12.380 Let's create an HTML template. 5 00:12.860 --> 00:15.410 Here we want a body. In the body 6 00:15.410 --> 00:17.270 we want to start with our form. 7 00:17.270 --> 00:18.230 We don't need an action. 8 00:18.230 --> 00:19.550 We're not submitting this form. 9 00:19.550 --> 00:23.030 And let me put the browser side by side so you can see what's going on. 10 00:23.330 --> 00:24.560 So what is the first step? 11 00:24.560 --> 00:27.890 How do we create that border around the group of controls? 12 00:27.890 --> 00:28.700 That's right. 13 00:28.700 --> 00:34.880 We use the fieldset element. And if we even save this, we can see that on the browser 14 00:34.880 --> 00:37.460 it's already created that box. And that box styling is there 15 00:37.460 --> 00:38.930 by default. We can change it. 16 00:38.930 --> 00:40.820 But for now that's not what I want to concentrate on. 17 00:40.820 --> 00:44.300 I want to build those controls and I want us to have a heading. 18 00:44.300 --> 00:46.220 I just want us to start off simple. 19 00:46.220 --> 00:46.910 So what's next? 20 00:46.910 --> 00:49.220 How do we choose ... or how do we add that heading, 21 00:49.250 --> 00:50.780 "Choose your favorite fruit" 22 00:51.050 --> 00:53.870 That's right, my dear Students => legend. 23 00:54.660 --> 00:56.070 I'm glad you've been listening to me. 24 00:56.070 --> 01:00.870 And of course we can just go "Choose your favorite fruit". 25 01:00.900 --> 01:01.630 How's that? 26 01:01.670 --> 01:03.320 Man, that's already starting to look good. 27 01:03.330 --> 01:03.780 All right. 28 01:03.780 --> 01:08.160 And then the next question is, how do we create those selections? 29 01:08.250 --> 01:13.050 Remember, I gave you a clue that the input type must be set to radio? Forms, as we mentioned, are 30 01:13.050 --> 01:14.250 just HTML markup 31 01:14.250 --> 01:16.860 so we have a lot of flexibility as to how to do this. 32 01:16.890 --> 01:20.490 And you may not have done it the same as me, and that's entirely okay. 33 01:20.580 --> 01:24.450 I'm just going to use a paragraph tag to wrap everything in it. 34 01:24.450 --> 01:30.720 The reason I use paragraphs quite often, by the way, is that by default, browsers apply a display 35 01:30.720 --> 01:31.650 property of block. 36 01:31.650 --> 01:37.650 So it just means each new input widget will be on its own line, and also some nice margins are applied to 37 01:37.650 --> 01:38.190 a paragraph. 38 01:38.190 --> 01:39.360 So it just makes it look better, 39 01:39.360 --> 01:42.900 and I don't have to bother by, you know, styling it myself in CSS. 40 01:42.930 --> 01:46.950 Okay, well, let's put a label element now because that's just good practice. 41 01:46.950 --> 01:48.960 I'm going to do something slightly different. 42 01:48.990 --> 01:53.730 We're going to be talking about the label element shortly, but I'm going to now wrap our entire input 43 01:53.730 --> 01:55.690 between the label tags. 44 01:57.230 --> 01:59.970 This is where I want to put my input, and I want it to be a ratio 45 01:59.990 --> 02:02.730 as I mentioned. If we save this, you can already see the radio. 46 02:02.750 --> 02:04.280 If I hover it, I check it. 47 02:04.280 --> 02:07.070 And that blue kind of highlight is the default. 48 02:07.250 --> 02:08.510 That's what the browser does. 49 02:09.080 --> 02:09.860 Quite interesting. 50 02:10.070 --> 02:14.300 The name of all the radio buttons have to be the same. Again, 51 02:14.300 --> 02:17.660 we haven't done this yet, but we're going to look at this later on in the course. 52 02:18.080 --> 02:21.110 And then each value that's sent to the server needs to be unique. 53 02:21.110 --> 02:26.300 So in this case, let's say this fruit is cherry and of course we need a label. 54 02:26.300 --> 02:27.020 So there you go. 55 02:27.020 --> 02:33.250 A benefit with having a label is if the user clicks on cherry, the actual radio button gets selected. 56 02:33.260 --> 02:35.750 So you can see how easy this is, right? 57 02:35.750 --> 02:40.400 And all we have to do to duplicate this process is copy and paste this paragraph. 58 02:41.340 --> 02:41.790 There we go. 59 02:41.820 --> 02:42.080 Cherry 🍒. 60 02:42.080 --> 02:42.380 Cherry 🍒. 61 02:42.380 --> 02:42.930 Cherry 🍒. 62 02:43.020 --> 02:47.330 Remember, the names have to stay the same, so I'm going to keep names, fruit. 63 02:47.340 --> 02:50.970 But of course, the next fruit is not going to be cherry. 64 02:51.000 --> 02:52.560 It's going to be banana 🍌. 65 02:54.490 --> 02:54.670 Banana. 66 02:57.150 --> 02:57.840 (song: banana) 67 02:57.960 --> 03:04.470 Bah bah bah bah bah bah bah bah bah bah bah bah bah bah bah bah. 68 03:05.010 --> 03:06.900 And the last one can be, 69 03:08.060 --> 03:09.500 strawberry 🍓. 70 03:10.010 --> 03:11.200 Let's have a capital S here. 71 03:12.910 --> 03:13.690 Save that. 72 03:13.690 --> 03:14.530 And there we go. 73 03:14.530 --> 03:20.680 And what's cool, when we set the same name attribute in our example as fruit for each one, it toggles 74 03:20.680 --> 03:22.930 the selections of each radio button. 75 03:22.930 --> 03:23.530 So here we go. 76 03:23.530 --> 03:25.150 This is what it looks like in the browser. 77 03:25.150 --> 03:27.520 You can see that it's stretched across the entire screen. 78 03:27.520 --> 03:28.960 So we're not quite done, are we? 79 03:28.990 --> 03:29.620 No. 80 03:29.650 --> 03:30.760 Let's go to our 81 03:31.630 --> 03:32.140 code here. 82 03:33.310 --> 03:35.380 In the very top, in the head section, 83 03:35.380 --> 03:37.870 let's style up a few things. 84 03:38.080 --> 03:42.130 And the most simple, simple thing I want to style is this fieldset element. 85 03:42.130 --> 03:45.100 We want to make its width 50%, right? 86 03:45.100 --> 03:49.600 And if we go back to our browser, you can see now it's 50%, but we want to center it. 87 03:49.600 --> 03:50.770 So we go back here. 88 03:50.860 --> 03:57.040 All we do is we add a margin of zero and auto. Let's go back to our browser and boom 💥, there we go. 89 03:57.040 --> 04:00.010 And if you got to this point, well done, right? 90 04:00.010 --> 04:05.350 I just wanted to re-emphasize the fieldset and legend, how useful and how quick it can be for us to 91 04:05.350 --> 04:07.240 design cool looking forms. 92 04:07.270 --> 04:08.450 Aren't you excited? 93 04:08.470 --> 04:09.630 So well done. 94 04:09.640 --> 04:16.840 If now you want to understand the CSS behind making these really funky, there's a few things we've 95 04:16.840 --> 04:17.200 got to do. 96 04:17.230 --> 04:22.340 Firstly, we have to design our own toggles literally from scratch. 97 04:22.360 --> 04:26.200 You don't have to continue watching the remainder of the solution 98 04:26.200 --> 04:32.900 if you don't want to learn about CSS or if you know CSS already.