WEBVTT 0 00:00.760 --> 00:06.550 The next attribute I want us to talk about is the "name" attribute. And remember, we are dealing with... 1 00:06.550 --> 00:09.810 form attributes here, only the <form> itself. 2 00:10.540 --> 00:12.940 So the name attribute could look something like this. 3 00:13.930 --> 00:14.470 That's right. 4 00:14.760 --> 00:21.910 We can assign the value of myCoolForm to the name attribute. As you probably would expect, the name attribute... 5 00:22.000 --> 00:25.590 names your form. You might be thinking at this point... 6 00:25.810 --> 00:31.270 "why would I want to name my form? And how is this name any different to using the ID... 7 00:31.300 --> 00:32.670 attribute? 🤔" 8 00:32.680 --> 00:34.600 Let me just hop over to the IDE quickly... 9 00:34.600 --> 00:37.930 let's code up some forms and let me show you the difference. 10 00:39.100 --> 00:44.320 How can I illustrate what the difference between ID and this name attribute is? 11 00:44.320 --> 00:50.480 Well, one way is we can obviously code up forms and have a look, and it'll make a whole lot more sense. 12 00:50.830 --> 00:51.460 So here we go. 13 00:51.490 --> 00:53.560 I've got a blank file open. 14 00:53.560 --> 00:56.680 And how can we understand what this "name" does? 15 00:56.960 --> 00:58.540 Well, the best way is by doing so. 16 00:58.540 --> 00:59.410 Let's create a form. 17 01:01.630 --> 01:06.850 Let's get rid of the action, because we don't need it here. But let's create this "name" attribute and as we just called 18 01:06.850 --> 01:10.170 it in the lecture, why don't we call it myCoolForm. 19 01:11.350 --> 01:12.010 There we go. 20 01:12.040 --> 01:19.390 We know that when we start coding up a form 📝, we put all of our widgets within the <form> element tags. 21 01:20.320 --> 01:24.730 So there we go. That's one form. We can do another form. 22 01:25.360 --> 01:27.140 In fact, you can have as many as you want. 23 01:27.700 --> 01:32.020 This can be mySecondCoolForm. 24 01:35.030 --> 01:41.410 As I said, all of our form widgets, our submit button, etc etc, go in between these <form> tags. 25 01:42.230 --> 01:42.800 So there we go. 26 01:42.950 --> 01:43.890 Let's go to the browser... 27 01:43.890 --> 01:45.220 and let's see what this has done. 28 01:45.530 --> 01:49.130 Well, actually, before I do that, let me just have an ID here of "a"... 29 01:53.440 --> 02:00.700 and let's have an ID here of "b", just to be symmetrical. So here we go, we've got a name and we've got an ID on each 30 02:00.700 --> 02:04.210 form. If we go now to the browser, we see nothing... 31 02:04.210 --> 02:08.410 and that's what we would expect, because we know the form element does absolutely nothing. 32 02:08.740 --> 02:12.580 It's only a wrapper, and it only affects things in the background. 33 02:12.820 --> 02:14.170 We can't visually see it. 34 02:14.560 --> 02:16.740 "So what does this name attribute do, Clyde?" 35 02:16.920 --> 02:19.720 OK, well, let me show you. Let's go to the dev Console... 36 02:22.100 --> 02:22.910 let's just clear it. 37 02:23.360 --> 02:28.840 Now, let me ask you this question, in order to access a form, how can we do it? 38 02:29.570 --> 02:32.090 Let's say we wanted to access our first form. 39 02:32.780 --> 02:35.240 We know our first form has an ID of "a". 40 02:36.500 --> 02:37.520 How could we do that 🤷🏽? 41 02:37.940 --> 02:43.070 Well, if you've done my DOM course where we discussed the Document Object Model in detail in frontend... 42 02:43.070 --> 02:45.840 JavaScript, this will be very, very easy for you. 43 02:46.040 --> 02:53.110 You could do something like, let's say, hardForm, because this is the hard way to get it. We can access... 44 02:53.180 --> 02:56.840 our document.getElementById(), and we called... 45 02:58.180 --> 03:08.440 or, we assigned an id of "a" to that form, right? If we go to the code, we've assigned an id of "a" to our form. And if we return that and 46 03:08.450 --> 03:15.680 we console.log() our hardForm out, we actually do get our form. But, as the variable name kind-of alludes to... 47 03:15.710 --> 03:17.570 this is the hard way to do it. 48 03:17.630 --> 03:18.590 It's the long way. 49 03:19.190 --> 03:22.710 And this is why we're allowed to have name attributes on a form. 50 03:23.150 --> 03:24.230 This is why they are there. 51 03:24.770 --> 03:29.840 If you've done my DOM course, you'll also know that all forms are registered on the document object... 52 03:29.840 --> 03:30.290 itself. 53 03:30.770 --> 03:33.530 So all we have to do is access the document. On the document... 54 03:33.530 --> 03:41.480 we can access our forms. And you'll notice that what's returned to us is an HTMLCollection. Don't worry what an HTMLCollection... 55 03:41.480 --> 03:43.900 is. Again that's in my DOM course. 56 03:44.330 --> 03:47.870 For now, just understand it holds a collection of all of our forms. 57 03:48.910 --> 03:51.390 But can you see something very interesting below? 58 03:52.450 --> 03:54.470 There are two things I want to point out. Firstly, 59 03:55.030 --> 04:00.610 our ID's are assigned separate properties, "a" and "b" which relate to each form. 60 04:01.670 --> 04:06.170 That's the first thing. The second thing is, though, look at what our name attributes have done. 61 04:07.010 --> 04:10.050 They've created also properties in this collection. 62 04:10.460 --> 04:11.120 Can you see it? 63 04:12.380 --> 04:19.610 But what's really cool, is that those properties are registered on the document itself, not only within... 64 04:19.610 --> 04:22.550 this HTMLCollection! Let me show you what I mean. 65 04:23.120 --> 04:25.460 So what we can do, is we can access our document. 66 04:26.360 --> 04:30.290 And if we try and access our form with ID of "a"... 67 04:31.790 --> 04:44.390 it returns to us undefined. But, if we try and access our name of a form, it will work - myCoolForm. Hit "return" and we... 68 04:44.710 --> 04:46.010 literally get our form 🥳. 69 04:46.730 --> 04:49.880 So in other words, there's a much easier way, easyForm... 70 04:50.240 --> 04:55.760 and that is, document.myCoolForm. The easyForm... 71 04:55.760 --> 05:00.330 we can just log out now, just to show you that it is actually the same form that we did above. 72 05:00.920 --> 05:01.720 So there we go. 73 05:02.000 --> 05:04.640 That's just a very interesting way to access forms. 74 05:05.030 --> 05:08.450 It's a very easy way to access your form in the DOM. 75 05:08.750 --> 05:14.180 And I'd say that's the key difference between using ID and giving your form a name attribute. 76 05:14.450 --> 05:19.760 As you can see, the difference is quite subtle and that's why it's not absolutely necessary. 77 05:19.910 --> 05:21.340 But that's a cool thing with coding. 78 05:21.470 --> 05:23.750 Sometimes you want to use it, sometimes you don't. 79 05:23.960 --> 05:26.950 It just depends on what side of the bed you woke up from this morning 🛏️. 80 05:27.230 --> 05:27.820 So there we go. 81 05:27.830 --> 05:29.090 Let's jump back into the lecture. 82 05:29.870 --> 05:32.000 I really hope that made a lot of sense. 83 05:32.570 --> 05:40.010 But now, just to throw some bit of confusion into the mix, HTML4 actually got rid of the name... 84 05:40.010 --> 05:40.580 attribute. 85 05:40.580 --> 05:47.150 It was deprecated! but we've pretty much done a 360 🔄 because now it's back thanks to HTML5. 86 05:47.510 --> 05:55.030 And the reason it's back is because sometimes it is lot easier to have this form within that HTMLCollection. 87 05:55.820 --> 06:03.200 So just remember, the attribute is the name that's used to represent your form in the forms collection... 88 06:03.380 --> 06:05.170 and that's pretty much it with the name attribute. 89 06:05.180 --> 06:06.590 You don't have to use it very often. 90 06:06.590 --> 06:07.730 I don't use it very often. 91 06:08.030 --> 06:11.570 I don't think many developers do use it very often, but now you're aware of it. 92 06:11.570 --> 06:14.450 And if you are going to be using the form a lot, then perhaps put it in there. 93 06:14.450 --> 06:16.040 It's easier to access. 94 06:16.340 --> 06:16.750 Cool. 95 06:16.790 --> 06:17.380 So there we go. 96 06:17.480 --> 06:22.520 I told you, these other attributes are not that difficult. And we've still got a few of them to cover... 97 06:22.850 --> 06:23.950 so let's keep going.