Menu
Click and hold the left mouse button, and drag the plus sign over the cells you want to fill. And the series is filled in for you automatically using the AutoFill feature. Or, say you have information in Excel that isn't formatted the way you need it to be, such as this list of names.
UPDATE for 2017: Looks like the answer from Katie has more up-to-date information than mine. Future readers: give your up-votes to her answer.
This is a great question and one for which documentation is surprisingly hard to come by. Actually, in many cases you will find that the Chrome Autofill functionality "just works." For example, the following snippet of html produces a form which, at least for me (Chrome v. 18), is automatically filled after clicking in the first field:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>
However, this answer is unsatisfactory, as it leaves the solution in the realm of "magic." Digging deeper I learned that Chrome (and other autofill-enabled browsers) primarily rely on contextual clues to determine the type of data that should be filled into form elements. Examples of such contextual clues include the name of an input element, the text surrounding the element, and any placeholder text.
Recently, however, the Chrome team acknowledged that this is an unsatisfactory solution, and they have begun pressing for standardization in this matter. A very informative post from the Google Webmasters group recently discussed this issue, explaining:
Unfortunately, up to now it has been difficult for webmasters to ensure that Chrome and other form-filling providers can parse their form correctly. Some standards exist; but they put onerous burdens on the implementation of the website, so they’re not used much in practice.
(The "standards" they refer to is a more recent verion of the spec mentioned in Avalanchis' answer above.)
The Google post goes on to describe their proposed solution (which is met by significant criticism in the comments of the post). They propose the use of a new attribute for this purpose:
Just add an attribute to the input element, for example an email address field might look like:
<input type=”text” name=”field1” x-autocompletetype=”email” />
...where the x- stands for "experimental" and will be removed if & when this becomes a standard. Read the post for more details, or if you want to dig deeper, you will find a more complete explanation of the proposal on the whatwg wiki.
UPDATE:
As pointed out in these insightful answers, all the regular expressions Chrome uses to identify/recognize common fields can be found in autofill_regex_constants.cc.utf8. So to answer the original question, just make sure the names for your html fields get matched by these expressions. Some examples include:
"first.*name|initials|fname|first$"
"last.*name|lname|surname|last$|secondname|family.*name"
"e.?mail"
"address.*line|address1|addr1|street"
"zip|postal|post.*code|pcode|^1z$"
This question is pretty old but I have an updated answer!
Here's a link to the WHATWG documentation for enabling autocomplete.
Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!
Here are some key points on how to enable autocomplete:
<label> for all your <input> fieldsautocomplete attribute to your <input> tags and fill it in using this guide.name and autocomplete attributes correctly for all <input> tagsExample:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
<input> tagsIn order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.
Here's how to name your inputs:
name: name fname mname lname
autocomplete:
name (for full name)given-name (for first name)additional-name (for middle name)family-name (for last name)<input type="text" name="fname" autocomplete="given-name">
name: email
autocomplete: email
<input type="text" name="email" autocomplete="email">
name: address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (state or province)address-level2 (city)postal-code (zip code)countryname: phone mobile country-code area-code exchange suffix ext
autocomplete: tel
name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
autocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename: username
autocomplete: username
name: password
autocomplete:
current-password (for sign-in forms)new-password (for sign-up and password-change forms)From my testing, the x-autocomplete tag does nothing. Instead use autocomplete tags on your input tags, and set their values according to the HTML spec here http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field .
Example:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>
The parent form tag needs autocomplete="on" and method="POST".
You need to name the elements appropriately so that the browser will autofill them.
Here's the IETF spec for this:
http://www.ietf.org/rfc/rfc3106.txt1
I just played arround with the spec and got a nice working example - including a few more fields.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>
It contains 2 separate address areas and also differen address-types. Tested it also on iOS 8.1.0 and it seems that it always fill all fields at once, while desktop chrome autofill address by address.
Looks like we'll get more control about this autofill feature, there is a new experimental API coming to Chrome Canary, which can be used to access the data after asking the user for it:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
new infos by google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With