WEBVTT 0 00:00.170 --> 00:00.530 Awesome, 1 00:00.530 --> 00:01.130 welcome back. 2 00:01.130 --> 00:06.560 And now I do want to code this up with you because I think it's just important to drive home a scenario 3 00:06.560 --> 00:10.190 where you will split up your form across your entire HTML page. 4 00:10.190 --> 00:13.040 I know you might be thinking, when would you ever want to do this? 5 00:13.070 --> 00:17.510 Trust me, every single website, every single client you have will have different needs. 6 00:17.510 --> 00:22.070 And that's why as developers, we have to have so much flexibility when it comes to code. 7 00:22.100 --> 00:22.700 Okay. 8 00:22.700 --> 00:23.870 Anyway, let's start. 9 00:23.870 --> 00:30.350 So, HTML. I'm going to have a head and style section here because I'm assuming we're going to have to style 10 00:30.350 --> 00:31.370 something later. 11 00:32.070 --> 00:33.360 And then let's start. 12 00:33.360 --> 00:35.100 So let's wrap everything in our body. 13 00:35.130 --> 00:36.990 Firstly, let's have a heading. 14 00:36.990 --> 00:39.120 And in here, let's just do a heading. 15 00:39.120 --> 00:41.460 "Let's use the 16 00:43.250 --> 00:45.620 form attribute." 17 00:47.790 --> 00:48.750 Pretty straightforward. 18 00:49.200 --> 00:50.310 Let's see what it looks like. 19 00:50.520 --> 00:51.120 There you go. 20 00:51.840 --> 00:54.150 I'll actually put it here so you can see it as we go on. 21 00:54.180 --> 00:54.720 How's that? 22 00:54.750 --> 00:57.300 Now, what I want to do is I want to create our form. 23 00:57.630 --> 00:59.310 Create form. 24 00:59.850 --> 01:01.800 It's good to have comments in your code. 25 01:04.670 --> 01:06.200 Action doesn't matter. 26 01:06.200 --> 01:08.050 But I just want to be explicit here. 27 01:08.060 --> 01:09.560 I do want to use a GET request. 28 01:09.560 --> 01:11.930 I know this is the default, so we didn't have to do it. 29 01:11.930 --> 01:17.120 But I want to be explicit and I want a GET request because I want to see what fields are being submitted 30 01:17.390 --> 01:18.260 in this form. 31 01:19.390 --> 01:25.900 Now I just want a label because it's good, good practice. And we can do a label and call it "animal". 32 01:27.030 --> 01:32.460 And we can ask the user, "What's your favorite animal?" 33 01:33.650 --> 01:35.810 We can then have an input of type text. 34 01:35.990 --> 01:45.230 The name can be fav-animal, and the ID has to match what's on that for attribute, and we named it "animal", remember? 35 01:45.230 --> 01:47.460 And then of course we need to be able to submit the form. 36 01:47.480 --> 01:50.600 So let's just do input type of submit. 37 01:51.580 --> 01:52.930 And the value ... 38 01:52.960 --> 01:54.190 we don't even need a value. 39 01:54.340 --> 01:54.940 How's that? 40 01:55.120 --> 01:55.510 All right. 41 01:55.510 --> 01:55.850 All right. 42 01:55.880 --> 01:56.950 It's starting to take shape. 43 01:56.950 --> 01:59.290 And obviously now, what's your favorite animal? 44 01:59.290 --> 02:03.130 We can call it a warthog 🐗, because, let's face it, it's a cool animal. 45 02:03.130 --> 02:09.670 When we submit, we can see that what's submitted to the server via a GET request is "fav-animal=warthog". 46 02:10.780 --> 02:13.690 Right. Nothing untoward, nothing we wouldn't expect. 47 02:13.720 --> 02:15.940 So that's our form, my dear students. 48 02:15.940 --> 02:17.050 That's our form. 49 02:17.050 --> 02:18.730 But let's now leave the form. 50 02:18.730 --> 02:21.370 So now we are outside of the form. 51 02:21.460 --> 02:27.430 Let's say we have a paragraph just with some lorem ipsum and then let's break it up with a line. 52 02:27.430 --> 02:34.000 Okay, let's say we've got a div, say there's nothing in the div, let's give it an ID of "line". 53 02:34.000 --> 02:35.050 Save this. 54 02:35.080 --> 02:36.250 What does it look like. 55 02:36.430 --> 02:36.880 Okay. 56 02:36.880 --> 02:38.410 So that's what it looks like on the browser. 57 02:39.330 --> 02:41.310 We can't see a line, and I want a line. 58 02:41.310 --> 02:44.780 I just want to kind-of show you that we can put a lot of HTML there. 59 02:44.790 --> 02:46.850 So just view the line as a lot of HTML. 60 02:46.860 --> 02:50.910 So all I want to do is style that line, so we can actually see it on the screen. 61 02:52.010 --> 02:53.060 It's going to be very simple. 62 02:53.060 --> 02:56.960 I just want a border-top, one pixel solid. 63 02:58.230 --> 02:58.800 There we go. 64 02:58.830 --> 02:59.730 How does that look? 65 03:00.990 --> 03:05.070 Let's just give it a width of 50%, and center it. 66 03:07.320 --> 03:08.400 Yeah, I think that's fine. 67 03:08.410 --> 03:09.420 I think that's fine. 68 03:09.930 --> 03:10.600 There we go. 69 03:10.600 --> 03:11.850 So that's our site so far. 70 03:11.850 --> 03:13.590 And let me include a comment here. 71 03:14.920 --> 03:21.670 "Other website designs and sections" 72 03:25.320 --> 03:39.330 Now what I want to do, is let's now create a fieldset HTML element, but it's outside of our 73 03:40.730 --> 03:42.080 form, remember? 74 03:42.350 --> 03:48.530 But we still want it to be part of the form. 75 03:49.220 --> 03:55.100 And what I mean by this, is that when we submit that button at the top, you know, what's your favorite 76 03:55.100 --> 04:00.590 animal? Submit. If the user has filled in the information below, I want that to be submitted alongside with 77 04:00.590 --> 04:01.010 it. 78 04:01.550 --> 04:03.080 And we could have actually reversed this. 79 04:03.110 --> 04:06.500 We could have asked for the favorite animal and only put the Submit button at the bottom, which would 80 04:06.500 --> 04:07.850 make more intuitive sense. 81 04:08.030 --> 04:09.500 But this is just an example. 82 04:09.500 --> 04:11.390 I just want you to understand how it works. 83 04:11.390 --> 04:11.930 Okay. 84 04:12.350 --> 04:15.710 So I'm not too worried about the UI experience. 85 04:16.040 --> 04:18.770 So let's include another fieldset element here, 86 04:19.590 --> 04:19.970 right. 87 04:20.460 --> 04:23.070 This is how it looks like on the browser as we build it. 88 04:23.790 --> 04:24.360 Yep. 89 04:24.480 --> 04:26.190 I want a legend, you guessed it. 90 04:26.460 --> 04:30.270 Tell us more about your favorite 91 04:32.330 --> 04:32.690 animal. 92 04:33.590 --> 04:33.860 Right. 93 04:33.860 --> 04:35.870 Because we're continuing on from the top 94 04:35.870 --> 04:37.470 question - what is your favorite animal? 95 04:37.490 --> 04:40.190 So here, we could have a label for eat. 96 04:41.000 --> 04:42.530 What does it eat? 97 04:43.390 --> 04:45.880 And of course it needs an associated input, doesn't it? 98 04:46.140 --> 04:47.530 It can be type text. 99 04:47.740 --> 04:50.170 Its name can be fav-food. 100 04:50.440 --> 04:54.040 Its ID has to be "eat" - it has to match that for value. 101 04:54.040 --> 04:55.480 And then I just want to break it up, 102 04:55.480 --> 04:57.460 break it up. And should we do one more? 103 04:57.490 --> 04:58.270 Let's do one more. 104 04:59.320 --> 05:01.510 Label for name. 105 05:02.050 --> 05:05.020 What is the name of your animal? 106 05:07.080 --> 05:10.080 And of course it needs an input type, of text. 107 05:10.110 --> 05:13.080 The name can be fav-name. 108 05:13.200 --> 05:16.470 The ID has to match the for, which we've given as name. 109 05:17.340 --> 05:18.240 Let's save this. 110 05:18.410 --> 05:19.680 Whew, I know we're doing a lot. 111 05:19.710 --> 05:20.550 We're doing a lot. 112 05:20.700 --> 05:21.840 This is what I want to show you. 113 05:22.080 --> 05:23.080 Let's just look at our browser. 114 05:23.100 --> 05:28.890 Firstly, if we say here, the warthog eats grass and the name of the warthog is Wally 115 05:29.430 --> 05:31.440 and what's your favorite animal, 116 05:31.470 --> 05:32.160 warthog. 117 05:32.160 --> 05:35.070 What is the default approach if the user clicks submit? 118 05:35.100 --> 05:36.510 What do you think would happen? 119 05:37.830 --> 05:39.480 Well, 100% correct ✅. 120 05:39.480 --> 05:46.200 It's not going to submit the below information because as far as the browser is concerned, this bottom 121 05:46.200 --> 05:49.920 fieldset has NOTHING to do with the form 122 05:50.220 --> 05:50.760 right. 123 05:50.760 --> 05:55.290 Another way to prove this to you, is if we inspect this, not to view page source ... if we inspect this 124 05:55.290 --> 05:56.010 element, 125 05:56.220 --> 06:02.790 okay, let's go to the console. And let's grab our fieldset element. And let's define it in a variable 126 06:02.790 --> 06:03.900 called field, 127 06:04.470 --> 06:05.010 right? 128 06:05.040 --> 06:08.880 If you've done my DOM course, you'll know exactly how this works and what the DOM is. 129 06:08.910 --> 06:12.990 But I just want to use a method called getElementsByTag() name. 130 06:13.440 --> 06:13.890 There you go, 131 06:13.890 --> 06:15.330 getElementsByTag(). 132 06:15.330 --> 06:24.780 We know that the tag name is fieldset, and this returns an HTMLCollection. and we want the first item 133 06:24.780 --> 06:28.440 in that collection because we only have one fieldset, right? Now, 134 06:28.440 --> 06:33.510 all I want to do is I want to console.dir() out this fieldset variable. 135 06:35.260 --> 06:36.640 This is what I want to show you. 136 06:36.640 --> 06:42.460 If we open it up, and we scroll down, I want to show you what the form attribute is. 137 06:42.490 --> 06:43.150 Where's "form"? 138 06:43.150 --> 06:43.960 There it is. 139 06:43.990 --> 06:44.770 Can you see it? 140 06:45.680 --> 06:46.240 Form. 141 06:46.250 --> 06:48.380 It says it's null, right? 142 06:48.380 --> 06:51.230 It's not associated with any form. 143 06:51.230 --> 06:54.460 We haven't used the form attribute on fieldset in any way. 144 06:54.470 --> 06:56.720 That's the first thing I wanted to show you. 145 06:56.720 --> 07:02.240 The other thing here, just while we are on the on this, um, on this JSON representation format here, look at 146 07:02.240 --> 07:04.010 this disabled attribute. 147 07:04.010 --> 07:08.330 Remember we looked at the disabled example? Well, here the disabled attribute is not set, and that's why 148 07:08.330 --> 07:09.110 it's false. 149 07:09.110 --> 07:10.610 So pretty cool, right? 150 07:10.820 --> 07:11.780 Um, yeah. 151 07:11.780 --> 07:12.650 So let's close this. 152 07:12.650 --> 07:19.190 Let's go back to our Visual Studio Code, and let's now, on this fieldset element, let's now put this 153 07:19.190 --> 07:20.210 form attribute. 154 07:20.450 --> 07:25.760 And this form attribute has to equal the ID of the main form we want it to relate to. 155 07:26.060 --> 07:29.270 So let's call it main ... mainForm. 156 07:29.270 --> 07:29.960 How is that? 157 07:31.200 --> 07:33.150 And if we go to the main form, 158 07:33.150 --> 07:34.680 we haven't put an ID, have we? 159 07:34.710 --> 07:39.330 So, as the ID, let's have mainForm. Save this, 160 07:39.480 --> 07:44.010 let's now inspect this and do exactly the same. 161 07:44.870 --> 07:46.900 Define the field, and console.dir(), 162 07:47.360 --> 07:48.490 and here we go. 163 07:48.500 --> 07:50.150 Let's find that form attribute now. 164 07:50.150 --> 07:51.920 And I'm just going to search quickly - 165 07:51.920 --> 07:52.610 it'll be quicker. 166 07:52.640 --> 07:53.450 It'll be faster. 167 07:54.820 --> 07:55.480 There you go. 168 07:55.510 --> 07:57.550 How cool is that? 169 07:57.580 --> 08:00.700 We found the form, and now it's form 170 08:00.700 --> 08:02.800 attribute is set to the mainForm. 171 08:02.800 --> 08:08.230 And if you open that up, obviously it's got the input types and it's got the fieldset that we're talking 172 08:08.230 --> 08:08.440 about 173 08:08.680 --> 08:10.960 you know, in this scenario. 174 08:10.960 --> 08:13.990 So it's really, really useful, really, really cool. 175 08:14.020 --> 08:20.830 But remember what I said, that even though, you know, for HTML purposes, and for CSS DOM access point of view, 176 08:20.860 --> 08:29.170 we may want this on the actual fieldset itself, but, it still won't allow us to use the inputs and 177 08:29.170 --> 08:30.460 associate them with the form. 178 08:30.460 --> 08:32.980 So, if here we've got warthog. 179 08:33.940 --> 08:34.630 What does it eat? 180 08:34.660 --> 08:35.440 Grass. 181 08:35.470 --> 08:36.550 What is the name? 182 08:36.550 --> 08:36.940 Wally. 183 08:36.940 --> 08:38.080 If we submit. 184 08:38.860 --> 08:43.270 Even though we put that form attribute on the fieldset, it still does not submit all the information! 185 08:43.270 --> 08:44.440 You can see in the GET request, 186 08:44.440 --> 08:46.690 only one variable has been submitted. 187 08:46.690 --> 08:54.220 So, what we have to do is we have to put that form attribute on each individual widget. 188 08:55.090 --> 08:56.590 So let's scroll down here. 189 08:56.620 --> 09:02.890 You can see here we've got this form attribute on the fieldset, but that doesn't allow us to send 190 09:02.890 --> 09:04.870 each input widget, does it? 191 09:05.320 --> 09:05.980 No. 192 09:06.100 --> 09:12.490 So we have to go inside the fieldset and on each input, on each input that you want to relate to the 193 09:12.490 --> 09:14.110 form and send it along with the form, 194 09:14.110 --> 09:16.270 we have to include this attribute as well. 195 09:16.450 --> 09:18.280 So I've just done it on both inputs. 196 09:18.280 --> 09:20.260 This now, my dear student should work. 197 09:20.260 --> 09:21.420 What's your favorite animal? 198 09:21.430 --> 09:22.000 Warthog. 199 09:22.000 --> 09:22.750 What does it eat? 200 09:22.780 --> 09:23.430 Grass. 201 09:23.440 --> 09:24.460 What is the name? 202 09:24.460 --> 09:24.970 Wally. 203 09:25.270 --> 09:26.710 Let's submit this. 204 09:27.570 --> 09:29.100 And boom 💥! 205 09:29.520 --> 09:31.380 How cool is that? 206 09:31.470 --> 09:32.180 So there you go. 207 09:32.190 --> 09:35.400 This is just one example where you have a complicated site 208 09:35.400 --> 09:37.160 maybe, there's a lot going on ... 209 09:37.170 --> 09:40.710 you ask the user one question at the top, you continue your form later on. 210 09:40.710 --> 09:45.540 Like I said, we could have, you know, shuffled things around and put the form at the bottom of the 211 09:45.540 --> 09:47.130 page and associated controls above. 212 09:47.160 --> 09:49.320 It doesn't matter how you shuffle it all up. 213 09:49.830 --> 09:56.820 The point that I'm trying to make is that this form attribute, we can put it on this fieldset, but 214 09:56.820 --> 09:57.870 it doesn't do much. 215 09:57.900 --> 09:59.190 It doesn't do much 216 09:59.190 --> 10:04.200 when you come to submit the form. If you want to, you know, have dynamic styling, if you want to 217 10:04.200 --> 10:09.090 access that fieldset in an easy way, then sometimes putting this form attribute on there does help. 218 10:09.090 --> 10:12.300 But most of the time what you're going to want to do is you're going to want to put this form attribute 219 10:12.300 --> 10:15.360 on the individual widgets that you want to relate to the form. 220 10:15.780 --> 10:16.080 Okay. 221 10:16.080 --> 10:17.010 Does that make sense? 222 10:17.460 --> 10:23.460 I know, I know we're going through a lot and sometimes I'm rushing, you know, I'm sorry if I'm going 223 10:23.460 --> 10:24.210 too quick. 224 10:25.320 --> 10:28.150 If you have any questions, please post them on Q&A. 225 10:28.420 --> 10:29.350 But enough said. 226 10:29.350 --> 10:32.020 We've got a lot to cover, so let's move on.