WEBVTT 0 00:01.020 --> 00:01.770 Whoohoo! 1 00:01.980 --> 00:02.670 Well done. 2 00:02.700 --> 00:08.280 I cannot believe it, we've only just started, but man, let's just do a quick recap about what we... 3 00:08.280 --> 00:10.410 have learned about forms already. 4 00:11.070 --> 00:16.500 Firstly, we know form is made up of one or more form controls, aka. widgets. 5 00:16.980 --> 00:22.080 And in this sections we've looked at the most common types of form widgets. 6 00:22.830 --> 00:31.620 In fact, we now have a whole lot of tools available for collecting user data such as input-text, 7 00:31.830 --> 00:37.320 input-type email, input-type radio, input- type checkbox, select, and options, textareas... 8 00:37.320 --> 00:38.620 and even buttons. 9 00:39.510 --> 00:40.740 So take a step back. 10 00:40.740 --> 00:42.720 This is actually a phenomenal amount. 11 00:42.810 --> 00:48.750 We saw how just changing the 'type' property of that input element can really transform the look and feel... 12 00:48.750 --> 00:50.700 of a particular form control. 13 00:51.240 --> 00:57.480 We saw, for example, the input type of text is literally a input box for text, whereas input type... 14 00:57.480 --> 01:01.440 checkbox gives you a completely different UI result. 15 01:01.860 --> 01:06.630 And although there are a ton more 'type' attributes to this input, which we're going to see in the next... 16 01:06.630 --> 01:12.210 and upcoming sections, for now, just take a step back and you should be pretty comfortable with the... 17 01:12.590 --> 01:16.980 HTML and CSS required to build a beautiful form, even just with these elements. 18 01:17.430 --> 01:24.000 But, making these forms functional requires a little bit more skill that we haven't yet learned, which 19 01:24.000 --> 01:25.890 is coming up in the upcoming sections. 20 01:26.190 --> 01:27.990 So, hang in there is what I'm trying to say. 21 01:28.450 --> 01:30.960 Okay, but let's now just put that all aside. 22 01:31.290 --> 01:37.380 We've learned a few very crucial elements, but what do we do with all of the data you might be thinking? 23 01:37.410 --> 01:39.530 And that is a great, great question. 24 01:40.260 --> 01:45.780 The last part, and perhaps the trickiest, is to handle the data in some way. 25 01:46.170 --> 01:47.940 And this is usually done on the server, 26 01:47.940 --> 01:48.270 right. 27 01:48.690 --> 01:55.440 And remember, we wrap our form within a <form> element and that form element defines where and how to... 28 01:55.440 --> 01:58.800 send the data thanks to the "action" and "method" attributes. 29 01:58.810 --> 02:00.240 We've seen this already. 30 02:01.050 --> 02:03.070 And don't forget about that name attribute... 31 02:03.270 --> 02:04.680 remember how important it was? 32 02:05.310 --> 02:11.220 The name attribute on each widget is important for both the client, and the server side. 33 02:11.610 --> 02:17.210 They tell the browser which name to give each piece of data, and on the server side, of course, they... 34 02:17.220 --> 02:22.950 let the server extract those values and handle each piece of data by that name. 35 02:23.310 --> 02:29.190 Because remember, the form data is sent to the server as name:value pairs. 36 02:29.970 --> 02:35.430 And of course, to give an item a name, we use the name attribute on each form widget. 37 02:36.200 --> 02:37.350 Okay, that makes sense. 38 02:37.620 --> 02:40.080 And how does the server side code work? 39 02:40.650 --> 02:48.510 Well, the way the server side script handles the data is purely up to you, and it very much depends... 40 02:48.510 --> 02:53.460 on your server side language, PHP, Python, Ruby, Java, C#, etc etc. 41 02:53.850 --> 02:58.320 Each of those languages have their own mechanisms of handling form data. 42 02:58.830 --> 03:04.350 And yes, it's a bit beyond the scope of this entire course to go into much detail on the server side... 43 03:04.350 --> 03:04.680 code. 44 03:04.950 --> 03:10.950 But we are going to touch on it in a bit more detail later on in this course. "Alright Clyde, well, where to ... 45 03:10.950 --> 03:11.980 next? 46 03:11.980 --> 03:12.840 What are we going to be doing?" 47 03:13.560 --> 03:18.060 Well, I want to start by saying we've only touched the tip of the iceberg 🧊. 48 03:18.450 --> 03:21.780 It's now time for us to start taking a bit of a deeper look. 49 03:22.530 --> 03:26.670 Forms are complex, and they have way more power than what we've seen here. 50 03:26.970 --> 03:31.320 And the other sections in this course, of course, will help you master the rest. 51 03:31.860 --> 03:34.140 Remember, forms are complex. 52 03:34.560 --> 03:40.830 In fact, the flexibility of forms, the amount of things we can do with them, in my opinion, makes... 53 03:40.830 --> 03:44.240 them the most complex structure in HTML. 54 03:44.610 --> 03:49.980 You can build any kind of basic form using dedicated form elements and attributes, but using the correct... 55 03:49.980 --> 03:56.310 structure when building an HTML form will help ensure that the form is both usable and accessible by... 56 03:56.310 --> 03:57.120 all users. 57 03:57.660 --> 04:05.160 So without further ado, let's jump into more detail around the functionality of different widgets, around... 58 04:05.160 --> 04:09.870 the different form controls in detail, studying all the different options available to collect different... 59 04:09.870 --> 04:10.980 types of data. 60 04:11.310 --> 04:15.510 We're going to be looking at the original set of form controls available in browsers since the early... 61 04:15.510 --> 04:16.290 days of the Web. 62 04:16.500 --> 04:21.180 And of course, we're going to be digging into the newer widgets that have recently been introduced. 63 04:21.480 --> 04:26.850 But perhaps before we even get onto widgets, I just want to discuss this <form> element in a little bit... 64 04:26.850 --> 04:27.690 more detail. 65 04:28.170 --> 04:29.640 Well actually, in quite a bit more detail. 66 04:29.640 --> 04:34.530 I want you to understand why we have to wrap all of our widgets in that <form> element 🤔. 67 04:34.920 --> 04:36.120 But I'm super excited. 68 04:36.120 --> 04:40.320 I hope you are too. Stay motivated and I'll see you in the next section.