WEBVTT 0 00:00.210 --> 00:06.210 Welcome to this course on forms. I'm super, super excited. I'm amped. I hope you are too. 1 00:06.480 --> 00:10.740 But, you know, before I get too excited, let's just take a step back and let's understand what forms 2 00:10.740 --> 00:13.410 are. We've all seen a form on the web. 3 00:13.410 --> 00:20.490 We've all used one, but very few of us have coded them and even fewer of us understand them in a lot 4 00:20.490 --> 00:21.000 of detail. 5 00:21.000 --> 00:22.560 And that's what this course is all about. 6 00:22.740 --> 00:24.060 So I'm super, super excited. 7 00:24.660 --> 00:26.400 But let's just take a step back. 8 00:27.000 --> 00:34.460 Most areas where you can input data on a Web page or an app, are created using HTML forms. 9 00:34.950 --> 00:37.680 For example, we are all familiar with the text input box. 10 00:38.250 --> 00:42.180 That's pretty much the stock standard input that you would expect in a form. 11 00:42.690 --> 00:45.900 But there are a plethora of others, which we're going to cover in this course. 12 00:46.290 --> 00:48.810 Some of the most popular ones are radio buttons. 13 00:49.230 --> 00:49.420 Hmm. 14 00:49.680 --> 00:50.730 I like option two. 15 00:51.690 --> 00:56.880 Radio buttons, by the way, allow you to only select one option of the selections. 16 00:57.450 --> 00:59.970 But as we know, radio buttons are not the only type. 17 00:59.970 --> 01:04.250 We've also got checkboxes, and maybe you fancy option one. 18 01:04.740 --> 01:06.540 We've all seen dropdown menus. 19 01:07.770 --> 01:13.140 And we all know about text areas where you can write something very cool. 20 01:14.710 --> 01:18.070 Those are just some of the few form widgets that are available to us. 21 01:18.430 --> 01:23.590 And once all of these kind of widgets or form controls are filled in, what happens next? 22 01:24.100 --> 01:29.410 Well, usually the data is submitted to a server for processing and or storage. 23 01:30.160 --> 01:32.290 That data has to be used in some way. 24 01:32.590 --> 01:38.680 For example, you might want to store customer details in a database for later use, or sometimes you 25 01:38.680 --> 01:45.220 want your app to be instantly updated after the user chooses a product to look at, or comments to view 26 01:45.220 --> 01:46.930 on a blog post, for example. 27 01:47.200 --> 01:51.050 But this is not to say that the data has to be submitted to a server. 28 01:51.430 --> 01:56.600 In fact, sometimes data can be used on the client side to immediately update the DOM. 29 01:57.310 --> 02:01.620 By the way, if you're wanting to know what the DOM is, please check out my DOM courses. 30 02:01.630 --> 02:05.500 I've got two of them - a fundamentals course on the DOM and also a very advanced one, 31 02:05.740 --> 02:07.120 part one and part two. 32 02:07.420 --> 02:08.930 That's just a bit of FYI. 33 02:08.930 --> 02:09.920 So what do 34 02:09.940 --> 02:13.930 I mean, that data can be used on the client side immediately to manipulate the DOM. 35 02:14.380 --> 02:18.070 Well, what about an example of a user adding an item to a list? 36 02:18.480 --> 02:22.280 What about the user wanting to show or hide a UI feature? 37 02:22.570 --> 02:25.710 These don't involve a database, well, not necessarily. 38 02:26.320 --> 02:31.920 And because forms are so fundamental, they are often referred to as the money pages of a website. 39 02:32.500 --> 02:38.020 In other words, they're how e-commerce sites selling products, how SAS companies collect payment for 40 02:38.020 --> 02:41.200 their service, and how nonprofit groups raise money online. 41 02:41.740 --> 02:47.980 In fact, many companies measure the success of their websites by the effectiveness of its forms because 42 02:47.980 --> 02:54.400 they answer questions like, how many leads did our website send to our sales team? Or, how many people signed 43 02:54.400 --> 02:55.750 up for our product last week? 44 02:56.050 --> 03:01.960 And this often means that forms are subject to endless A/B tests and web optimizations. 45 03:02.780 --> 03:07.060 Bit of a mouthful, but all I'm trying to say is that this course is going to allow you to master the 46 03:07.060 --> 03:09.850 essentials of web forms. 47 03:10.600 --> 03:16.990 However, for historic and technical reasons, it's not always obvious how to use forms to their full 48 03:16.990 --> 03:17.620 advantage. 49 03:17.890 --> 03:20.160 But don't stress, I've got your back. 50 03:20.170 --> 03:21.640 This is what this course covers. 51 03:21.640 --> 03:28.330 We cover all the essential aspects of web forms, including marking up the HTML structure, CSS styling, 52 03:28.330 --> 03:34.120 validating form data, and we also touch on submitting data to a server. 53 03:34.420 --> 03:38.560 In other words, I talk a little bit later in this course, especially later, because it's very advanced 54 03:38.920 --> 03:44.800 on how we submit form data to a server. Whew. So just remember, take a step back. 55 03:45.310 --> 03:47.210 There are two aspects to forms. 56 03:47.740 --> 03:52.990 There's the front end to forms - the HTML, the CSS - and don't let that fool you. 57 03:52.990 --> 03:58.210 It's very, very difficult. And there's also the back end, which is the server side. 58 03:58.570 --> 04:03.970 And in this course we're going to predominantly look at the front end aspect of forms. 59 04:04.450 --> 04:06.360 And like I mentioned, don't let this fool you. 60 04:06.490 --> 04:10.620 Very few people fully appreciate how complex forms can be. 61 04:10.990 --> 04:12.600 So I'm super excited. 62 04:12.610 --> 04:13.000 I hope, 63 04:13.210 --> 04:14.310 I hope I haven't scared you. 64 04:14.320 --> 04:14.920 Don't worry. 65 04:14.960 --> 04:16.360 That's what I'm here for. I'm here to help. 66 04:16.600 --> 04:18.100 It's going to be a really fun course. 67 04:18.100 --> 04:20.320 We're going to be coding many, many forms together. 68 04:20.740 --> 04:22.210 So sit back, enjoy. 69 04:22.210 --> 04:23.980 And I'll see you in the next lecture. (background music plays)