WEBVTT 0 00:00.230 --> 00:06.240 All right, before we start coding, I just want us to talk a little bit more about forms, and we know 1 00:06.240 --> 00:10.220 that forms are just HTML elements that let you collect data. 2 00:10.710 --> 00:14.700 Pretty simple, but what exactly is a form 📰? 3 00:14.940 --> 00:16.380 How is it constructed 🚧? 4 00:16.650 --> 00:17.820 How does it work? 5 00:18.390 --> 00:25.090 Well, the starting point is to understand that a webform is made up of one or more form controls. Now 6 00:25.170 --> 00:26.400 don't get intimidated. 7 00:27.000 --> 00:29.010 Developers love using fancy words. 8 00:29.340 --> 00:33.450 Sometimes they call these form controls "form widgets" or just "widgets". 9 00:34.110 --> 00:38.690 A form control or a widget is just an item in your form. 10 00:39.360 --> 00:40.210 Pretty simple, right? 11 00:40.410 --> 00:47.430 So a form widget or form control could just be a text field or a button or checkboxes or radio boxes, 12 00:47.430 --> 00:48.780 etc etc. 13 00:49.320 --> 00:54.120 We're going to be learning about a ton of widgets in this course, a lot more than just these, but 14 00:54.120 --> 00:56.340 that's all a form control is. 15 00:57.090 --> 01:04.230 And sometimes you can enforce certain values or formats of those widgets, of those controls. 16 01:04.740 --> 01:07.000 And this is known as form validation. 17 01:07.710 --> 01:09.980 We're going to be looking at this in the course as well. 18 01:11.020 --> 01:12.970 "But all right, Clyde, this is getting a bit boring. 19 01:13.000 --> 01:14.320 How do we create a form? 20 01:14.330 --> 01:15.310 Just tell me already." 21 01:16.530 --> 01:18.220 OK, well it's pretty simple. 22 01:18.640 --> 01:23.110 All forms start with a <form> element like this. (typing sound effect) 23 01:24.400 --> 01:27.930 And this element formally defines a form. 24 01:28.510 --> 01:37.330 It's a container element, just like a tag or a section or a footer element, but specifically for containing 25 01:37.330 --> 01:37.980 forms. 26 01:38.320 --> 01:39.040 Pretty simple. 27 01:39.640 --> 01:42.430 It's just the word "form" wrapped in tags. 28 01:42.880 --> 01:45.490 And this element formally defines a form. 29 01:46.900 --> 01:54.610 OK, that was a very long, roundabout way of saying that we should contain all of our form widgets, 30 01:54.610 --> 02:00.250 our form controls within a form element. And this form element is very powerful. 31 02:00.550 --> 02:06.670 And before we even get into the form controls and form widgets, let's just look at this form element 32 02:06.670 --> 02:07.750 in a bit more detail. 33 02:08.410 --> 02:14.500 This form element can take many different types of attributes to configure the way the form behaves. 34 02:15.280 --> 02:22.420 All of its attributes are optional, but it's pretty standard practice to always set at least the "action" 35 02:22.420 --> 02:24.220 and "method" attributes. Whew, 36 02:25.120 --> 02:28.680 "okay Clyde, well what are these action and method attributes?" 37 02:28.690 --> 02:29.440 What do they mean? 38 02:30.190 --> 02:32.140 Well, firstly, let's look at this action attribute. 39 02:32.410 --> 02:37.990 The action attribute defines the action that you want your form to take when the data is submitted. 40 02:38.500 --> 02:43.530 In other words, it defines the URL that will process the form data. 41 02:43.900 --> 02:46.750 You know, it's where the input collected by the form is sent 42 02:46.750 --> 02:54.910 when the user clicks on the submit button. And you normally send your data to a special URL defined 43 02:54.910 --> 02:58.270 by your web server that knows how to process the data. 44 02:58.660 --> 03:02.770 And what this means is that you obviously need server side code to handle this information. 45 03:02.890 --> 03:07.690 You can write this code in Node, PHP, Ruby on Rails, etc etc. 46 03:08.020 --> 03:13.960 And just FYI, if you leave this action attribute blank, the form is just going to submit the data 47 03:13.960 --> 03:16.500 to the same URL that it's on. 48 03:16.960 --> 03:17.760 Pretty straightforward. 49 03:18.250 --> 03:20.350 "OK, Clyde, what about this method attribute?" 50 03:20.770 --> 03:25.900 Well, even semantically, you can kind of think about it as the same as the English meaning. A method kind-of 51 03:25.900 --> 03:27.280 is how you do something. 52 03:27.340 --> 03:31.960 So when it comes to forms, the "method" attribute defines how the form is submitted. 53 03:32.200 --> 03:35.950 And usually you have two values, a GET or a POST. 54 03:36.840 --> 03:43.620 And as I mentioned, both of these define HOW the form is submitted to the backend server. And which 55 03:43.620 --> 03:48.270 one you use, largely depends on how you want your web server to handle the form. 56 03:48.630 --> 03:54.990 But the general rule is that you should use POST when you want to change data on the server and reserving 57 03:55.020 --> 03:57.390 GET for when you're only getting data. 58 03:57.600 --> 04:03.330 So this was just a very, very high level summary of forms in general, how we make them up, why we 59 04:03.330 --> 04:05.300 even have to use the form element. 60 04:05.670 --> 04:07.590 Hope you're starting to get a feel for all of this 61 04:07.590 --> 04:09.030 but we are only just beginning.