WEBVTT 0 00:00.110 --> 00:00.890 Welcome back. 1 00:00.890 --> 00:03.980 And let's continue talking about the fieldset element. 2 00:04.010 --> 00:09.080 Remember, it's an easy way to create groups of widgets that share the same purpose. 3 00:09.080 --> 00:13.790 And this is useful for styling and semantic purposes. 4 00:13.820 --> 00:17.390 And we've seen how versatile the fieldset element can be. 5 00:17.480 --> 00:19.250 It doesn't only have to be used with forms. 6 00:19.250 --> 00:24.320 We've wrapped images in it, we've wrapped other HTML inside of it, and often it's used by developers 7 00:24.320 --> 00:26.090 in many different scenarios. 8 00:26.090 --> 00:32.900 And we just saw that often we use the legend element with the fieldset element. And it's not just useful 9 00:32.900 --> 00:34.520 for visual reasons. 10 00:35.120 --> 00:37.690 Legend helps for semantic purposes as well. 11 00:37.700 --> 00:45.830 For example, some screen readers such as Jaws or Nvda, for example, they speak the legend's content 12 00:45.830 --> 00:48.410 before speaking the label of each control. 13 00:48.410 --> 00:49.520 And this is useful, right? 14 00:49.520 --> 00:55.130 Because it's basically telling, you know, a visually impaired user what the group of controls is all 15 00:55.130 --> 00:55.670 about. 16 00:55.700 --> 00:56.810 Very, very useful. 17 00:56.840 --> 01:03.240 There are just two important attributes for the fieldset that I want to quickly mention. 18 01:03.480 --> 01:08.310 The first is "disabled" and the second is "form" - disabled and form. 19 01:08.550 --> 01:09.990 What are they all about? 20 01:10.020 --> 01:13.020 Well, firstly, disabled is very intuitive. 21 01:13.410 --> 01:21.240 It just turns off all the elements inside of the fieldset element. And disabled controls are rendered 22 01:21.240 --> 01:25.260 grayed out if visible, and they are blocked from user interaction. 23 01:25.260 --> 01:31.290 And even more importantly, the values, if any, aren't sent when the form is submitted. 24 01:31.320 --> 01:32.670 Let me show you how this works. 25 01:33.150 --> 01:34.110 All right. 26 01:34.140 --> 01:36.990 How does this disabled attribute work? 27 01:37.020 --> 01:39.510 Well, I don't want to keep typing up new files with you. 28 01:39.510 --> 01:41.490 I think it's just going to waste a lot of time. 29 01:41.700 --> 01:43.350 So here, I've already coded something up. 30 01:43.350 --> 01:43.970 Very simple. 31 01:43.980 --> 01:45.570 I've called it fieldset4. 32 01:45.570 --> 01:47.490 And it's very, very simple. 33 01:47.490 --> 01:49.890 I've just got two sections in the form. 34 01:49.890 --> 01:54.530 The one is delivery information, and the other one is subscription information. 35 01:54.600 --> 01:56.130 Two separate topics, 36 01:56.130 --> 01:59.700 therefore each are put into its own fieldset tab. 37 02:00.980 --> 02:01.220 Actually, 38 02:01.220 --> 02:01.520 you know what? 39 02:01.550 --> 02:05.340 Before I put disabled, let's just have a look at what this looks like. 40 02:05.410 --> 02:05.530 Okay. 41 02:05.540 --> 02:06.560 It's very simple form. 42 02:06.560 --> 02:09.380 And then at the very bottom, I've just got a submit value. 43 02:10.510 --> 02:11.120 Right. 44 02:11.170 --> 02:12.370 Very, very simple. 45 02:13.120 --> 02:14.880 So let's look what it looks like on the browser. 46 02:14.890 --> 02:15.590 See here we go. 47 02:15.610 --> 02:20.990 We've got delivery information, subscription information, and we've got our submit button. Straight 48 02:21.010 --> 02:21.340 forward. 49 02:21.340 --> 02:24.850 And right now you can type in your your own email. 50 02:25.600 --> 02:26.800 Okay, Very simple. 51 02:26.800 --> 02:28.510 You can toggle the on and off here. 52 02:28.540 --> 02:30.610 Don't worry about these types. 53 02:31.450 --> 02:35.380 You know, you can see here, this is an input type of checkbox. 54 02:35.380 --> 02:37.110 But we're going to be getting into this later in the course. 55 02:37.130 --> 02:39.730 I don't want you to stress out now with what these all mean. 56 02:39.730 --> 02:43.210 So right now, just try and ignore all the detail and look at the bigger picture, 57 02:43.210 --> 02:45.850 and that is what this disabled attribute does. 58 02:46.210 --> 02:46.540 Okay. 59 02:46.540 --> 02:48.970 So how does the disabled attribute work? 60 02:49.000 --> 02:49.900 That's a great question. 61 02:49.900 --> 02:57.070 Let's say, for example, you might want an entire section to be disabled until something else happens, 62 02:57.070 --> 02:58.120 until there's a trigger. 63 02:58.120 --> 03:03.610 And then with JavaScript we can toggle the attribute of disabled on and off, right? 64 03:03.610 --> 03:07.720 So for now, let's just disable the entire subscription section. 65 03:08.240 --> 03:12.710 So that's this fieldset here. On this fieldset element itself, 66 03:12.710 --> 03:16.280 we just have to type the keyword disabled. 67 03:16.310 --> 03:19.880 Now disabled is a boolean attribute. 68 03:19.910 --> 03:22.820 This just means it's either there or it's not. 69 03:22.850 --> 03:24.990 We don't have to assign it a value. 70 03:25.010 --> 03:27.260 It's not like input "type", for example, 71 03:27.260 --> 03:30.110 that "type" attribute - that type attribute is not a boolean value. 72 03:30.140 --> 03:31.910 We have to assign it a value. 73 03:31.940 --> 03:34.940 You can see for email we've assigned it the value of email. 74 03:34.970 --> 03:38.540 When it comes to disabled, we just have to put it there and it should work. 75 03:38.570 --> 03:41.450 You can see on the browser, already it's worked. 76 03:41.480 --> 03:42.590 It's all disabled. 77 03:42.590 --> 03:46.460 You can't type an email in here, you can't toggle the checkbox. 78 03:46.460 --> 03:47.690 There's nothing you can do. 79 03:47.690 --> 03:50.240 But the top fieldset is enabled. 80 03:50.240 --> 03:52.100 So, it's a very simple attribute. 81 03:52.550 --> 03:54.680 I don't think there's much more to it than that. 82 03:54.680 --> 03:57.020 So let's jump back to the lecture. 83 03:57.050 --> 03:59.850 Don't you just love looking at examples? 84 03:59.870 --> 04:00.350 I do. 85 04:00.350 --> 04:00.950 I do. 86 04:00.980 --> 04:02.240 So, so interesting. 87 04:02.240 --> 04:04.190 So we've seen the disabled attribute. 88 04:04.220 --> 04:06.650 Now I just want to talk about this "form" attribute. 89 04:06.680 --> 04:08.520 What is that all about? 90 04:08.550 --> 04:15.480 Well, the form attribute gets the values of the ID attributes of a form element, and that will then 91 04:15.510 --> 04:17.730 be part of the fieldset in HTML. 92 04:18.060 --> 04:21.030 I know it sounds very, very confusing. 93 04:21.060 --> 04:22.110 Think of it like this. 94 04:22.110 --> 04:27.560 Sometimes when you build a form, you don't want it to be all in one place on your page. 95 04:27.570 --> 04:34.320 Sometimes if you want, you can split a form into different sections on your entire page, and you want 96 04:34.320 --> 04:37.140 to associate some controls with the main form. 97 04:37.140 --> 04:41.310 And in order to do so, you have to use this form attribute. 98 04:41.730 --> 04:48.830 But one very, very important point to note is that the association of a fieldset with a form, right, 99 04:48.840 --> 04:54.540 when we use that form attribute, it doesn't imply that the controls inside of that fieldset will be 100 04:54.540 --> 04:56.090 associated to. 101 04:56.100 --> 05:01.410 So it just means that for each form control that we want to be associated with the main form, that we 102 05:01.410 --> 05:06.000 have to use this form attribute. Enough blibber-blabber (talk), I know it can seem very confusing. 103 05:06.000 --> 05:09.420 So let me hop over to Visual Studio Code and let me show you.