Are you ready, my dear students, to really talk about a cool attribute called "autocomplete"?
Yep, it's just another <form> attribute.
We've done a ton of these, haven't we?
We haven't even gone on to form widgets.
Sometimes I feel, man, I must be overloading you with so much information.
But trust me, if you have a solid foundation, it's only going to make you a better developer.
So here we go.
We're going to be talking about the autocomplete attribute on a form.
Let's get started.
There it is, form action="/process_url/"...
and there is the attribute, autocomplete, I've just set here to "off". But that's how it looks.
By default, it's on, which is why a lot of developers don't even know about it.
Point number one, by default, browsers remember information that the user submits through the input
fields within a form.
And this enables the browser to offer autocompletion.
That is, it suggests possible completion for fields that the user has started...
typing in, or autofill, that is, pre-populate certain fields upon page load.
And as I mentioned, these features are usually enabled by default.
But they can be a privacy concern for some people, so browsers can let users disable them.
However, just bear in mind that some data submitted in forms either are not useful in the future...
for example, a one time pin, or they may contain sensitive information, for example, a unique government...
identifier or credit card security code.
So as a website author, as a developer, you might prefer that the browser not remember values for...
such fields, even if the browser's autocomplete feature is enabled.
And what's really cool is we've got a lot of flexibility as developers.
One of these is that we're able to define which inputs should have autocomplete features on, and which
should have those off.
And there are only two values that the autocomplete attribute can have - on and off. 🎚
And the default value is on, as I mentioned previously, and it just basically tells the browser that
it can automatically complete values that the user has entered before.
And it's not a guarantee that it will work, right, if it's the first time a user is on that particular
page, it may not work.
It's just telling the browser to attempt auto-completion based on user history.
And you and I know this is useful for personal details like name and email address, things that the
user's likely to have typed into similar input fields on other websites. "Okay Clyde...
but how does the browser actually do this?
How does it get all those values?
How does it save all the values that you type into different inputs?"
Well, basically, it does this by retrieving data from a database containing previous inputs. Anyway,
that's on - pretty straightforward.
Then we've got the value of "off". And setting autocomplete off on fields has two effects.
First effect, it tells the browser not to save data inputted by the user for later auto-completion
on similar forms.
Makes sense. It's just telling the browser, not to save data.
And two, it stops the browser from caching form data in the session history.
Why would the browser want to store information in session history?
Well, let's just say the user has filled in a form, and they've clicked on some button and now they want...
to go back to the form, and they click on "back".
Well, if its in cache, then when the user goes back, the browser can fill in all the original inputs
that the user typed.
Okay, that's just why, or one example why, it's useful. Annnnd here's a handy tip.
It is possible to have autocomplete on for the entire form, but off for specific input fields or vice
versa.
Got it.
That's good, but you may have a few more questions.
Firstly, where is this attribute from?
Well, the autocomplete attribute was introduced as an unofficial, okay, not "official", an unofficial HTML feature...
in Microsoft's Internet Explorer.
So it wasn't really standardized until much later.
But now with HTML5, the autocomplete attribute is an official part of the specification.
So there's basically very, very wide support for it today.
The autocomplete attribute was adopted by a number of other browsers after Internet Explorer, so there's
been wide support for it for a very long time.
It wasn't standardized, but it now is. That's question number one.
Question number two, how does the browser know what to show?
Well, the source of the suggested values is generally up to the browser, but typically it comes from
past values entered into by the user.
But what's interesting is that they may also come from pre-configured values.
For instance, the browser might let the user save their name, address, phone number and email addresses
for autocomplete purposes.
The final question is, is the name attribute on the different form widgets, you know like on input elements...
is that name attribute very important?
Well, yes, it is, because otherwise, how does a browser know what the input relates to?
In other words, the browser's use the name attribute in order to figure out what type of information
an input field is asking for.
And this just means we should use standard meaningful values for names.
If you're asking a user for an address, use names like address-1, and city, province, last_name,
first_name, etc etc. Use names that are meaningful. It's not only for your coding benefit, other people
reading your code,
it's also for information like this...
so the browser can actually understand what it is you are asking for, and auto populate when necessary.
I bet you didn't know that, did you? That it...
has wide-reaching effects that "name" that you choose on your input widgets.
Interesting stuff. 🤔
OK, let's move on.
Let's move on.
You might be getting a bit worried.
What about security risks?
Well, that is a really valid concern.
I mean, you know, I don't want too much of my information being stored by Google and by other browsers.
So what can I say about security?
Well, modern browsers implement what's known as integrated password management.
And basically what this means is that when you and I type a username and password, the browser has
to offer us to remember it.
And when we click, yes, only if we click...
yes, when we visit that site again, the browser will then autofill the login fields with the stored values.
And this management of passwords and user input, is generally seen as a net gain for security.
Since users don't have to remember passwords that the browser stores for them, they're able to choose stronger
passwords than they would otherwise.
That's one argument for this whole system. Is that kind of making sense?
But now, this is what's interesting. For this reason...
right, because we can now choose stronger passwords and just rely on the browser to remember it...
many modern browsers today do not support autocomplete=off for login fields.
Whaaat? 😱 (sound: what did you say?)
Isn't that weird?
Does this make our code redundant?
No, of course not.
It just means in some instances, even if it's off, if a form includes a username and password input field...
the browser will still offer the user to remember these values.
So in this instance, it will ignore your autocomplete=off. It's still going to ask the user what they...
want.
And if the user agrees, the browser will then autofill those fields the next time the user visits the
page...
even if your autocomplete is off.
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
control, so I typically don't like it, but it is what it is and we have to live with it.
And there you have it, my students, that is the autocomplete attribute. I'm having so much fun in this
course.
I hope you are too. 🤞
I really, really love it.
And please don't forget to give me a rating ⭐⭐⭐⭐⭐, especially if you love the course, please leave a good review. It helps...
me so much.
But you know what?
I think it's also now time to, you know, we've done a bit of theory...
let's jump over to the console.
Let's do a quick, easy form with this autocomplete attribute, and then we can see it in action.
Grab a coffee ☕, grab a Red Bull, whatever motivates you...
and I'll see you, in the next lecture.