WEBVTT 0 00:00.230 --> 00:01.940 Before we move on 1 00:01.940 --> 00:07.430 you know, it may be quite confusing, because I said that one of the benefits of using the form attribute 2 00:07.430 --> 00:14.150 on <fieldset> is that you can associate it with a form, and it may help you with styling purposes. 3 00:14.150 --> 00:18.470 Well, yes, I could have just stopped there and moved on, but if you're anything like me, you're 4 00:18.470 --> 00:20.960 quite curious and you want to know exactly what that means. 5 00:20.960 --> 00:27.080 So, I know this is going to be quite a bad example, but at least it'll show you how you could use it 6 00:27.080 --> 00:28.310 should you want to. 7 00:28.310 --> 00:29.270 So here we go. 8 00:29.270 --> 00:29.960 Here's the form 9 00:29.960 --> 00:31.220 we coded up together. 10 00:31.220 --> 00:36.980 And what if we wanted to style everything a certain colour, but only those things that are related 11 00:36.980 --> 00:37.970 to our form? 12 00:37.970 --> 00:43.970 Well, yes, we could go into our file and, you know, put IDs on everything and target everything, 13 00:43.970 --> 00:47.210 but that's a real nuisance and it's very tedious 😫. 14 00:47.210 --> 00:49.580 So how can we go about doing this in a more efficient way? 15 00:49.580 --> 00:51.500 Well, we can use the form attribute. 16 00:51.500 --> 00:55.040 So here you can see, we've put the form attribute on the <fieldset> element. 17 00:55.040 --> 00:58.730 And the value of that form attribute needs to match the ID of the form. 18 00:58.730 --> 01:01.160 So if we scroll up, we've got our form, 19 01:01.160 --> 01:03.950 and there's the ID, "main-form". 20 01:05.840 --> 01:07.580 Okay, so we've done that. 21 01:08.060 --> 01:13.460 And as you saw in the lecture, we've also put that form attribute on each input widget. 22 01:14.860 --> 01:17.560 So now we've associated all these with the main form. 23 01:17.560 --> 01:19.960 How can we go about styling it very quickly? 24 01:19.960 --> 01:22.480 Well it's super, super easy. 25 01:22.510 --> 01:25.720 All we need to do is write a bit of JavaScript. 26 01:25.720 --> 01:30.460 If you've done my JavaScript course, you know JavaScript is always within <script> tags. And all I want 27 01:30.460 --> 01:34.270 to do now, is I want to use the elements() method. 28 01:34.270 --> 01:40.720 And the elements() method or property comes from the HTMLFormElement API. 29 01:40.720 --> 01:40.930 Okay. 30 01:40.930 --> 01:42.010 Don't worry about what that is. 31 01:42.010 --> 01:46.360 It's just something the browser gives us every time you write a form. 32 01:46.540 --> 01:48.310 Okay, so let me show you what I mean. 33 01:49.430 --> 01:50.660 Let me just write a comment. 34 01:50.660 --> 01:52.700 The elements method 35 01:53.840 --> 01:58.400 returns an HTMLFormControlsCollection 36 01:58.400 --> 01:59.270 Collection, 37 01:59.660 --> 02:00.800 listing 38 02:02.070 --> 02:09.120 all of the form controls contained in the <form> element. 39 02:10.410 --> 02:12.030 And this is important as well. 40 02:12.030 --> 02:19.650 It only lists the form controls, the widgets - the input types, effectively in our code here. 41 02:22.880 --> 02:28.790 So that's important. That first label under the form, will not be selected. 42 02:29.820 --> 02:32.250 But anyway, let's keep going. 43 02:32.400 --> 02:34.260 There's our description. 44 02:34.260 --> 02:35.340 How does this work? 45 02:35.370 --> 02:37.080 Well, it's very, very simple. 46 02:37.080 --> 02:40.740 All I want to do is I want to grab all widgets in our form. 47 02:40.740 --> 02:42.960 In order to do so, let's grab our form. 48 02:42.960 --> 02:45.450 Let's define a variable called formElements. 49 02:45.450 --> 02:48.720 And I'm just using JavaScript's `let` keyword. 50 02:48.720 --> 02:53.460 And I'm going to assign that the value of document.getElementById(), 51 02:53.460 --> 02:56.910 and we know our form has an ID of `main-form`. 52 02:56.910 --> 02:59.430 And this is what I mean by using the `elements` method. 53 02:59.430 --> 03:04.830 We know if we get the form like this, what's going to be returned to us is the form element right, 54 03:04.830 --> 03:11.430 which is of type HTMLFormElement and there's a method on that, or a property, called elements. 55 03:11.820 --> 03:17.760 And to prove what this is, let's just console.log() this out to the screen - formElements. 56 03:19.050 --> 03:19.500 Right. 57 03:19.500 --> 03:20.520 Let's save this. 58 03:20.520 --> 03:21.780 Let's go to our browser. 59 03:22.050 --> 03:22.380 Okay. 60 03:22.380 --> 03:23.520 Let's inspect this. 61 03:23.550 --> 03:25.440 Go to the console, and there we go 🎉. 62 03:25.440 --> 03:28.380 We've got an HTMLFormControlsCollection. 63 03:28.380 --> 03:30.480 And it consists of five items. 64 03:30.480 --> 03:31.500 How cool is that. 65 03:31.500 --> 03:34.620 So if you wanted to style all of these, let's say we want to make the color red. 66 03:34.620 --> 03:36.630 All we need to do is loop through it, 67 03:36.720 --> 03:37.110 right. 68 03:37.110 --> 03:41.520 And let's just use a quick `for...of` loop, and we can just say item. 69 03:42.030 --> 03:43.350 Or we can even call it ... you know what, 70 03:43.350 --> 03:47.910 let's call it a formWidget of formElements. 71 03:48.270 --> 03:51.390 And here we can just grab the form widget. 72 03:52.630 --> 03:55.120 We can set its style, color 73 03:56.040 --> 03:56.880 to red. 74 03:57.120 --> 03:58.320 This is just what I wanted to show you. 75 03:58.320 --> 03:59.580 Let's go back to the browser. 76 04:01.120 --> 04:02.050 And boom 💥! 77 04:02.440 --> 04:03.820 How awesome is this? 78 04:03.850 --> 04:05.200 This is just an example, right? 79 04:05.200 --> 04:06.400 And everything is red. 80 04:06.490 --> 04:10.810 And this is what I wanted to show you. By using that form attribute, 81 04:10.840 --> 04:15.970 it kind of gives you more control in terms of styling, especially when we use it on the <fieldset> element. 82 04:16.300 --> 04:20.710 The usage of that form attribute is a little bit confusing, I'll be honest with you, because if you 83 04:20.710 --> 04:26.140 want each input element inside the <fieldset> to be associated with the form, you have to use that form 84 04:26.140 --> 04:28.570 attribute directly on those elements as well. 85 04:28.810 --> 04:29.680 So there we go. 86 04:29.680 --> 04:30.490 Hope this makes sense. 87 04:30.490 --> 04:34.210 Hope you can kind of see, you know, a scenario in which you may use it one day. 88 04:34.390 --> 04:35.380 But enough said. 89 04:35.380 --> 04:36.580 Let's move on.