WEBVTT 0 00:00.210 --> 00:01.870 And welcome back. 1 00:02.280 --> 00:08.820 In these next few lectures, we're going to be talking about the encoding type attribute and yes, it 2 00:08.820 --> 00:11.130 is just another form attribute. 3 00:11.550 --> 00:14.910 It's an attribute we place on the form element. 4 00:15.390 --> 00:18.600 OK, well, what is this attribute and how does it work? 5 00:18.630 --> 00:21.180 Well, firstly, this is what it looks like. 6 00:21.210 --> 00:24.900 We wrap it with in the form element, the encoding type attribute. 7 00:25.410 --> 00:28.170 But let's compare this to what we've just learned. 8 00:28.620 --> 00:34.210 Remember, we used the accept-charset attribute and a lot of people get confused between the... 9 00:34.440 --> 00:39.250 accept-charset attribute and the encoding type or the enctype attribute. 10 00:39.540 --> 00:40.680 What are the differences ๐Ÿคทโ€โ™€๏ธ? 11 00:41.250 --> 00:45.540 Well, firstly, let me recap that accept-charset attribute. You should be very familiar with that now. 12 00:45.570 --> 00:51.140 Remember, this is what characters you want to allow users to type into your form. 13 00:51.450 --> 00:53.610 Usually that's set to utf-8. 14 00:53.610 --> 00:56.600 And if you don't set it, the default is utf-8. 15 00:57.450 --> 00:58.380 That's all good and well. 16 00:58.710 --> 01:02.180 But what is this enctype - this encoding type attribute? 17 01:02.370 --> 01:10.560 I like to think about it as a way of defining how your form data should be formatted in the body of 18 01:10.560 --> 01:12.450 the HTTP request. 19 01:12.840 --> 01:18.780 In other words, the encoding type specifies the formatting of your content. 20 01:18.780 --> 01:26.400 And as we're going to see in some examples, it defines, or it sets, the content type in your HTTP request ๐Ÿคจ. 21 01:26.590 --> 01:27.730 It might be a bit confusing. 22 01:27.750 --> 01:31.080 Let me just try and explain this a bit better in person. 23 01:35.200 --> 01:35.640 All right. 24 01:35.850 --> 01:37.970 I don't want you to get confused. 25 01:37.980 --> 01:39.710 I don't want you to get lost in all the detail. 26 01:40.320 --> 01:41.100 We've got the... 27 01:41.110 --> 01:42.990 accept-charset attribute. 28 01:43.680 --> 01:44.310 What's that? 29 01:45.480 --> 01:47.070 Well, let's just break it down. 30 01:47.490 --> 01:53.900 It's the character set, the charset, that you are accepting in your form. 31 01:54.330 --> 01:55.200 So that makes sense. 32 01:55.500 --> 01:59.180 Accept charset, the character set that I'm accepting in my form. 33 01:59.920 --> 02:02.670 OK, and then we've got this enctype attribute. 34 02:03.210 --> 02:12.020 Well, what is that? Just intuitively think about it as ... enc standing for 'encoding' and 'type' as the type of encoding. 35 02:12.480 --> 02:16.480 How should we encode the information in order to send it to your server? 36 02:16.800 --> 02:21.990 In other words, how do we extract the information that we've received from the form, and package it 37 02:21.990 --> 02:26.310 nicely in the HTTP body and send that to a server? 38 02:26.670 --> 02:31.980 That's effectively what we're trying to do with this enctype attribute. So please don't get confused. 39 02:31.980 --> 02:33.180 Don't get lost in the detail. 40 02:33.390 --> 02:35.390 But enough said, let's jump back into the lecture. 41 02:37.130 --> 02:42.150 Is it kind of making sense? Don't worry if its not. We're going to get into examples shortly. 42 02:42.840 --> 02:45.810 But now I want us to jump into the GET request. 43 02:46.080 --> 02:47.400 This is the default right, 44 02:47.400 --> 02:54.180 when you submit a form. What you may have not known is that behind the scenes, the way a GET request 45 02:54.180 --> 03:01.080 submits data to a server, is via the encoding type set to this horrible long word - application/ 46 03:01.080 --> 03:03.900 x-www-form-urlencoded. 47 03:04.410 --> 03:06.900 This is what was happening behind the scenes. 48 03:07.110 --> 03:11.350 And what does this application/x-www-form-urlencoded mean? 49 03:12.480 --> 03:18.240 Well, it just means the browser is going to send the form values as name:value pairs. 50 03:18.600 --> 03:24.000 These are going to be placed in the header field, and each name:value is going to be separated by the... 51 03:24.000 --> 03:25.650 ampersand "&" symbol. 52 03:26.730 --> 03:33.810 Spaces are usually replaced with the plus sign, and all special values are converted to the hex format, 53 03:33.810 --> 03:39.630 right, %HH. We've seen the URL encoding format before. And with a GET request, with this 54 03:39.630 --> 03:40.400 default type... 55 03:40.410 --> 03:43.800 we've seen that these name:value pairs are placed in the URL. 56 03:44.070 --> 03:50.130 If there's one thing I want you to remember with the GET request, just remember that the encoding type - 57 03:50.550 --> 03:56.860 application/x-www-form-urlencoded is mandatory for the GET request. 58 03:57.210 --> 04:00.240 We cannot have anything else when it comes to a GET request. 59 04:00.450 --> 04:01.350 Kind of makes sense, right? 60 04:01.350 --> 04:03.700 Because there's only one format with the GET request. 61 04:03.700 --> 04:05.370 It has to be embedded in that URL. 62 04:05.610 --> 04:08.310 And because of that, there is only this one type. 63 04:08.550 --> 04:09.420 But enough talk. 64 04:09.420 --> 04:12.000 Before we continue, I just want to show you an example. 65 04:12.000 --> 04:12.960 Let's code up a form ๐Ÿ‘จโ€๐Ÿ’ป. 66 04:12.960 --> 04:15.720 Let's code up a GET request, and let me show you this in action. 67 04:16.060 --> 04:16.760 Let's do that now.