WEBVTT 0 00:00.360 --> 00:01.500 Whaaat! 1 00:02.580 --> 00:08.040 Why do we have to put all of our form controls in widgets within a <form> element? 2 00:08.730 --> 00:15.000 Why can't we just put it in, say, a <div> element, or why do we even need a wrapper element in the first 3 00:15.000 --> 00:15.320 place? 4 00:16.920 --> 00:18.400 That's what I want to quickly show you now. 5 00:19.330 --> 00:22.240 By the way, it is very late right now. 6 00:22.960 --> 00:26.770 In fact, I should be sleeping, and I just I love this so much 7 00:26.780 --> 00:27.670 thought, you know what, 8 00:27.670 --> 00:31.610 I'm going to come and film, and teach, because it's what I love to do. 9 00:31.780 --> 00:33.490 So that's what I'm doing 10 00:33.490 --> 00:35.610 and that's why I'm in my pajamas. 11 00:35.680 --> 00:37.110 Apologies for that. 12 00:37.600 --> 00:40.190 And you can kind of see Gerald in the background, 13 00:40.540 --> 00:43.210 Gerald my giraffe. 14 00:48.720 --> 00:49.230 Can you see him? 15 00:49.800 --> 00:51.180 He's a very cheeky fellow. 16 00:52.190 --> 00:53.170 Let me just move him here. 17 00:56.010 --> 00:56.440 There we go. 18 00:56.580 --> 00:56.970 Anyway. 19 00:58.350 --> 00:59.170 Back to business. 20 00:59.820 --> 01:03.830 So what I want to show you, is why do we have to put our form controls within a <form>? 21 01:03.840 --> 01:04.450 So here we go, 22 01:04.470 --> 01:06.180 I'm using a Visual Studio Code. 23 01:06.180 --> 01:09.480 If you've done any of the courses, you know that I love using Visual Studio Code. 24 01:09.930 --> 01:12.310 And I also use an extension called Live Server. 25 01:14.140 --> 01:20.770 And I use Live Server just so, funny enough, we can use our computer as a server and we can view our 26 01:20.770 --> 01:22.360 code in real time on a browser. (swoosh and then music) 27 01:29.140 --> 01:33.500 Whaaat? What is this Live Server all about? 28 01:33.700 --> 01:35.320 Why am I using a Live Server? 29 01:35.920 --> 01:37.230 We'll just take a step back. 30 01:37.690 --> 01:40.060 Your machine can only understand 1s and 0s. 31 01:40.060 --> 01:47.050 It can only understand machine code. So anything we display on a computer or a phone has to at some level 32 01:47.050 --> 01:48.410 be converted to binary. 33 01:48.940 --> 01:54.190 And what's really awesome is that your browser does this automatically, your browser, whatever you're using, 34 01:54.190 --> 02:01.780 Safari, Google Chrome, Mozilla, etc, etc. they have inbuilt interpreters that can interpret your 35 02:01.780 --> 02:05.810 HTML and CSS and render that content onto your screen. 36 02:06.010 --> 02:07.060 So that's the starting point. 37 02:07.690 --> 02:10.150 And for that, we don't need a live server, 38 02:10.390 --> 02:10.660 right. 39 02:10.720 --> 02:13.560 You could create an HTML document in any format. 40 02:13.570 --> 02:18.910 You could open up a word document, just save it as a .html, and you can drag that into your browser 41 02:18.910 --> 02:20.410 and it'll work, right? 42 02:21.100 --> 02:25.840 But you'll notice if we do that, we get a File protocol extension. 43 02:26.140 --> 02:27.610 And there are a few problems with that. 44 02:28.210 --> 02:34.960 The first problem is that the File protocol excludes us using AJAX, and that's a problem because we won't 45 02:34.960 --> 02:40.380 be allowed to use JavaScript to fetch external content, like images or files, etc, etc. 46 02:40.450 --> 02:42.140 So that's the first problem with the File protocol. 47 02:42.640 --> 02:47.680 The second problem with doing it that way, is that every time we change the source file, we have to 48 02:47.680 --> 02:50.170 then manually reload the browser. 49 02:50.170 --> 02:54.910 And that, my dear students, is just irritating, especially for you and I when we're coding all the time and 50 02:54.910 --> 02:56.830 we want to see changes in real time. 51 02:56.830 --> 03:01.520 And this is exactly why I use the Live Server extension. 52 03:01.990 --> 03:06.040 It's very easy to install, especially if you're using Visual Studio Code. 53 03:06.040 --> 03:11.470 You just click on that extension's tab, search for live server and "Bob's your uncle". 54 03:11.590 --> 03:13.080 It literally is all sorted for you. 55 03:13.300 --> 03:14.360 What happens in the background, is 56 03:14.360 --> 03:19.240 that it actually creates websockets and it connects the browser to your Visual Studio Code or your 57 03:19.240 --> 03:19.680 file 58 03:19.840 --> 03:23.860 so every time you save that file, the browser automatically refreshes. 59 03:24.100 --> 03:28.780 That was just a very quick FYI, just in case you're wondering why I use a live server. Hope you found 60 03:28.780 --> 03:32.920 it useful and, yeah, it's time for me now to jump into these hot pools. Adios. 61 03:36.360 --> 03:37.150 So let's get into it. 62 03:37.210 --> 03:40.120 Let's create a file, let's just call test.html. 63 03:40.840 --> 03:46.180 And what I want to do now is I want to show you one form control, and we're going to get into this a 64 03:46.180 --> 03:46.690 lot, 65 03:47.080 --> 03:50.810 but I just want to use an input, right, and we can use a text input for now. 66 03:51.490 --> 03:52.150 So here we go. 67 03:52.150 --> 03:56.520 You can see we haven't wrapped it within a <form>. Now, if we actually create a form tag, 68 03:57.110 --> 04:01.740 remember how I said it is good practice to always have 2 attributes, and that's why this IDE, which is Visual 69 04:01.770 --> 04:05.170 Studio Code, automatically creates this action attribute. 70 04:05.740 --> 04:08.700 I'm just going to be a terrible coder, and I'm going to delete it for now. 71 04:09.220 --> 04:13.120 And within this form element, I want us to now do exactly the same thing. 72 04:13.120 --> 04:15.340 I want us to create this input with type text. 73 04:15.730 --> 04:21.160 Now, what I want to do is I want to start up Live Server. Let me just get rid of myself quickly. There we go, and you 74 04:21.160 --> 04:23.380 can see that our Live Server is at the bottom right. 75 04:23.650 --> 04:24.370 If I click on that, 76 04:25.930 --> 04:26.710 "Bob's your uncle" 77 04:27.310 --> 04:29.500 we literally get a live server. 78 04:30.570 --> 04:38.490 So, what is this telling us? Well , let me zoom in. We know that the first input text box was not wrapped within a 79 04:38.490 --> 04:39.840 form and the second one was. 80 04:41.060 --> 04:44.230 This looks the same, doesn't it? 81 04:46.700 --> 04:48.690 And yes, it does look the same. 82 04:48.710 --> 04:56.930 So why do we need to have this wrapper? Why do we need to wrap our input's text box, form control, within 83 04:56.930 --> 04:57.930 this <form> element? 84 04:59.270 --> 05:07.670 Well my dear students, what you're missing is the understanding of semantic HTML markup and the DOM. 85 05:08.000 --> 05:14.360 Realistically, we know we can do whatever we want with HTML5 and beyond, and most browsers will 86 05:14.360 --> 05:19.660 pretty much parse everything or most things that you type, even though they're not 100% correct. 87 05:19.970 --> 05:28.520 So the reason we put our form widgets inside a <form> element, is the same reason we insert all of our <li> elements 88 05:28.520 --> 05:29.970 within a <ul> element. 89 05:30.320 --> 05:31.750 It's where they belong. 90 05:31.760 --> 05:34.010 It's semantically correct. 91 05:34.310 --> 05:40.610 And of course it helps us to define our markup. Parsers, screen readers and other software can better 92 05:40.610 --> 05:44.420 understand your code when it's semantically correct. 93 05:44.630 --> 05:47.980 In other words, when your markup has meaning, not just structure. 94 05:48.560 --> 05:52.810 So that's one reason why you should always use this form element. Reason 95 05:52.830 --> 06:00.020 number 2, is that we know the form element allows us to define an "action" and a "method" attribute. Basically they 96 06:00.020 --> 06:04.760 tell the browser what to do with the information when the form is submitted. 97 06:04.760 --> 06:09.940 And it's good practice to have this in your form, even though sometimes you don't want to use JavaScript. 98 06:10.370 --> 06:17.780 Remember, AJAX - Asynchronous JavaScript And XML - is not always used, meaning sometimes, you know, those 99 06:17.780 --> 06:24.700 weird people, switch off JavaScript and that means you cannot rely on using pure AJAX. 100 06:24.860 --> 06:29.660 So that is the second reason why we should include our form controls within a form element. 101 06:29.900 --> 06:37.550 And the third and final reason that I can think of right now is that forms are registered properly within 102 06:37.550 --> 06:38.150 the DOM. 103 06:39.170 --> 06:39.950 What do I mean by that? 104 06:39.950 --> 06:44.570 Well, why don't we take a sneak peek. If we go to our browser here, let's inspect this, 105 06:46.150 --> 06:52.050 let's go to our console, clear everything, and what I want to show you now is that all forms are registered within 106 06:52.060 --> 06:57.700 our DOM, automatically by the browser. And in order to access that, and you'll know this very well if you've 107 06:57.700 --> 07:03.790 done my DOM courses, is we access our document object. On that, we've got a property called, believe 108 07:03.790 --> 07:06.910 it or not, forms. And it returns to us 109 07:06.910 --> 07:13.230 an HTMLCollection, we open that collection and BOOM 💥. There is our form. (sound: congratulations). 110 07:13.660 --> 07:21.610 And this can be very useful when we want to interact and manipulate forms, data on our page. And when 111 07:21.610 --> 07:27.350 we don't put our form widgets in a form, obviously it doesn't form part of this collection. 112 07:27.760 --> 07:28.570 So there we go. 113 07:28.600 --> 07:30.170 I hope it's starting to make sense. 114 07:30.190 --> 07:35.320 I hope you understand now why we even need that form element in the first place. 115 07:35.740 --> 07:41.980 Visually, it does absolutely nothing, just like any container HTML element does nothing. 116 07:42.520 --> 07:47.020 But behind the scenes, in the background, it is very, very useful.