WEBVTT 0 00:00.620 --> 00:01.190 Seriously... 1 00:01.220 --> 00:02.580 well done for getting this far 🎉. 2 00:02.630 --> 00:08.710 We've only just begun that I hope you can start getting a sense as to how forms operate on web apps. 3 00:09.260 --> 00:11.520 It's very, very simple once you understand the process. 4 00:12.200 --> 00:14.660 Now, I want us to quickly talk about this update... 5 00:14.670 --> 00:18.010 button. What happens when you submit the information? 6 00:18.620 --> 00:24.530 The first thing you need to understand is that clicking the button tells the browser to validate all... 7 00:24.530 --> 00:30.050 of the input elements in the form, and submit it to wherever you specify the action URL in your... 8 00:30.070 --> 00:30.470 form. 9 00:30.920 --> 00:34.100 In our instance, we haven't really defined a lot of validation. 10 00:34.700 --> 00:36.200 Actually, we did with the email... 11 00:36.200 --> 00:38.480 remember? We said it has to be a valid email, 12 00:38.480 --> 00:46.700 so if we type "jhjh" and we try and update ... (error sound) look at that, your browser gives you an error message. It tells you... 13 00:46.700 --> 00:51.740 to include an @ symbol in the Web address - that is built in validation by the browser. 14 00:52.950 --> 00:58.230 We haven't yet discussed other validation techniques, but we will. But at least you know that's what... 15 00:58.230 --> 00:59.890 happens when you click that update button. 16 00:59.890 --> 01:01.530 The browser first does validation. 17 01:01.830 --> 01:05.460 If the validation doesn't pass, it does not get submitted to the server. 18 01:06.030 --> 01:12.330 The second thing that it does, is that it allows us to see all the information the user is sending to the... 19 01:12.330 --> 01:13.040 server. 20 01:13.620 --> 01:16.830 What do I mean? Well, let's type here name as Gerald 🦒, 21 01:17.960 --> 01:22.520 email can be gerald@giraffe.com. 22 01:24.090 --> 01:28.890 Let's say she Gerald 🦒 likes the color green, because he loves leaves 🌿. 23 01:30.390 --> 01:38.280 I am a very tall giraffe, and I am generally a happy person, in this case, an animal. But Gerald think he's... 24 01:38.280 --> 01:45.510 a person. When this user clicks update, look what happens in your URL bar in the browser. Let me click update. (click sound) 25 01:46.930 --> 01:51.670 How crazy is that? Everything after... 26 01:52.880 --> 02:00.770 that question mark represents the variables in our form. Remember all those "name" attributes? Well, each input's... 27 02:00.770 --> 02:07.850 name attribute is followed by an "=" sign, then its value. And each variable is separated by an "&" ... 28 02:08.000 --> 02:08.560 character. 29 02:10.460 --> 02:15.050 And you can imagine if we had a backend server, it would be pretty easy to pull out all of this information, 30 02:15.050 --> 02:20.330 query a database, whatever you want to do, and let us know whether the form submission was successful or 31 02:20.330 --> 02:26.530 not, or to grab some other information from a server to allow them access to a login page, for example... 32 02:27.020 --> 02:29.900 there's so much we can do with all of this information. 33 02:32.720 --> 02:38.390 So how cool is this, you can kind of already see that all the users information is submitted in the... 34 02:38.390 --> 02:45.230 URL above, and the only reason for that is, is that we haven't specified the METHOD type in our form. Remember if we go to.... 35 02:46.440 --> 02:47.360 our HTML here... 36 02:48.110 --> 02:49.040 and we look at our form... 37 02:50.470 --> 02:58.030 we've just got a class, but we haven't put, for example, a method attribute of POST. "POST" puts it into... 38 02:58.030 --> 02:59.690 the body of the HTML request. 39 02:59.710 --> 03:01.510 At the moment, the default is GET. 40 03:02.350 --> 03:05.100 So when we haven't put anything, it's the same thing as a GET request. 41 03:05.680 --> 03:10.410 And that's why with a GET request, all the information is put into that URL. 42 03:10.870 --> 03:16.360 But it's just very interesting to actually realize that information you fill in a form can be very easily... 43 03:16.360 --> 03:18.240 accessible, by you anyway. 44 03:18.850 --> 03:23.150 And that's why a lot of people also say it's much safer to put it into a POST request... 45 03:23.200 --> 03:27.670 so it's not openly visible in the URL. But anyway, we're going to be talking a lot more about this... 46 03:27.670 --> 03:28.090 later. 47 03:28.100 --> 03:33.070 This is hopefully given you just a flavor of what's to come, of what's involved with the form... 48 03:33.070 --> 03:37.990 and I can't wait to get into the next section and start discussing more complicated things. 49 03:38.170 --> 03:40.090 It's going to be really, really fun. 50 03:41.540 --> 03:42.140 Adios 👋.