WEBVTT 0 00:01.280 --> 00:07.370 Are you ready, my dear students, to really talk about a cool attribute called "autocomplete"? 1 00:07.700 --> 00:11.190 Yep, it's just another <form> attribute. 2 00:11.540 --> 00:13.030 We've done a ton of these, haven't we? 3 00:13.040 --> 00:14.690 We haven't even gone on to form widgets. 4 00:14.720 --> 00:17.810 Sometimes I feel, man, I must be overloading you with so much information. 5 00:18.290 --> 00:22.880 But trust me, if you have a solid foundation, it's only going to make you a better developer. 6 00:22.970 --> 00:23.690 So here we go. 7 00:23.690 --> 00:28.290 We're going to be talking about the autocomplete attribute on a form. 8 00:28.730 --> 00:29.480 Let's get started. 9 00:31.190 --> 00:32.990 There it is, form action="/process_url/"... 10 00:34.070 --> 00:38.760 and there is the attribute, autocomplete, I've just set here to "off". But that's how it looks. 11 00:39.170 --> 00:43.130 By default, it's on, which is why a lot of developers don't even know about it. 12 00:43.340 --> 00:49.310 Point number one, by default, browsers remember information that the user submits through the input 13 00:49.310 --> 00:51.360 fields within a form. 14 00:51.650 --> 00:55.210 And this enables the browser to offer autocompletion. 15 00:55.610 --> 00:59.450 That is, it suggests possible completion for fields that the user has started... 16 00:59.510 --> 01:04.510 typing in, or autofill, that is, pre-populate certain fields upon page load. 17 01:04.850 --> 01:09.320 And as I mentioned, these features are usually enabled by default. 18 01:09.620 --> 01:15.800 But they can be a privacy concern for some people, so browsers can let users disable them. 19 01:16.040 --> 01:21.600 However, just bear in mind that some data submitted in forms either are not useful in the future... 20 01:21.770 --> 01:28.310 for example, a one time pin, or they may contain sensitive information, for example, a unique government... 21 01:28.310 --> 01:30.730 identifier or credit card security code. 22 01:31.310 --> 01:37.760 So as a website author, as a developer, you might prefer that the browser not remember values for... 23 01:37.760 --> 01:42.490 such fields, even if the browser's autocomplete feature is enabled. 24 01:42.800 --> 01:45.830 And what's really cool is we've got a lot of flexibility as developers. 25 01:47.150 --> 01:54.140 One of these is that we're able to define which inputs should have autocomplete features on, and which 26 01:54.140 --> 01:55.730 should have those off. 27 01:56.030 --> 02:00.860 And there are only two values that the autocomplete attribute can have - on and off. 🎚 28 02:01.640 --> 02:06.350 And the default value is on, as I mentioned previously, and it just basically tells the browser that 29 02:06.350 --> 02:10.400 it can automatically complete values that the user has entered before. 30 02:11.360 --> 02:15.830 And it's not a guarantee that it will work, right, if it's the first time a user is on that particular 31 02:15.830 --> 02:17.110 page, it may not work. 32 02:17.360 --> 02:21.770 It's just telling the browser to attempt auto-completion based on user history. 33 02:22.010 --> 02:26.750 And you and I know this is useful for personal details like name and email address, things that the 34 02:26.750 --> 02:31.470 user's likely to have typed into similar input fields on other websites. "Okay Clyde... 35 02:31.570 --> 02:33.730 but how does the browser actually do this? 36 02:33.740 --> 02:35.710 How does it get all those values? 37 02:35.720 --> 02:39.260 How does it save all the values that you type into different inputs?" 38 02:39.290 --> 02:46.010 Well, basically, it does this by retrieving data from a database containing previous inputs. Anyway, 39 02:46.010 --> 02:47.430 that's on - pretty straightforward. 40 02:47.450 --> 02:53.360 Then we've got the value of "off". And setting autocomplete off on fields has two effects. 41 02:54.080 --> 03:00.590 First effect, it tells the browser not to save data inputted by the user for later auto-completion 42 03:00.770 --> 03:01.970 on similar forms. 43 03:02.270 --> 03:06.200 Makes sense. It's just telling the browser, not to save data. 44 03:06.530 --> 03:12.650 And two, it stops the browser from caching form data in the session history. 45 03:13.070 --> 03:16.760 Why would the browser want to store information in session history? 46 03:17.030 --> 03:22.280 Well, let's just say the user has filled in a form, and they've clicked on some button and now they want... 47 03:22.280 --> 03:24.320 to go back to the form, and they click on "back". 48 03:24.800 --> 03:32.660 Well, if its in cache, then when the user goes back, the browser can fill in all the original inputs 49 03:32.660 --> 03:33.500 that the user typed. 50 03:33.780 --> 03:38.560 Okay, that's just why, or one example why, it's useful. Annnnd here's a handy tip. 51 03:38.870 --> 03:45.890 It is possible to have autocomplete on for the entire form, but off for specific input fields or vice 52 03:45.890 --> 03:46.300 versa. 53 03:47.490 --> 03:47.910 Got it. 54 03:48.360 --> 03:51.780 That's good, but you may have a few more questions. 55 03:52.970 --> 03:55.200 Firstly, where is this attribute from? 56 03:55.730 --> 04:02.000 Well, the autocomplete attribute was introduced as an unofficial, okay, not "official", an unofficial HTML feature... 57 04:02.000 --> 04:04.200 in Microsoft's Internet Explorer. 58 04:04.340 --> 04:06.950 So it wasn't really standardized until much later. 59 04:07.370 --> 04:13.160 But now with HTML5, the autocomplete attribute is an official part of the specification. 60 04:13.820 --> 04:17.010 So there's basically very, very wide support for it today. 61 04:17.360 --> 04:23.270 The autocomplete attribute was adopted by a number of other browsers after Internet Explorer, so there's 62 04:23.270 --> 04:25.800 been wide support for it for a very long time. 63 04:26.150 --> 04:29.720 It wasn't standardized, but it now is. That's question number one. 64 04:30.080 --> 04:33.500 Question number two, how does the browser know what to show? 65 04:34.490 --> 04:41.000 Well, the source of the suggested values is generally up to the browser, but typically it comes from 66 04:41.000 --> 04:43.760 past values entered into by the user. 67 04:44.120 --> 04:49.070 But what's interesting is that they may also come from pre-configured values. 68 04:49.070 --> 04:53.720 For instance, the browser might let the user save their name, address, phone number and email addresses 69 04:54.050 --> 04:55.880 for autocomplete purposes. 70 04:56.800 --> 05:05.290 The final question is, is the name attribute on the different form widgets, you know like on input elements... 71 05:06.070 --> 05:08.410 is that name attribute very important? 72 05:08.710 --> 05:13.010 Well, yes, it is, because otherwise, how does a browser know what the input relates to? 73 05:13.240 --> 05:19.060 In other words, the browser's use the name attribute in order to figure out what type of information 74 05:19.060 --> 05:20.950 an input field is asking for. 75 05:21.340 --> 05:26.800 And this just means we should use standard meaningful values for names. 76 05:27.050 --> 05:32.230 If you're asking a user for an address, use names like address-1, and city, province, last_name, 77 05:32.230 --> 05:38.680 first_name, etc etc. Use names that are meaningful. It's not only for your coding benefit, other people 78 05:38.680 --> 05:39.370 reading your code, 79 05:39.790 --> 05:41.280 it's also for information like this... 80 05:41.350 --> 05:46.230 so the browser can actually understand what it is you are asking for, and auto populate when necessary. 81 05:47.260 --> 05:49.260 I bet you didn't know that, did you? That it... 82 05:49.270 --> 05:55.100 has wide-reaching effects that "name" that you choose on your input widgets. 83 05:55.720 --> 05:56.630 Interesting stuff. 🤔 84 05:57.400 --> 05:58.390 OK, let's move on. 85 05:58.390 --> 05:58.920 Let's move on. 86 05:59.440 --> 06:00.640 You might be getting a bit worried. 87 06:00.910 --> 06:02.920 What about security risks? 88 06:04.660 --> 06:07.320 Well, that is a really valid concern. 89 06:07.550 --> 06:14.240 I mean, you know, I don't want too much of my information being stored by Google and by other browsers. 90 06:14.810 --> 06:16.070 So what can I say about security? 91 06:16.100 --> 06:21.230 Well, modern browsers implement what's known as integrated password management. 92 06:21.680 --> 06:28.010 And basically what this means is that when you and I type a username and password, the browser has 93 06:28.010 --> 06:29.660 to offer us to remember it. 94 06:29.810 --> 06:31.480 And when we click, yes, only if we click... 95 06:31.490 --> 06:37.730 yes, when we visit that site again, the browser will then autofill the login fields with the stored values. 96 06:37.880 --> 06:45.020 And this management of passwords and user input, is generally seen as a net gain for security. 97 06:45.290 --> 06:51.410 Since users don't have to remember passwords that the browser stores for them, they're able to choose stronger 98 06:51.410 --> 06:53.300 passwords than they would otherwise. 99 06:53.360 --> 06:57.620 That's one argument for this whole system. Is that kind of making sense? 100 06:57.920 --> 07:00.260 But now, this is what's interesting. For this reason... 101 07:00.560 --> 07:04.380 right, because we can now choose stronger passwords and just rely on the browser to remember it... 102 07:04.380 --> 07:10.660 many modern browsers today do not support autocomplete=off for login fields. 103 07:11.270 --> 07:13.310 Whaaat? 😱 (sound: what did you say?) 104 07:13.520 --> 07:14.210 Isn't that weird? 105 07:14.690 --> 07:16.340 Does this make our code redundant? 106 07:16.730 --> 07:17.660 No, of course not. 107 07:17.670 --> 07:23.810 It just means in some instances, even if it's off, if a form includes a username and password input field... 108 07:23.810 --> 07:29.660 the browser will still offer the user to remember these values. 109 07:29.960 --> 07:35.390 So in this instance, it will ignore your autocomplete=off. It's still going to ask the user what they... 110 07:35.390 --> 07:35.810 want. 111 07:36.170 --> 07:41.630 And if the user agrees, the browser will then autofill those fields the next time the user visits the 112 07:41.630 --> 07:42.110 page... 113 07:42.500 --> 07:44.300 even if your autocomplete is off. 114 07:44.510 --> 07:51.590 I know, it's kind of weird. I guess, what are my views on it? Well, I typically don't like not being in complete 115 07:51.590 --> 07:55.220 control, so I typically don't like it, but it is what it is and we have to live with it. 116 07:55.470 --> 08:01.010 And there you have it, my students, that is the autocomplete attribute. I'm having so much fun in this 117 08:01.010 --> 08:01.370 course. 118 08:01.380 --> 08:02.240 I hope you are too. 🤞 119 08:02.780 --> 08:04.030 I really, really love it. 120 08:04.040 --> 08:09.920 And please don't forget to give me a rating ⭐⭐⭐⭐⭐, especially if you love the course, please leave a good review. It helps... 121 08:09.920 --> 08:10.700 me so much. 122 08:11.510 --> 08:12.250 But you know what? 123 08:12.260 --> 08:15.890 I think it's also now time to, you know, we've done a bit of theory... 124 08:15.890 --> 08:17.740 let's jump over to the console. 125 08:17.750 --> 08:23.780 Let's do a quick, easy form with this autocomplete attribute, and then we can see it in action. 126 08:24.110 --> 08:26.510 Grab a coffee ☕, grab a Red Bull, whatever motivates you... 127 08:26.660 --> 08:28.200 and I'll see you, in the next lecture.