WEBVTT 0 00:00.240 --> 00:00.580 Man ... 1 00:00.590 --> 00:01.460 we've been having a lot of fun, 2 00:01.490 --> 00:01.910 haven't we? 3 00:01.910 --> 00:06.560 And I just, you know, we've finished pretty much on the <form> element itself. 4 00:07.250 --> 00:07.730 I know. 5 00:07.730 --> 00:09.020 I know you don't believe me, right? 6 00:09.020 --> 00:10.160 But it's true. 7 00:10.160 --> 00:10.670 It's true. 8 00:10.700 --> 00:12.170 We've done a lot. 9 00:12.200 --> 00:15.740 We've looked at a ton of attributes just on the <form> element itself. 10 00:15.740 --> 00:17.920 We haven't even started talking about how to build forms. 11 00:17.930 --> 00:20.120 We've just spoken about the <form> wrapper. 12 00:20.120 --> 00:21.530 And it's not just theory. 13 00:21.530 --> 00:23.210 This is really practical stuff. 14 00:23.210 --> 00:29.150 And I just want to show you here, if we look at Mailchimp and look at their form. I just want to show 15 00:29.150 --> 00:29.540 you their form. 16 00:29.540 --> 00:30.860 Let's go "Sign Up Free". 17 00:31.490 --> 00:33.320 It's a very cool, intuitive form 18 00:33.650 --> 00:39.320 um, because they've got, you know, all these, you know, frontside checks in place, you know, for 19 00:39.320 --> 00:44.570 the password, for example, one lower character, one uppercase, one number, one special character, 20 00:44.570 --> 00:46.040 and then eight characters in minimum. 21 00:46.040 --> 00:50.840 And then it gives you nice visual representations of when you've passed the password test, a very cool 22 00:50.840 --> 00:52.850 intuitive form, very simple to understand. 23 00:52.850 --> 00:55.040 And this is what I like with sites, 24 00:55.040 --> 00:56.660 you know, I want it to be easy. 25 00:56.690 --> 00:58.220 You don't want the user to battle. 26 00:58.850 --> 01:01.120 Let's inspect how they built this form though. 27 01:01.170 --> 01:05.580 Let's see what they did, just so you can kind of see, you know, some of the attributes that they used. 28 01:05.670 --> 01:08.760 Let's click on email and let's just work our way up to the <form>. 29 01:08.760 --> 01:09.720 Here we go. 30 01:09.780 --> 01:10.830 So here's the <form>, right? 31 01:10.830 --> 01:11.910 We can see it's wrapped. 32 01:11.940 --> 01:13.260 Look at this. 33 01:13.320 --> 01:14.990 It's super, super cool 😎. 34 01:15.490 --> 01:16.590 Trying to zoom in too much. 35 01:16.590 --> 01:17.250 That's why. 36 01:17.280 --> 01:18.330 Look at that. 37 01:18.360 --> 01:19.530 Isn't this cool? 38 01:19.860 --> 01:24.810 So the first thing I want you to see is that the entire form is wrapped within a <form>. 39 01:24.840 --> 01:25.200 Okay? 40 01:25.200 --> 01:26.790 I'm not making these things up. 41 01:27.150 --> 01:28.410 Here's the <form> tag. 42 01:28.410 --> 01:34.950 You can see those three little dots "..." and then the closing form tag </form> just tells you everything is wrapped 43 01:34.950 --> 01:36.360 within this <form> tag. 44 01:36.360 --> 01:37.920 That's how we build forms. 45 01:37.920 --> 01:41.370 And then I don't even want to examine inside, right? 46 01:41.370 --> 01:44.790 I don't want to examine all these input types and the fieldsets, etc 47 01:44.820 --> 01:46.560 we're going to get into that later in the course. 48 01:46.560 --> 01:49.350 But I want you to look at the attributes. 49 01:49.380 --> 01:49.680 Okay. 50 01:49.680 --> 01:51.210 Let's look at the first attribute, "action". 51 01:51.210 --> 01:54.120 Well, we've already discussed action at length. 52 01:54.330 --> 01:58.110 It tells the browser WHERE to send the form data 53 01:58.140 --> 01:59.730 when the user clicks submit. 54 01:59.730 --> 02:02.850 Here, it's going to a URL called "/signup/post". 55 02:02.880 --> 02:04.170 Pretty straightforward. 56 02:04.740 --> 02:06.000 We've got method. 57 02:06.660 --> 02:09.210 The default is GET. Here, 58 02:09.210 --> 02:10.710 it's set to POST. 59 02:10.740 --> 02:14.040 You know, as soon as you're dealing with passwords, you don't really want to be sending these kind 60 02:14.040 --> 02:15.450 of things in a GET request, do you? 61 02:15.480 --> 02:16.320 It's not safe. 62 02:16.350 --> 02:19.770 That's why they've set the method to POST. No ways, 63 02:19.770 --> 02:20.460 look at that. 64 02:20.490 --> 02:20.970 novalidate 65 02:20.970 --> 02:26.250 novalidate, my dear students. Just when you were wondering when would I ever use a novalidate 🤔 ... 66 02:26.250 --> 02:30.990 well, here is a very good example because we saw there's so much of their own validation logic they're 67 02:30.990 --> 02:31.590 using, 68 02:31.590 --> 02:34.290 they don't want the browser to get involved. 69 02:34.290 --> 02:35.160 So there you go. 70 02:35.190 --> 02:37.650 They've used the novalidate attribute. 71 02:37.680 --> 02:39.810 They've assigned it to the value of novalidate. 72 02:39.810 --> 02:43.980 But actually they don't even need to do that, because that novalidate is just a binary value - 73 02:43.980 --> 02:45.450 it's either there or it's not. 74 02:45.840 --> 02:46.710 What else have they got? 75 02:46.740 --> 02:46.950 Okay. 76 02:46.950 --> 02:51.780 And then they've just got ID, class and putting in data for CSS and all that kind of stuff. 77 02:51.780 --> 02:54.180 So that's more for styling purposes. 78 02:54.360 --> 02:56.070 We don't have to worry about that. 79 02:56.070 --> 03:01.650 But I just wanted to show you a very practical example of, you know, a form that I think is very simple 80 03:01.680 --> 03:04.050 and intuitive to use and how they built it. 81 03:04.050 --> 03:07.050 You know, these are attributes we've literally been discussing in the course. 82 03:07.050 --> 03:08.430 It's very practical. 83 03:08.430 --> 03:10.680 This is a huge, successful company. 84 03:10.680 --> 03:15.840 This is a website where they've paid millions to developers to develop and you can see that they are 85 03:15.840 --> 03:17.940 using the same attributes we're talking about. 86 03:17.970 --> 03:21.300 It's super, super practical! Enough blibber-blabber 87 03:21.300 --> 03:24.270 Clyde, we've spoken about the <form>. 88 03:24.480 --> 03:26.880 I want to now get into some of the widgets. 89 03:26.880 --> 03:28.800 I want to talk about URL encoding. 90 03:29.340 --> 03:31.110 I'm just, I'm just super, super excited. 91 03:31.110 --> 03:34.170 So I'm going to go grab a coffee ☕ and then let's continue. 92 03:34.200 --> 03:35.100 See you now.