WEBVTT 0 00:00.140 --> 00:00.920 Okey dokey. 1 00:00.950 --> 00:02.690 Let's get on to example number two. 2 00:02.690 --> 00:03.980 I just want to spice things up. 3 00:03.980 --> 00:06.590 I want you to show you now that we can do a few different things. 4 00:06.590 --> 00:10.430 Firstly, why don't we set the target attribute to _blank. 5 00:11.570 --> 00:12.950 Remember what the target attribute does? 6 00:12.950 --> 00:19.400 It tells us where we want the response to be shown to us. And here, because maybe we don't want to keep 7 00:19.400 --> 00:21.890 refreshing the page or having to go back, 8 00:21.920 --> 00:25.270 maybe we want it to be opened in a new page. 9 00:25.280 --> 00:29.450 So let's put target=_blank - just mixing things up. 10 00:30.270 --> 00:34.640 And as I mentioned, I want to use the two HTML5 attributes, right? 11 00:34.650 --> 00:38.370 I want to use pattern, and I want to use required. 12 00:38.610 --> 00:41.850 Well, firstly, actually there's another one I want to use and that's title. 13 00:41.910 --> 00:43.470 So firstly, let's use pattern. 14 00:44.480 --> 00:48.290 This allows us to use regular expressions. 15 00:48.890 --> 00:50.060 I know, I know. 16 00:50.060 --> 00:54.020 I haven't yet spoken about regular expressions, so let's just do this example. 17 00:54.020 --> 00:58.520 And in the next lecture I'll give you a quick rundown of what regular expressions are. 18 00:58.520 --> 01:00.050 But this is not a course on regex. 19 01:00.050 --> 01:01.520 So this is just very high level. 20 01:01.520 --> 01:08.750 Let's say in our password we require the password to begin with a letter, and it needs to contain at 21 01:08.750 --> 01:10.280 least one digit. 22 01:10.310 --> 01:12.050 How can we do that? 23 01:12.200 --> 01:16.730 Well, we need a way to develop a pattern to tell the browser that we're looking for a pattern. 24 01:16.730 --> 01:19.400 And we do that using regular expressions. 25 01:19.490 --> 01:26.240 And the way, or the format of a regular expression, is very peculiar or specific. 26 01:26.420 --> 01:28.160 So you have to follow certain rules. 27 01:28.160 --> 01:33.350 So firstly, we want to say that it has to begin with a character, right? 28 01:33.350 --> 01:34.790 It has to begin with a letter. 29 01:34.790 --> 01:36.470 So that's what this first part is saying. 30 01:36.470 --> 01:39.500 And we can have as many characters or letters as we want. 31 01:40.690 --> 01:47.740 Then at some point it has to contain a digit, at least one digit between 0 and 9. 32 01:48.070 --> 01:52.420 And after that, of course, it can contain any characters. 33 01:53.300 --> 01:58.430 Doesn't have to even contain anything if you don't want to. But it should have at least one digit. 34 01:58.460 --> 02:00.080 So that's the pattern attribute. 35 02:00.080 --> 02:02.690 And I'm going to be talking about regular expressions next. 36 02:02.690 --> 02:08.450 So don't worry if you don't understand this. Then if an error message is shown to a user, I want to 37 02:08.450 --> 02:11.570 be in control of what the browser shows to a user. 38 02:11.570 --> 02:16.340 So let's just say "Please enter a valid password. 39 02:17.320 --> 02:24.160 The password must begin with a letter and contain at least one digit." 40 02:24.160 --> 02:25.780 So now we've used the pattern attribute. 41 02:25.810 --> 02:27.090 We've used the title attribute. 42 02:27.100 --> 02:33.160 Finally, I want the required attribute because the password is a required field. 43 02:33.990 --> 02:36.060 Let's save this, go to our browser. 44 02:36.060 --> 02:41.040 And firstly, I just want to mention I don't like creating rules in passwords without showing the user. 45 02:41.040 --> 02:46.040 So normally I would make it very explicit, just like we saw 46 02:46.050 --> 02:48.690 let me show you here, if we go to MailChimp, 47 02:50.580 --> 02:54.480 let's just go on their website quickly, and we go sign up free. 48 02:54.510 --> 02:54.870 Right. 49 02:54.870 --> 02:58.350 They've done it in a very nice way because under the password, they've given you a lot of hints as 50 02:58.350 --> 02:59.790 to what their password requires. 51 02:59.790 --> 03:03.810 One lowercase, uppercase, one number, one special character and eight characters minimum. 52 03:03.810 --> 03:05.070 So this is a very cool example. 53 03:05.070 --> 03:10.890 And as you start typing, you know, you have a very clear visual representation of what's going on 54 03:10.890 --> 03:11.940 and what's required. 55 03:12.210 --> 03:13.050 Let me just close that. 56 03:13.050 --> 03:17.310 So in our case, we don't have that, so I don't like it, but I just wanted to show you these attributes 57 03:17.310 --> 03:18.540 and what they can do. 58 03:18.540 --> 03:25.620 So if firstly, I just type one letter and I click submit, we get our title, our error message, right? 59 03:25.620 --> 03:27.000 "Please enter a valid password. 60 03:27.000 --> 03:31.020 The password must begin with a letter and contain at least one digit." 61 03:31.050 --> 03:32.480 How cool is that? 62 03:32.490 --> 03:35.340 All right, so now let's begin with a letter. 63 03:35.340 --> 03:37.230 And we use a number. 64 03:37.320 --> 03:39.990 Let's just say the letter A and the number 7. 65 03:40.020 --> 03:40.530 How's that? 66 03:40.530 --> 03:45.390 And Wally, let's now click send and there we go. 67 03:45.390 --> 03:47.970 It allows us to submit the form. 68 03:48.270 --> 03:50.860 If we just have Wally and a letter, 69 03:50.860 --> 03:56.110 but no number, a whole lot of just random characters, and we click "Send", we will be prevented from 70 03:56.110 --> 03:56.800 doing so. 71 03:56.800 --> 03:58.510 How cool, how cool students. 72 03:58.510 --> 04:02.890 But as I mentioned, what exactly is a regular expression? 73 04:02.890 --> 04:08.410 Well, before I move on in the course, let me just take a moment to give you a high level overview 74 04:08.410 --> 04:09.970 of a regular expression.