WEBVTT 0 00:00.770 --> 00:07.640 As we mentioned in the previous lecture, we need to start now talking about form attributes. And do you... 1 00:07.640 --> 00:10.460 know what an attribute is? It's very simple. 2 00:10.700 --> 00:14.830 It's just extra functionality we can give to our element. 3 00:15.350 --> 00:20.720 So form attributes are just extra functionality we can give to our forms, straight out of the box. 4 00:21.560 --> 00:29.600 The important point to note is that all HTML elements, including forms, can have attributes and attributes... 5 00:29.600 --> 00:32.450 are always specified in the opening tag. 6 00:32.780 --> 00:33.310 Why? 7 00:33.350 --> 00:33.830 I don't know. 8 00:33.920 --> 00:36.950 That's just the way the Web and HTML has been designed. 9 00:37.820 --> 00:43.940 Now, the important point I want to get across is that the browser recognizes standard attributes and... 10 00:43.940 --> 00:48.350 it creates DOM properties automatically when it sees those attributes. 11 00:48.890 --> 00:50.690 Man, that is a bit of a mouthful. 12 00:51.050 --> 00:56.300 What does it mean and why do we even care about what the attributes are for a certain element? 13 00:56.840 --> 00:58.790 Well, that is a great question. 14 00:58.800 --> 01:03.020 Let's hop over to the coding editor and let me show you why it's so important. 15 01:05.390 --> 01:10.700 So here we go, I've got the IDE on the left, I've got our browser on the right, and I'm running Live 16 01:10.700 --> 01:12.980 Server, so we can see things in real time. 17 01:13.550 --> 01:14.690 Remember what I just said? 18 01:15.440 --> 01:20.750 That the browser recognizes standard attributes and automatically creates properties for them. 19 01:21.470 --> 01:27.740 This makes understanding attributes very important for developers, because not only will we be able... 20 01:27.740 --> 01:34.070 to add extra functionality to our forms, but will also be able to access information on the fly as... 21 01:34.070 --> 01:40.070 most of these attributes become properties of our object, our form object for example. 22 01:40.340 --> 01:41.810 So this is what I want you to remember. 23 01:42.170 --> 01:50.000 When the browser parses your HTML to create DOM objects, it recognizes standard attributes and it creates... 24 01:50.000 --> 01:51.950 DOM properties from them. 25 01:52.160 --> 01:58.850 This means when an element has an ID or another standard attribute, the corresponding property gets created. 26 01:59.370 --> 02:03.500 But this doesn't happen if the attribute is non-standard, and this is why it's so important for us... 27 02:03.500 --> 02:05.060 to learn about attributes. 28 02:05.390 --> 02:06.340 Let me show you what I mean. 29 02:06.980 --> 02:10.820 So let's just create a very simple <body> element that we all know. 30 02:11.120 --> 02:15.500 What I want to do, is I want to add a well-known attribute called "id". 31 02:16.040 --> 02:19.460 If you know of any HTML, you'll be very familiar with this attribute. 32 02:19.820 --> 02:22.100 And this ID is a standard attribute. 33 02:22.460 --> 02:24.680 It's not something I've created. 34 02:26.640 --> 02:28.360 So far, so good, right? 35 02:28.740 --> 02:36.090 So you'd expect if we now include JavaScript on our page, if we want to alert, say this body.id... 36 02:36.420 --> 02:37.290 it should work. 37 02:37.440 --> 02:38.890 So let me hit save here. 38 02:39.660 --> 02:41.250 Why is it not working? Let's refresh there. 39 02:41.250 --> 02:44.100 Oh, I just needed to refresh the browser. 40 02:44.520 --> 02:45.120 There we go... 41 02:45.130 --> 02:52.710 it's given us an alert 📣, and its given us the value of that ID attribute, which we've named... 42 02:52.710 --> 02:53.220 standardAttribute. 43 02:54.300 --> 02:57.690 This is created automatically by the browser on the fly. 44 02:58.170 --> 02:58.820 How cool. 45 02:59.280 --> 03:06.270 But say now, we don't have a standard attribute. Say now, we created an attribute called "random" and we... 46 03:06.270 --> 03:08.700 gave that a value of "non-standard". 47 03:10.010 --> 03:16.460 What's going to happen now? Well now, when we go and try and access this random attribute... 48 03:18.030 --> 03:21.530 let me click save, it's going to give us "undefined". 49 03:21.900 --> 03:29.940 (sound effect: uh-oh, stinky) And this is the point that I'm trying to make - the browser will not create a property, automatically. 50 03:30.460 --> 03:34.510 In fact, it is and can still be found in the DOM. Let me show you. 51 03:35.050 --> 03:36.970 But it's just not a direct property. 52 03:37.460 --> 03:39.880 So if we now go into to console... 53 03:42.120 --> 03:47.910 and of course, as I just mentioned to you, we can access our body.id automatically, and that's what... 54 03:47.910 --> 03:48.420 we gave it. 55 03:49.510 --> 03:53.200 We cannot do the same with that random attribute, right? 56 03:53.230 --> 03:55.030 We get undefined, pretty straightforward. 57 03:55.480 --> 03:59.010 You can see it, though, if we console.dir() out the body... 58 04:01.180 --> 04:01.570 sorry... 59 04:02.760 --> 04:05.990 it's going to be a document, of course, document.body. 60 04:07.390 --> 04:12.490 By the way, if you're wondering what console.dir() is, you should really check out my JavaScript Complete... 61 04:12.490 --> 04:13.450 Grandmaster ♟ Course. 62 04:13.870 --> 04:19.930 It really goes into detail about how JavaScript works. "console.dir()" just gives us a kind-of JSON... 63 04:19.930 --> 04:23.710 like format representation of an object, not the HTML itself. 64 04:24.310 --> 04:25.510 So let's open up this object... 65 04:25.690 --> 04:26.310 let's scroll down. 66 04:26.920 --> 04:28.430 There should be something saying attributes. 67 04:28.450 --> 04:28.980 There we go. 68 04:29.470 --> 04:35.800 And if we open up that attribute, we can see we've got two - the "id" and "random". But it is not automatically... 69 04:35.830 --> 04:37.460 a property of our object. 70 04:37.570 --> 04:40.180 So it's just harder for us to access. Whew, 71 04:40.180 --> 04:46.120 this was a very long, roundabout way of saying it's so important to know what are the standard attributes... 72 04:46.120 --> 04:48.430 associated with elements in our code. 73 04:48.810 --> 04:50.110 Let's jump back into the lecture. 74 04:51.190 --> 04:56.050 Can you begin to see how important attributes are? I hope that's starting to make sense... 75 04:56.050 --> 05:01.810 and I hope you start appreciating the fact now, why we need to learn about what the standard attributes... 76 05:01.810 --> 05:05.100 are for elements, specifically the form element. 77 05:05.800 --> 05:07.350 So, as a very quick recap... 78 05:07.360 --> 05:11.230 remember, a form is nothing else but an HTML element. We type it out. 79 05:11.620 --> 05:16.600 We have all the widgets in the middle, and of course we have to have a closing tag on that form. 80 05:17.310 --> 05:18.610 There's nothing special about it. 81 05:18.610 --> 05:20.350 It's just another HTML element. 82 05:20.590 --> 05:24.400 So for now, let's ignore all the form widgets and the closing tag. 83 05:24.580 --> 05:29.950 Let's remove that and let's just look at this opening form tag. And remember what we said, 84 05:29.950 --> 05:35.300 attributes have to be inserted in the opening tag, and each attribute can be assigned a value. 85 05:35.860 --> 05:40.570 You know this already. And we've mentioned the fact that there are quite a lot of different attributes... 86 05:40.900 --> 05:42.490 available to the form. 87 05:42.790 --> 05:45.680 And there are so many might even feel like your mind is going to explode 🤯. 88 05:46.660 --> 05:50.380 Don't worry. Because the form element is so important... 89 05:50.380 --> 05:56.240 I want to take time to understand what each attribute means, and why they can be so useful. 90 05:56.440 --> 06:04.040 So without further ado, let's start specifically targeting each attribute and digging into more detail. 91 06:04.390 --> 06:05.560 I can't wait.