As it is Thanksgiving week here in America and my brain has already kinda checked out, I decided to take a quick look at a particular aspect of the input tag - autocomplete.

As you may, or may not know, most modern web browsers will make an attempt to remember form fields of a "similar nature" such that entering your name on one site means that when you go to type in your name on another form it will offer to automatically complete the field for you.

If you don't like this, or perhaps you're using your own autocomplete, you can add autocomplete="off" to either the form tag or to an individual input field. The default behavior (most of the time) is to default to on.

Simple enough. But if you read the spec, you discovered that the autocomplete attribute can also provide a "hint" about what field it is. So for example, maybe you've named your form field f_name, or firName, or usersGiveName, each of which is meant to represent what we commonly consider a first name, you can actually tell the browser to consider each of those variations to be the first name.

The spec includes support for a large number of "hints", including:

• name (full name)
• given-name (first name)
• family-name (last name)
• honorific-suffix (Mr, Dr, etc)
• new-password (oh my god don't use this, why would you want to recommend re-using the same password???)
• address-line1(-3), address-level(-4) (address-level2 is city, of course)
• country
• country-name (um)

And so on. If you read the spec closely, it is also supposed to support "grouping", such that I can say this is my street-address for shipping versus billing. So with that in mind, I decided to do a bit of digging. I was curious about a few things:

• When would the browser prompt me to fill in one field versus an entire form?
• Can I use crazy field names if I use the right autocomplete value as a hint?
• What happens if I mix in a datalist in just to be crazy?

So first - a simple form.

simple form:<br/>
<form>
	first name: <input type="text" name="firstname"><br/>	
	last name: <input type="text" name="lastname"><br/>	
	<input type="submit">
</form>

Nothing special about that. On Chrome, once I enter a value once, I will get prompted to autofill the field, but only one field at a time. It didn't remember that last time I did "Raymond" that "Camden" was an associated value.

Note the lovely pee-yellow CSS Chrome uses to signify an autocomplete field. I honestly don't know why it does this when it requires user action in order to fill. Maybe the thinking is that I'll forget where the name came from? (FYI, apparently you can tweak it: http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete)

Firefox has the same behavior (without the CSS pee) as does MS Edge (but with pee).

Safari lets you use either other forms or your local contact info for form data. You can actually use both if you want:

However, Safari will not begin suggesting a value until you type one letter. To me, that's a mistake, because at the point I'm typing, I can finish typing my name in less time it takes for Safari to draw a list of names. The UI for filling from a contact card is different from 'regular' autofill:

Ok, how about some more tests. I was first curious about why/when a form would completely fill out. I tried this test:

autocomplete on, with autocomplete hints<br/>
<form>
	first name: <input type="text" name="firstname" autocomplete="given-name"><br/>	
	last name: <input type="text" name="lastname" autocomplete="family-name"><br/>	
	<input type="submit">
</form>
	
<p>

autocomplete hints<br/>
<form>
	first name: <input type="text" name="firstname" autocomplete="given-name"><br/>	
	last name: <input type="text" name="lastname" autocomplete="family-name"><br/>	
	street: <input type="text" name="street" autocomplete="street-address"><br/>
	<input type="submit">
</form>

In Chrome, while I could autocomplete fields in the first form, only the second form let me completely fill the entire form. I'm guessing it is the number of fields that matter here. Again, the UI is slightly different in each case. First, Chrome offering to fill just one field:

Versus the entire form:

To be honest, the second screen shot doesn't really imply that it will fill the entire form, but it is certainly different. Maybe the fact that the street address there is supposed to be the clue.

Firefox does not fill out the entire form, but both Safari and Edge filled out the entire form (the one with three fields).

Ok, so what about the autocomplete=X feature? In theory, it should let me provide a clue such that my form field names won't matter. Here was my first test.

autocomplete using hints but weird names
<form autocomplete="on">
	first name: <input type="text" name="firstname2a" autocomplete="given-name"><br/>	
	last name: <input type="text" name="lastname2a" autocomplete="family-name"><br/>	
	<input type="submit">
</form>

In theory, this should work, but it completely failed to note that I've given both names previously. However, all the browsers remembered previous entries when viewing the form again. Then I added another field:

autocomplete using hints but weird names
<form autocomplete="on">
	first name: <input type="text" name="firstname2poo" autocomplete="given-name"><br/>	
	last name: <input type="text" name="lastname2poo" autocomplete="family-name"><br/>	
	street: <input type="text" name="NOTAstreetpoo" autocomplete="street-address"><br/>
	<input type="submit">
</form>

And oddly - Chrome finally got it working right:

No other browser changed though in terms of its behavior.

Finally - I thought - why not see what happens when you add in a datalist:

autocomplete using hints but weird names and datalist
<form autocomplete="on">
	first name: <input type="text" name="firstname2" autocomplete="given-name" list="names"><br/>	
	<datalist id="names">
		<option>Ray</option>
		<option>Bob</option>
		<option>Elric</option>
	</datalist>
	last name: <input type="text" name="lastname2" autocomplete="family-name"><br/>	
	street: <input type="text" name="NOTAstreet" autocomplete="street-address"><br/>
	<input type="submit">
</form>

I love datalist - and support is good if you ignore Safari (sigh). Firefox and Chrome will render both past entries and autocomplete values at once, which is kinda nice:

Unfortunately, while Edge supports datalist, it doesn't handle rendering autocomplete and the list at the same time - you can see them overlapping here:

It gets weird if you add more values and the field is towards the bottom of the screen:

But give it enough space at the bottom and it messes up again:

I need to remember to file a bug report on this, of course, since I can't expect it to be fixed if I don't bother to report it.