Join Joe Marini for an in-depth discussion in this video Auto-filling previously entered data with the autocomplete attribute, part of HTML5: Web Forms in Depth.
- View Offline
Some browsers provide a way to remember user input for certain form fields so that they can be pre-filled later on, and this is typically called autocomplete. Now the autocomplete attribute lets individual form fields further control this behavior. The autocomplete setting can be either on or off, or it can be in the default state, which means it's not present, and in the default state it defaults to whatever the setting for the parent form is. So users actually have control over this. They can turn autocomplete on or off in most browsers.
So if they have turned it on then the default setting for the parent form is usually on. Now for security reasons some fields like passwords for example are not remembered in pre-filled, and your website might choose to do the same behavior for certain fields. For example, a banking web site might choose not to provide autocomplete remembering for the account number field. That way the account number is not just pre-filled in a clear text form field, so that the user doesn't lose control over their account number. So let's go ahead and take a look at the code to see how this works.
So here we are in the code. I've got my autocomplete_start open from chapter 02 and I've got my Snippets file onto the autocomplete section right here, so let's first look at the code. So here are three text entry fields, right, one, two and three, and what I want to do is control how the autocomplete behavior works. So you can see that right now these are just plain input fields. What I'm going to do is copy these three right here, one, two, three and we're going to paste those in over the old ones.
So you can see that what I've done is add autocomplete attributes to each one these fields. The first one is on and then the other two are off. So I'm going to save and let's go to the browser, so I'm going to bring up my AutoComplete start in the browser. Now most browsers provide a way for the user to control autocomplete. So for example an IE, if you go to Internet Options under the Contents Setting there is a little AutoComplete section here. So if you choose settings you'll see that the AutoComplete is used for certain things and right now for forms it's off.
So if I don't change that and for example I enter my name here and I click Submit, now if I go down my name again, you'll see that I'm not getting any AutoComplete suggestions. So let's go turn that on and I'm going to turn the Content, I am going to turn this on, okay, and I'm going to refresh the page. Now when I enter my name and I click Submit, when I enter my name again you can see that I'm getting this AutoComplete behavior. So I hit the letter J and IE realizes that I've entered something with J before.
So I can go ahead and select that as my name. In this field I can type in HTML5 Forms, and then down here I can type in Web Development and I'll click Submit. Now once again if I go here I'll type J you'll see that I get the autocomplete, but now for the second field because it's off if I type H, you'll see that there is no pre-filling that goes on there. Same as for the last one. If I type in the W I'm not getting the autocomplete behavior. So that's how you use the autocomplete attribute to control whether your form fields are pre-populated with data or not.
- Autofilling previously entered data with autocomplete
- Constraining form field data with a regular expression
- Using text-selection APIs
- Building CSS styling for invalid, valid, and required fields
- Creating a search field
- Including a phone number input field
- Formatting number fields
- Building a date picker
- Creating a list of suggested entries
- Indicating measurements