WEBVTT 0 00:00.600 --> 00:07.440 I don't want to sound like a broken record, but learning about the form element is incredibly important. 1 00:08.040 --> 00:09.600 But where did it all begin? 2 00:09.990 --> 00:11.250 That's a good question. 3 00:12.060 --> 00:15.840 The <form> was introduced in the HTML2 specification. 4 00:16.650 --> 00:19.590 Basically, it's been around since "pa fell off the bus". 5 00:20.340 --> 00:22.240 That's an expression in Africa, by the way... 6 00:22.260 --> 00:26.380 it just means it's been around for a very, very long time 🦖. 7 00:26.670 --> 00:28.920 And why was this <form> created? 8 00:28.920 --> 00:30.000 We've mentioned it before. 9 00:30.420 --> 00:35.160 The form element was designed to contain other form widgets or controls. 10 00:35.550 --> 00:41.070 And rather intuitively, it's mostly used to gather information from a user. 11 00:41.430 --> 00:42.330 Pretty obvious... 12 00:42.330 --> 00:44.100 nothing you don't know already. 13 00:44.490 --> 00:50.780 What's very, very important with forms, though, is the amount of attributes we can attach to it. 14 00:51.300 --> 00:53.570 There are many attributes for a form, 15 00:54.060 --> 00:55.560 these are just some of them. 16 00:56.100 --> 00:58.650 And we're going to be talking about these in this course. 17 00:59.190 --> 01:00.780 Some of these can be very complex. 18 01:00.780 --> 01:06.750 Some of these can be very confusing unless you've been in the industry for many years, such as exactly... 19 01:06.750 --> 01:09.510 what the "accept-charset" is, or the "enctype". 20 01:10.540 --> 01:15.970 But the two most important attributes are what? We've already mentioned them before, so you should get... 21 01:15.970 --> 01:16.120 it. 22 01:17.220 --> 01:19.620 That's right, it's the "action" and the "method". 23 01:20.720 --> 01:26.690 So right now, let's just forget about everything else and look at these "action" and "method" attributes. 24 01:27.360 --> 01:33.310 Remember the action? That indicates where you're sending the form data. 25 01:33.890 --> 01:39.850 Basically, it tells your browser the location of the script that's going to process the form data. 26 01:40.460 --> 01:43.690 And that's why that action attribute is very, very important. 27 01:44.270 --> 01:49.730 The method attribute on the other hand, indicates how the browser should attach the form's... 28 01:49.730 --> 01:58.220 data, to the request. POST is preferred because it embeds the information in the body of the HTTP request 😬. 29 01:58.220 --> 01:59.170 But don't stress... 30 01:59.180 --> 02:00.620 I know that might sound confusing. 31 02:00.950 --> 02:03.020 We're going to get into a lot more detail, later. 32 02:03.380 --> 02:05.980 We've already seen the GET request. 33 02:05.990 --> 02:09.140 Remember, that's the default method on a form. 34 02:09.470 --> 02:15.070 And we saw when we submitted all the data in our form that we built, it was appended to the URL. 35 02:15.770 --> 02:16.700 So far, so good. 36 02:17.060 --> 02:17.870 It's not that bad. 37 02:19.090 --> 02:19.720 Let's move on. 38 02:21.010 --> 02:23.010 Don't get overwhelmed with all the detail... 39 02:23.260 --> 02:28.750 just remember that apart from these attributes and a few others we haven't yet discussed, the form... 40 02:28.750 --> 02:30.090 is just a container. 41 02:30.520 --> 02:31.890 In fact, it looks like a cup. 42 02:32.200 --> 02:33.220 I want a container. 43 02:34.390 --> 02:36.460 There you go - that's more like a container. 44 02:36.640 --> 02:38.410 What does it contain if it's a container? 45 02:38.440 --> 02:44.860 Well, we know it contains other form controls. And what do I mean by form controls? I just mean it contains things... 46 02:44.860 --> 02:49.120 like buttons, or inputs, or fieldsets and a whole bunch more. 47 02:49.660 --> 02:51.430 This is the most important thing for you... 48 02:51.700 --> 02:58.480 remember when it comes to the form element. "Yes Clyde, I understand it's just a container, but what... 49 02:58.480 --> 02:59.980 do some of these attributes do?" 50 03:00.250 --> 03:03.040 Well, that's exactly what we're going to discuss next.