WEBVTT 0 00:00.080 --> 00:03.500 Let's start by looking at the input type of password. 1 00:03.500 --> 00:09.830 Firstly, the password attribute is also a text input field, and it's one of the original input types 2 00:09.830 --> 00:12.260 introduced by the HTML specification. 3 00:12.260 --> 00:19.100 It's been around for a very, very long time. And it's very similar to using other input text fields. 4 00:19.100 --> 00:20.870 So don't fool yourself. 5 00:20.870 --> 00:26.830 There are no constraints and no security benefits by having the password attribute. 6 00:26.840 --> 00:29.240 What do I mean by no constraints? 7 00:29.270 --> 00:33.290 Well, it doesn't add any special constraints to the entered text. 8 00:33.290 --> 00:40.160 All it does is obscures the value entered into the form with dots or asterisks, so it can't easily 9 00:40.160 --> 00:41.600 be read by others. 10 00:41.630 --> 00:45.770 Actually, it also does prevent users from copying the text to a clipboard. 11 00:45.980 --> 00:51.590 So in that sense, maybe I shouldn't be saying no constraints, I should say "not many" constraints because 12 00:51.590 --> 00:55.010 the user can still type whatever they want into that password field. 13 00:55.010 --> 00:58.910 Secondly, it provides us with no added security. 14 00:58.940 --> 01:04.110 Keep in mind the password type is just a user interface. 15 01:04.230 --> 01:09.750 So unless you submit your form securely, it will get sent in plain text. 16 01:09.750 --> 01:12.960 And this is bad for security for obvious reasons, right? 17 01:12.960 --> 01:18.510 A malicious party could interpret your data, steal passwords, credit card details or whatever else 18 01:18.540 --> 01:20.460 a user has submitted. 19 01:20.460 --> 01:24.030 But this doesn't render this type useless. 20 01:24.030 --> 01:26.730 We can use it and we do use it as developers. 21 01:26.730 --> 01:29.940 So I want to show you two examples. 22 01:32.260 --> 01:38.350 And in example number one, I want to make use of HTML5's placeholder attribute, and I want it to be 23 01:38.350 --> 01:41.590 the most simple use of the password attribute. 24 01:41.620 --> 01:42.580 Let's have a look. 25 01:43.000 --> 01:44.890 Example number one - the most simple case - 26 01:44.890 --> 01:48.460 let's create a very, very simple form. 27 01:48.610 --> 01:52.600 And we're going to use this password attributes. Form. 28 01:52.840 --> 01:54.310 We don't need an action. 29 01:54.490 --> 01:57.460 And the default method you already know is set to GET. 30 01:57.460 --> 01:59.620 And let's wrap, often what I do, 31 01:59.650 --> 02:05.530 I'll wrap form controls within a paragraph. So, username, and let's give an input 32 02:05.530 --> 02:09.550 of type text. The name can be user, 33 02:09.550 --> 02:14.140 or we could have said username, it doesn't really matter. And I want a placeholder here. 34 02:14.320 --> 02:16.930 Placeholder can be "Login username". 35 02:17.290 --> 02:18.120 Very straightforward. 36 02:18.130 --> 02:19.960 If we save this, go to our browser. 37 02:21.140 --> 02:21.770 Refresh. 38 02:21.770 --> 02:22.340 There we go. 39 02:22.370 --> 02:24.400 Username: Login username. 40 02:24.410 --> 02:25.850 Let's go back to our text editor. 41 02:25.850 --> 02:27.790 And now I want to do the password. 42 02:27.800 --> 02:28.160 Okay. 43 02:28.190 --> 02:29.180 Password: 44 02:30.470 --> 02:34.670 input. But now I want its type set to password. 45 02:34.700 --> 02:36.520 This is the first time we've done this. 46 02:36.530 --> 02:37.700 How cool. 47 02:37.730 --> 02:39.620 The name submitting to the server, 48 02:39.650 --> 02:41.200 let's just say is "password". 49 02:41.210 --> 02:42.980 We don't need an ID here. 50 02:43.010 --> 02:44.150 Let's have a placeholder. 51 02:44.150 --> 02:46.880 We can just say "Choose a strong 52 02:47.900 --> 02:48.590 password." 53 02:48.830 --> 02:49.220 Right. 54 02:49.220 --> 02:51.560 And then finally, we just need a submit button. 55 02:51.560 --> 02:54.980 So let's have another paragraph, [with] input of type submit. 56 02:54.980 --> 02:56.960 This is another type, right? 57 02:57.320 --> 02:59.480 And we haven't spoken about it yet in detail. 58 02:59.480 --> 03:03.560 So for now, just just take it on as face value. 59 03:03.560 --> 03:04.310 So there we go. 60 03:04.310 --> 03:05.030 Let's save this. 61 03:05.030 --> 03:08.150 Go to our browser and there we go. 62 03:08.180 --> 03:13.010 Okay, we've got a Username, Password and Send. But now, let's type username of Wally. 63 03:13.940 --> 03:15.380 Choose a strong password. 64 03:15.380 --> 03:16.490 Let me choose a strong password. 65 03:16.490 --> 03:17.990 You'll never, never guess it. 66 03:23.100 --> 03:23.430 Okay. 67 03:23.430 --> 03:24.040 There we go. 68 03:24.060 --> 03:25.110 Now I'm going to submit it. 69 03:25.110 --> 03:26.970 And you're never going to guess my password. 70 03:27.120 --> 03:28.380 What 😱? 71 03:28.410 --> 03:29.050 (sound: uh oh) 72 03:29.070 --> 03:30.560 Can you see the GET request? 73 03:30.570 --> 03:31.830 Can you see the URL? 74 03:31.860 --> 03:33.630 "thisIsACoolCourse". 75 03:33.630 --> 03:35.010 That was my password. 76 03:35.400 --> 03:36.090 No ways. 77 03:36.120 --> 03:37.830 Now I'm really, really exposed. 78 03:37.830 --> 03:41.210 So can you see that the password doesn't give us much security at all? 79 03:41.220 --> 03:43.670 It's just a UI feature. 80 03:43.680 --> 03:44.610 So there you go. 81 03:44.640 --> 03:46.080 Told you it's not that great, right? 82 03:46.080 --> 03:47.990 And it doesn't help with security. 83 03:48.000 --> 03:51.990 You can see the actual password in the URL bar itself. 84 03:51.990 --> 03:55.260 So then let's move on to example number two. 85 03:55.260 --> 04:04.530 And in example number two, I want to look at two HTML5 attributes, the "pattern" and "required" attributes. 86 04:04.560 --> 04:10.050 They normally work very well together and their importance becomes evident when the author needs to 87 04:10.080 --> 04:15.630 set rules about the format and type of data that can be inserted into an input control. 88 04:15.630 --> 04:16.920 So what are these two types? 89 04:16.920 --> 04:18.630 What does pattern and required mean? 90 04:19.940 --> 04:26.450 The pattern attribute allows us to use regular expressions to define what the user is supposed to enter 91 04:26.450 --> 04:27.470 into the field. 92 04:27.470 --> 04:33.110 And when we use the pattern attribute, we usually also use another one called Title. 93 04:33.140 --> 04:39.470 The title attribute takes particular relevance when we use this, because its responsibility is to provide 94 04:39.470 --> 04:42.610 an explanation about the rules that apply on the field. 95 04:42.620 --> 04:48.560 In other words, the browser is going to use the information in the title attribute to compose the error 96 04:48.560 --> 04:52.940 message shown to a user after an unsuccessful submission. 97 04:52.970 --> 04:55.780 The required attribute is pretty straightforward, pretty intuitive. 98 04:55.790 --> 04:59.570 It just disallows users to leave the field empty. 99 04:59.840 --> 05:07.580 So by using both attributes together means that the form submission will be prevented until their requirements 100 05:07.580 --> 05:11.630 have been met, or the requirements of that form control has been met. 101 05:11.810 --> 05:13.310 Super, super useful. 102 05:13.340 --> 05:15.690 But I know, words are just words. 103 05:15.710 --> 05:20.250 Let me hop over to the text editor and show you an example of using both of these.