WEBVTT 0 00:00.170 --> 00:01.790 Here we are, in Visual Studio Code. 1 00:01.790 --> 00:07.730 I've got an empty folder open called FIELDSET and I've just got one image in this folder, a PNG that I've 2 00:07.730 --> 00:08.580 just created. 3 00:08.600 --> 00:13.970 "Forms are awesome and yes, I really do hope you're enjoying this course", and you'll see how we use that 4 00:13.970 --> 00:14.780 in a second. 5 00:14.810 --> 00:20.690 So fieldset elements can be used on things other than just forms, and they commonly are. 6 00:20.720 --> 00:22.180 They are very, very powerful. 7 00:22.190 --> 00:23.510 So let me show you an example. 8 00:23.510 --> 00:26.690 Firstly, they can be used to wrap any HTML content. 9 00:27.050 --> 00:29.630 Let's just call our first file, 10 00:29.630 --> 00:31.130 fieldset1. 11 00:31.460 --> 00:32.120 See here we are. 12 00:32.120 --> 00:37.550 We've got an HTML file, called fieldset1. And I want it to be very, very simple. 13 00:37.640 --> 00:40.550 Let's just create HTML. Within here, 14 00:40.580 --> 00:45.200 let's have a body and you guessed it, let's use our fieldset. 15 00:46.340 --> 00:48.950 And let's have a paragraph and then just some lorem ipsum. 16 00:49.280 --> 00:50.270 Very, very simple. 17 00:51.140 --> 00:52.070 Let's go live. 18 00:53.290 --> 00:54.340 You'll see this on the browser. 19 00:55.540 --> 00:56.660 Can you see what it's done? 20 00:56.680 --> 01:00.370 It's given everything a cool looking border, straight out of the box. 21 01:00.370 --> 01:01.330 How cool is that 😎? 22 01:01.720 --> 01:02.610 Let's go back here. 23 01:02.620 --> 01:06.340 What I want to do, is let's just provide a bit of styling. 24 01:08.000 --> 01:10.550 And let's just reduce the whole width. 25 01:10.610 --> 01:12.500 I don't want it going across the whole screen. 26 01:13.830 --> 01:16.170 Okay, let's adjust some margin. 27 01:18.860 --> 01:19.930 We can center it. 28 01:19.960 --> 01:20.900 Let's go back. 29 01:20.990 --> 01:21.800 There we go. 30 01:21.830 --> 01:22.430 How cool is it? 31 01:22.820 --> 01:23.440 That's how fieldset 32 01:23.480 --> 01:24.340 works. 33 01:24.350 --> 01:27.200 But you may be thinking, what about the legend? 34 01:27.230 --> 01:28.400 Well, that's a great question. 35 01:28.400 --> 01:29.540 So let's add the legend. 36 01:29.890 --> 01:30.650 I don't know. 37 01:30.680 --> 01:32.240 A Funny Joke. 38 01:33.230 --> 01:34.220 Let's go back to the browser, 39 01:36.090 --> 01:37.380 and that's how it looks. 40 01:37.430 --> 01:41.430 It literally adds that cool caption, that title to your fieldset. 41 01:41.460 --> 01:41.910 Okay, great. 42 01:41.910 --> 01:42.270 Clyde. 43 01:42.300 --> 01:43.270 That's content. 44 01:43.290 --> 01:47.430 But now the next thing it can wrap are images. 45 01:47.460 --> 01:50.520 Okay, so how would we go about wrapping an image within a fieldset? 46 01:50.550 --> 01:53.030 Well, firstly, let's copy and save this file. 47 01:53.040 --> 01:56.520 But now let's call it fieldset2. 48 01:58.650 --> 01:59.340 There we go. 49 01:59.550 --> 02:00.640 Let's get rid of that. 50 02:00.660 --> 02:09.120 So for a legend, for the title of our image, let's just say "A cool looking form image". 51 02:11.750 --> 02:12.200 Very simple. 52 02:12.200 --> 02:13.880 Now, we don't want a paragraph, do we? 53 02:13.910 --> 02:15.170 We want an image. 54 02:16.130 --> 02:22.070 The source of the image is in the same directory, and it's called "forms_are_awesome.PNG". 55 02:23.240 --> 02:24.020 So there we go. 56 02:24.980 --> 02:26.330 You're going to have a bit of a problem here. 57 02:26.360 --> 02:28.370 Let me just get rid of the body styling. 58 02:29.090 --> 02:30.410 Let's go to the browser. 59 02:31.280 --> 02:32.690 Oh, we are on fieldset1, 60 02:33.230 --> 02:35.150 let me just change it to fieldset2. 61 02:36.120 --> 02:37.570 And it's just massive. 62 02:37.590 --> 02:44.220 So let's just quickly style this and you can see the fieldset in a bit more detail. And often I create 63 02:44.220 --> 02:45.360 root variables. 64 02:47.320 --> 02:50.170 It's almost like using variables with CSS. 65 02:50.380 --> 02:54.880 Very, very good thing to do because it just saves you a ton of time later, especially when sites start 66 02:54.880 --> 02:57.110 becoming really, really complex. 67 02:57.110 --> 02:59.380 So I only want this image to be 700 pixels. 68 02:59.500 --> 03:01.330 I don't want to go crazy with this thing. 69 03:01.330 --> 03:04.300 What do I want to style next? Well, let's style the fieldset itself. 70 03:05.230 --> 03:11.740 I want to text-align everything to the center, and I want the width to be the width we defined (i.e. the root variable). 71 03:12.650 --> 03:14.450 And then I want everything centered. 72 03:15.510 --> 03:16.750 I think that's it for fieldset. 73 03:16.750 --> 03:22.000 And then lastly, I just want to affect the image, and I want the image to be a certain width and I want 74 03:22.000 --> 03:25.360 that width to be the one we defined above. 75 03:25.760 --> 03:26.920 I think this will look a lot better. 76 03:26.920 --> 03:27.940 Let's go to the browser. 77 03:28.660 --> 03:29.290 Much better. 78 03:30.190 --> 03:32.140 How awesome is this? 79 03:35.180 --> 03:37.990 You can see we've centered the legend. 80 03:38.170 --> 03:39.790 A cool looking form, 81 03:39.790 --> 03:41.380 image, forms are awesome. 82 03:43.000 --> 03:44.780 Whew. Can you see, or 83 03:44.800 --> 03:47.100 start to see how useful this fieldset is. 84 03:47.110 --> 03:49.930 It just really creates a nice feel. 85 03:49.960 --> 03:53.210 Anyways, the moment you've all been waiting for ... 86 03:53.230 --> 03:56.460 drumroll 🥁 ... FORMS! 87 03:56.530 --> 03:59.740 How do we use the fieldset and legend with forms? 88 03:59.770 --> 04:01.630 Well, very, very easily. 89 04:01.720 --> 04:03.220 Let's go to our Visual Studio Code 90 04:03.220 --> 04:07.780 once again, it's copy/paste, and let's call this fieldset3. 91 04:12.090 --> 04:13.530 Let's get rid of all the styling. 92 04:15.090 --> 04:19.630 I'm just going to keep it here because we're probably going to have to style something related in here. 93 04:19.840 --> 04:22.300 Let's delete the fieldset, and let's build a form. 94 04:23.020 --> 04:24.340 We don't need an action. 95 04:24.460 --> 04:25.720 We're not sending it anywhere. 96 04:25.930 --> 04:29.770 And let's say in your form you're asking the user to pick their favorite color. 97 04:29.770 --> 04:34.630 So this would be a good opportune moment to think about a fieldset, because we're going to group all 98 04:34.630 --> 04:38.800 the radio controls within one section, within one heading, 99 04:38.800 --> 04:39.220 right? 100 04:39.220 --> 04:44.980 So it's a good, good opportunity for fieldset. The legend comes next, as you know, and we're asking the 101 04:44.980 --> 04:47.050 user for their favorite color. 102 04:47.590 --> 04:50.680 And now we can start building our form, my dear students. 103 04:50.860 --> 04:57.610 And because a form is effectively just HTML markup, we have a lot of power, a lot of flexibility in 104 04:57.610 --> 04:59.770 or as to how we want to build the form. 105 04:59.950 --> 05:01.900 So here, just to show you something different, 106 05:01.930 --> 05:06.700 why don't we have paragraph elements. And within the paragraph, each paragraph element, we can insert 107 05:06.700 --> 05:07.570 our input. 108 05:07.720 --> 05:13.570 I want this to be of type radio and I know we haven't gone through this yet, but don't worry, we're 109 05:13.570 --> 05:19.010 going to get into a lot more detail later in the course about what this means, and how it works 110 05:19.130 --> 05:25.100 but for now, sit back and just see how the fieldset and legend can label everything. 111 05:25.760 --> 05:26.690 It's very, very cool. 112 05:27.110 --> 05:29.120 Let's do a label because it's good practice. 113 05:29.120 --> 05:33.530 This has to be the same as the ID of the input. 114 05:33.530 --> 05:35.590 So we actually haven't got an ID here. 115 05:35.600 --> 05:40.430 So let me put an ID in. Let's say this is going to be blue and this can be the color blue that the user 116 05:40.430 --> 05:41.270 chooses. 117 05:41.890 --> 05:42.900 Very, very simple. 118 05:42.900 --> 05:46.740 And all I want to do is copy this entire section and let's paste it. 119 05:47.790 --> 05:51.360 But instead of it being blue, let's just make it green. 120 05:52.410 --> 05:53.100 How's that? 121 05:53.370 --> 05:54.870 And we can do even one more. 122 05:55.110 --> 05:58.590 Instead of making a green, why don't we make it yellow. 123 06:00.140 --> 06:02.630 I'm not even going to put a submit button or anything. 124 06:02.630 --> 06:04.000 I just want to show you what it looks like. 125 06:04.010 --> 06:08.930 And in styling, the only thing I want to do is I don't want the fieldset stretched across the entire 126 06:08.930 --> 06:10.880 screen, and that's all happened by default. 127 06:10.880 --> 06:15.140 So all I want to do is target the fieldset element and I want to set its width 128 06:16.580 --> 06:17.930 to 50% of the screen. 129 06:18.350 --> 06:18.950 Very simple. 130 06:18.950 --> 06:22.220 And then, of course, I always like centering things. 131 06:23.510 --> 06:24.620 Let's go to the browser. 132 06:25.490 --> 06:30.560 We are on fieldset3 now, and ... BOOM 💥. 133 06:30.710 --> 06:32.780 How cool is that? 134 06:33.250 --> 06:33.970 (sound: Mission Completed) 135 06:33.980 --> 06:37.400 And you can click on Blue, Green and Yellow. Man, that's cool. 136 06:37.430 --> 06:39.170 So there you go. 137 06:39.170 --> 06:40.530 Proof is in the pudding. 138 06:40.550 --> 06:46.400 We've just seen fieldset has wide ranging uses, and is a very, very useful element for you to know in your 139 06:46.400 --> 06:47.810 career, but we're not quite done with it. 140 06:47.810 --> 06:51.860 There are just a few more things I want to discuss about the fieldset element.