WEBVTT 0 00:00.410 --> 00:05.750 Before we talk about widgets, the input tags, fieldsets, etc etc, 1 00:05.900 --> 00:09.800 I want to first clarify something from the very, very beginning. 2 00:09.800 --> 00:15.860 I want us to look at generally the form structure. And by form structure, I just mean I'm going to look 3 00:15.860 --> 00:21.570 at the way you design a form. Beyond the structures specific to web forms, 4 00:21.590 --> 00:26.780 it's just good to remember that form markup is just HTML. 5 00:27.140 --> 00:28.220 That's all it is. 6 00:28.250 --> 00:30.750 Forms are just HTML markup. 7 00:30.770 --> 00:32.390 There's nothing more to it. 8 00:32.420 --> 00:39.620 And this means that you have all the power of HTML to structure and design your own forms. 9 00:39.860 --> 00:41.150 There are few rules, though. 10 00:41.150 --> 00:46.760 We know that we have to wrap our form within a <form> tag, but from there you can pretty much go wild. 11 00:48.020 --> 00:49.190 Wild 🥴. 12 00:52.030 --> 00:54.010 (music playing) 13 00:54.130 --> 00:55.370 Not that kind of wild 🤣. 14 00:55.390 --> 01:00.970 What I mean, is you just have a lot of flexibility. As we've already seen in some of our examples, 15 01:00.970 --> 01:07.630 it's common practice to wrap a label, or certain widgets within a <div> tag to define sections. 16 01:07.630 --> 01:12.780 But it's also common to see <ul>s and <li> tags within forms. 17 01:12.790 --> 01:18.640 And what's the difference between using unordered list tags, and list items versus divs? 18 01:18.670 --> 01:19.810 What's the difference? 19 01:19.840 --> 01:21.400 Well, very little. 20 01:21.430 --> 01:22.510 Don't believe me? 21 01:22.510 --> 01:23.110 That's fine. 22 01:23.110 --> 01:26.800 Let me hop over to the console and let me show you. Very quickly, 23 01:26.800 --> 01:31.960 here is a blank index.html file, and I want to prove the fact that it doesn't really matter how we 24 01:31.960 --> 01:35.500 structure a form, it doesn't affect the visual appearance in any way. 25 01:35.590 --> 01:36.000 Okay. 26 01:36.010 --> 01:37.080 In many cases. 27 01:37.090 --> 01:37.870 So here we go. 28 01:37.870 --> 01:42.490 Here's HTML. What I want to do is create a form. 29 01:42.490 --> 01:43.450 We don't need an action. 30 01:43.450 --> 01:45.160 I'm not even going to do anything with this form. 31 01:45.160 --> 01:46.950 I just want to show you the styling. 32 01:46.960 --> 01:49.050 The first thing I want to do is I want to wrap, 33 01:49.060 --> 01:49.450 okay, 34 01:49.450 --> 01:51.010 well, let me do a comment here. 35 01:51.340 --> 01:58.910 Let's use a <div> tag to create a name and email input form. 36 01:59.830 --> 02:00.310 Right. 37 02:01.210 --> 02:03.760 As I just said, let's wrap everything within a <div>. 38 02:03.790 --> 02:06.760 Let's do a label for name, 39 02:07.360 --> 02:10.510 Name, and you can see how quickly it is to create a form 40 02:10.510 --> 02:15.220 once you know, you know, the general flow and what to do. It's very, very easy. For input type 41 02:15.220 --> 02:19.660 we can have text, and the name we can have is name, the ID is name. 42 02:19.660 --> 02:24.100 You know, in our instance, we don't even need to define a name attribute because we're not even submitting 43 02:24.100 --> 02:24.580 this. 44 02:24.580 --> 02:25.870 I just want to show you what it looks like. 45 02:25.870 --> 02:26.530 So there we go. 46 02:26.530 --> 02:27.520 That's the name. 47 02:27.520 --> 02:31.570 Let's just copy this entire block, paste another one, and let's do email. 48 02:33.170 --> 02:33.620 Email. 49 02:34.730 --> 02:35.420 There we go. 50 02:36.680 --> 02:38.630 I guess the type of this input will be email. 51 02:38.930 --> 02:39.470 Is that right? 52 02:39.980 --> 02:44.570 And of course, let's open this up on Live Server and zoom in. 53 02:44.600 --> 02:45.350 There we go. 54 02:45.380 --> 02:46.490 Name and email. 55 02:46.940 --> 02:49.160 I don't even have a submit button, but who cares! 56 02:49.160 --> 02:52.200 I just want to show you this is how it looks when we wrap it in a <div> tag. 57 02:52.220 --> 03:01.070 Now let's go here, and you guessed it, let's use a <ul> and <li> 58 03:02.640 --> 03:05.550 tag, to style our form. 59 03:06.640 --> 03:09.120 These are commonly used. 60 03:09.130 --> 03:16.420 But remember, we have to remove default styling, because with lists and all that, we get default styling. 61 03:16.420 --> 03:19.590 So I just want to remove the default styling. 62 03:19.600 --> 03:20.380 Just remind me. 63 03:20.380 --> 03:20.980 Just remind me. 64 03:20.980 --> 03:24.370 We must, must not forget before we, before we do this. 65 03:25.050 --> 03:25.170 Yeah. 66 03:25.390 --> 03:30.970 As I mentioned, instead of using divs, let's use the <ul> tag now. And let's wrap each kind of section 67 03:30.970 --> 03:32.650 of our form in <li> tags. 68 03:33.010 --> 03:34.360 Very, very straightforward. 69 03:34.390 --> 03:35.380 Same thing. 70 03:35.380 --> 03:36.640 Label for name. 71 03:37.060 --> 03:37.750 Name. 72 03:38.750 --> 03:40.880 Input type can be text. 73 03:42.050 --> 03:43.450 We don't need a name attribute. 74 03:43.460 --> 03:48.500 The ID can be "name", because we have to match the name value for that "for" attribute, 75 03:48.500 --> 03:48.920 right? 76 03:48.950 --> 03:54.230 We've said that the "for" attribute's name is "name" and it has to match the ID of our input. 77 03:54.260 --> 03:54.650 You know what, 78 03:54.650 --> 03:55.450 I can just copy, 79 03:55.460 --> 03:57.500 let me just copy and paste these two above. 80 03:58.690 --> 04:00.190 And, 81 04:01.240 --> 04:01.830 paste it here. 82 04:02.470 --> 04:03.160 Hope you're following along. 83 04:03.190 --> 04:03.970 Very simple. 84 04:04.420 --> 04:08.950 If we look at this now, right, in our browser, they should be exactly the same. 85 04:09.020 --> 04:10.070 Ahhhh man 🙈! 86 04:10.750 --> 04:13.730 I asked you to remind me that we have to remove this default styling. 87 04:13.750 --> 04:15.260 So let's go here to the top. 88 04:15.280 --> 04:20.980 And before we get to the <body>, let's just create a <head> element. Within the <head>, a <style> element 89 04:20.980 --> 04:26.980 and here we can just grab the ul and the li, and we can remove styling ... list-style:none, 90 04:26.980 --> 04:27.700 none, 91 04:29.330 --> 04:31.460 padding-left 92 04:33.140 --> 04:33.650 zero. 93 04:33.740 --> 04:34.520 Save this. 94 04:34.550 --> 04:38.960 Go to our browser, and BOOM SHAKALAKA 💥! 95 04:39.260 --> 04:40.120 There you go. 96 04:40.130 --> 04:45.500 Proof that it does not matter how we style a form, it's up to us as developers. 97 04:45.500 --> 04:51.560 If you're feeling more comfortable using the unordered lists and list items approach, go for it. 98 04:51.560 --> 04:54.440 If you're more comfortable using divs, go for it. 99 04:54.470 --> 04:57.320 It depends what you enjoy and what you like. 100 04:57.320 --> 05:03.620 It's like art. But as you can see, it makes no difference to the visual representation to the user. 101 05:03.860 --> 05:05.120 So there we go. 102 05:05.240 --> 05:10.940 We've just seen there's very little difference, actually there's zero difference between using ul 103 05:10.940 --> 05:13.550 and li's, versus using div tags. 104 05:13.550 --> 05:19.610 Just FYI, often li elements are used, especially if you have multiple checkboxes or radio buttons. 105 05:19.610 --> 05:24.140 But again, you don't have to - it depends what your style of coding is. 106 05:24.140 --> 05:30.290 And because we have the power of HTML at our disposal, we don't have to limit ourselves to using divs 107 05:30.290 --> 05:31.070 either. 108 05:31.070 --> 05:36.630 In other words, divs and ul tags are not the only options available to you. 109 05:36.720 --> 05:45.240 It's also common practice to use the fieldset elements, H1, H2 tags and even sections to structure 110 05:45.240 --> 05:46.740 complex forms. 111 05:46.740 --> 05:52.050 We even saw when we were looking at Mailchimp's form that they had a whole lot of fieldsets in there, 112 05:52.050 --> 05:52.560 didn't they? 113 05:52.560 --> 05:58.860 So what I'm trying to say is that there's not only one right way to structure and design a form. 114 05:58.860 --> 05:59.820 It's like art 🖼. 115 05:59.850 --> 06:04.260 It's up to you to find a comfortable coding style that suits you. 116 06:04.260 --> 06:06.420 But as we'll see, there are certain nuances. 117 06:06.420 --> 06:12.570 There are certain kind of conventions in the development industry that kind of veer us to stick with 118 06:12.570 --> 06:13.560 conventions. 119 06:13.620 --> 06:16.980 And I'm going to be talking about those as we go through some of these elements. 120 06:16.980 --> 06:19.080 So I guess this will be a good place to stop. 121 06:19.080 --> 06:24.660 But before we start talking about widgets in more detail, I want to quickly talk about this fieldset 122 06:24.660 --> 06:26.220 element in some more detail.