WEBVTT 0 00:00.360 --> 00:06.120 Hold on to your horses 🐎, because now we're going to discuss one of the most important attributes there... 1 00:06.120 --> 00:15.360 is on the form element, and that is, the "action" attribute. Basically is just a URI, just a location, indicating... 2 00:15.360 --> 00:20.530 where the script is responsible for the manipulation of the data sent by the form. 3 00:20.820 --> 00:22.720 That's all good and well, but what does it look like? 4 00:22.790 --> 00:23.400 Well, here we go. 5 00:25.650 --> 00:33.360 Here we've set the action attribute to the process_url. And that process_url is just where the form data... 6 00:33.360 --> 00:34.370 is going to be sent to. 7 00:34.890 --> 00:39.720 I'm sure you can really see that the action attribute is therefore crucial. 8 00:40.230 --> 00:46.650 It's basically the browser asking you the question "where do you want all the data in the form sent to?" That is a... 9 00:46.650 --> 00:47.610 very good question. 10 00:47.880 --> 00:51.780 And if you specify nothing, it really won't get sent anywhere. 11 00:52.190 --> 00:56.820 Well in fact, it actually, it's just sent to the current page you're on, which we're going to see shortly. 12 00:57.220 --> 01:01.320 But as you know, the old adage, "pictures are worth a thousand words". 13 01:01.660 --> 01:03.510 So let me just draw something up for you quickly. 14 01:03.990 --> 01:08.760 Let's say we have a web application with a very simple form on it, with a "Register 15 01:08.760 --> 01:14.130 Now" button, when the user fills in all this information and when the form is eventually submitted, 16 01:14.490 --> 01:17.520 aka. when the user clicks on the Register 17 01:17.520 --> 01:23.430 Now button, then your browser is going to gather that form data, and it's going to have to send that form... 18 01:23.430 --> 01:24.060 somewhere. 19 01:24.060 --> 01:26.220 It's going to have to send it to a server. 20 01:26.790 --> 01:27.570 But where exactly... 21 01:27.570 --> 01:33.600 should your browser send it, because your server could be quite large with many files and scripts handling... 22 01:33.600 --> 01:34.950 different URIs. 23 01:35.200 --> 01:39.450 And this is exactly where the action attribute comes into the picture. 24 01:40.080 --> 01:45.120 It tells your browser exactly where to send that form data to your server. 25 01:45.510 --> 01:46.380 What happens next? 26 01:46.380 --> 01:51.300 Well, your server will then pass the form submission data to the form processor script. 27 01:51.450 --> 01:58.170 And that script is written in languages like, I don't know, PHP, Python, Node, Perl, etc etc. 28 01:58.620 --> 02:03.720 FYI, we're going to see some cool examples later in this course of actually using backend server code... 29 02:03.720 --> 02:08.790 although it is very advanced and it's not the scope of this course, but I just love it 🥰. 30 02:08.970 --> 02:10.520 So I will show you how that works later. 31 02:10.860 --> 02:16.740 Just remember that the form script can validate the form, it can save the data to a database or a file... 32 02:17.010 --> 02:19.070 and it can perform a whole bunch more. 33 02:19.440 --> 02:25.410 So, for example, if your action attribute was set to, I don't know, a login URI, maybe your... 34 02:25.410 --> 02:29.460 form on the backend could verify the username and password of a user... 35 02:29.490 --> 02:35.550 and if successful, your server could redirect that user to a logged in version of a webpage. 36 02:35.790 --> 02:38.940 And I don't know, the cherry 🍒 on the top could be a nice welcome message. 37 02:39.120 --> 02:41.760 (sound effect: mission completed) Is that starting to sink in? 38 02:41.760 --> 02:44.580 Can you see how important the action attribute is? 39 02:44.850 --> 02:46.230 As a very quick summary... 40 02:46.470 --> 02:51.030 just remember that the action attribute tells your browser exactly where to send the data. 41 02:51.300 --> 02:55.380 And a common technique is to send the data to the same page the form is on. 42 02:55.740 --> 02:57.750 In fact, this is the default scenario... 43 02:57.750 --> 03:03.600 when you don't specify an action attribute at all. Let's just quickly look at one more example before... 44 03:03.600 --> 03:04.620 I finish off this lecture. 45 03:05.490 --> 03:08.790 Let's just say the action attribute doesn't even specify a URL. 46 03:08.970 --> 03:11.010 It just gives a file name. 47 03:11.370 --> 03:18.840 Well, in this instance, when the submit button is pressed, it will send the form data to the script... 48 03:18.840 --> 03:24.210 on the same URL, to the "process.php" script in this example 😵. 49 03:24.510 --> 03:29.610 Don't worry if you don't know exactly how this works or how the server will manipulate the data. 50 03:29.730 --> 03:31.000 That's not the point of this lecture. 51 03:31.020 --> 03:35.900 The point of this lecture was just to get you familiar with why that action attribute is so important. 52 03:36.750 --> 03:37.560 So take a breath. 53 03:37.560 --> 03:39.840 You've learnt a lot, and let's keep going. 54 03:39.930 --> 03:45.690 I want us to discuss another incredibly powerful attribute on the <form> element in the next lecture.