WEBVTT 0 00:15.810 --> 00:18.880 I hope you're having as much fun as I am in this course. 1 00:19.890 --> 00:22.040 I love this stuff ❤️. I am so amped, I love it. 2 00:22.050 --> 00:24.330 I could do it all day ... and I pretty much do do it all day. 3 00:24.510 --> 00:26.530 So anyway, what do I want to do in this lecture? 4 00:26.580 --> 00:33.180 We've been speaking about this action attribute and this action attribute is so important. Seriously. 5 00:33.900 --> 00:35.880 And that's why I want to spend one more lecture on it. 6 00:36.180 --> 00:40.950 And typically, the action attribute, as I mentioned, tells your browser where to submit all that form... 7 00:40.950 --> 00:45.980 data when the user clicks on that submit button. And "usually", not always... 8 00:46.440 --> 00:49.200 usually, we send that form data... 9 00:49.200 --> 00:51.480 we tell the browser to send it, to a server. 10 00:51.660 --> 00:58.140 And this means that often a server side language deals with the form data, like Node.js 11 00:58.140 --> 00:58.740 for example, or PHP. 12 00:59.550 --> 01:03.090 And those server side languages, as we just said, will then deal with that form data. 13 01:03.360 --> 01:09.270 Maybe, for example, you have to verify the user login information, or maybe the server side code... 14 01:09.270 --> 01:11.040 has to save something to a database. 15 01:11.140 --> 01:15.300 But my dear students, we have not yet dealt with server side code, have we? No. 16 01:15.330 --> 01:19.950 And that's why I don't really want us to get into the server side of things now, but I do want to show... 17 01:19.950 --> 01:26.400 you that it doesn't have to be sent to a server, and we can deal with form data purely on the front end. 18 01:26.640 --> 01:33.690 It's quite fun, and I want us to now build a form, and I want us to submit the form data to the browser itself... 19 01:33.690 --> 01:34.470 to front end. 20 01:34.650 --> 01:40.440 So without further ado, let me jump into the computer, which is just behind this camera, and let's start 21 01:40.440 --> 01:40.950 coding together. 22 01:46.150 --> 01:48.350 Whew. Heyyy! Alright. 23 01:48.630 --> 01:52.950 I'm right here, sitting in front of a computer with you and I want us to code a form, and then I want... 24 01:52.950 --> 01:58.890 you to learn how to extract that data from the form in your front end and then display it to the screen... 25 01:58.890 --> 01:59.150 again. 26 01:59.340 --> 01:59.880 Really fun. 27 02:00.060 --> 02:05.190 I've just got a blank folder open in Visual Studio Code and all I want to do is create a folder. Let's... 28 02:05.190 --> 02:09.810 just call it index.html. And let's start coding. Let me zoom in... 29 02:09.810 --> 02:14.220 so you can just see. And I just want to start off with a standard HTML5 template. 30 02:15.270 --> 02:20.070 And the title of the document can be "Learning about forms". 31 02:23.210 --> 02:27.380 Now, all I want to do is create a form and yes, we want an action attribute this time, right. 32 02:27.650 --> 02:32.590 And remember, the form sends the data either to a server, not always... 33 02:32.600 --> 02:33.020 we'll see now 34 02:33.020 --> 02:38.380 that we don't have to do that, but it sends the data to some file that has to process the information. 35 02:38.630 --> 02:41.810 So let's just call it, for argument's sake, process.html. 36 02:42.260 --> 02:44.150 And I really want this to be a simple example... 37 02:44.180 --> 02:45.590 so let's just have one input field... 38 02:46.970 --> 02:48.500 we can say of type text. 39 02:49.250 --> 02:50.120 That's all we want. 40 02:50.120 --> 02:51.320 The name can be fname. 41 02:51.650 --> 02:59.540 Remember that you have to give a "name" attribute value because when a form sends data somewhere, it sends... 42 02:59.540 --> 03:00.470 it in key:value pairs... 43 03:00.920 --> 03:05.740 so you need to make sure that you've defined a variable value, otherwise it won't send it. 44 03:06.410 --> 03:08.140 We don't even need an ID in this instance. 45 03:08.900 --> 03:14.120 And of course, then I just want a submit button and we can just have "submit". 46 03:14.660 --> 03:18.680 If we save this, and we open it up in our browser, let's just see what we see. 47 03:19.020 --> 03:20.240 Let's just open up Live Server. 48 03:20.540 --> 03:27.070 There we go. Very very simple. And right now, and this is the example we've been looking at so far... 49 03:27.080 --> 03:30.500 if I write "Wally" for example, and we click submit, what's going to happen? 50 03:31.580 --> 03:33.150 100% 💯 right! 51 03:33.530 --> 03:39.370 We're going to get an error, because the form, it's going to try and send it to this URL called... 52 03:39.380 --> 03:43.490 process.html. And this process.html just does not exist. 53 03:43.880 --> 03:45.380 And that's why we get this error. 54 03:45.410 --> 03:53.510 But as you can see, we still have access to our parameters in the form, in the URL itself. There's our variable... 55 03:53.510 --> 03:56.430 name, fname, and we've assigned it a value of "Wally". 56 03:56.930 --> 04:01.540 And this happens because by default, we've submitted this form via a GET method 🤯. 57 04:02.030 --> 04:03.350 Don't panic, please. 58 04:03.350 --> 04:06.020 We're going to be talking about the method attribute in the next lectures. 59 04:06.320 --> 04:09.590 And we're going to be discussing, in a lot of detail, the GET method... 60 04:09.620 --> 04:11.360 versus the POST. For now, 61 04:11.480 --> 04:18.890 just realize that by default, all your form information is going to be appended to the URL like this. 62 04:19.160 --> 04:20.330 "OK, Clyde, that's cool... 63 04:20.660 --> 04:24.050 but how do I extract that information and then display it onto the page?" 64 04:24.800 --> 04:25.520 Great question. 65 04:25.700 --> 04:27.690 So let's hop back into Visual Studio Code. (background music)