autocomplete-all.html (63 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Autofill Demo: All supported @autocomplete</title>
<link rel="stylesheet" href="css/base.css"/>
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<h1>Form Autofill Demo: All supported @autocomplete</h1>
<h2>Address form</h2>
<form class="alignedLabels">
<label>given-name: <input autocomplete="given-name" autofocus></label>
<label>additional-name: <input autocomplete="additional-name"></label>
<label>family-name: <input autocomplete="family-name"></label>
<label>name: <input autocomplete="name"></label>
<label>organization: <input autocomplete="organization"></label>
<label>street-address: <input autocomplete="street-address"></label>
<label>address-line1: <input autocomplete="address-line1"></label>
<label>address-line2: <input autocomplete="address-line2"></label>
<label>address-line3: <input autocomplete="address-line3"></label>
<label>address-level3: <input autocomplete="address-level3"></label>
<label>address-level2: <input autocomplete="address-level2"></label>
<label>address-level1: <input autocomplete="address-level1"></label>
<label>postal-code: <input autocomplete="postal-code"></label>
<label>country (abbr.): <input autocomplete="country"></label>
<label>country-name: <input autocomplete="country-name"></label>
<label>email: <input autocomplete="email"></label>
<label>tel: <input autocomplete="tel"></label>
<label>tel-country-code: <input autocomplete="tel-country-code"></label>
<label>tel-national: <input autocomplete="tel-national"></label>
<label>tel-area-code: <input autocomplete="tel-area-code"></label>
<label>tel-local: <input autocomplete="tel-local"></label>
<label>tel-local-prefix: <input autocomplete="tel-local-prefix"></label>
<label>tel-local-suffix: <input autocomplete="tel-local-suffix"></label>
<h3>Credit Card</h3>
<label>cc-name: <input autocomplete="cc-name" autofocus></label>
<label>cc-given-name: <input autocomplete="cc-given-name"></label>
<label>cc-additional-name: <input autocomplete="cc-additional-name"></label>
<label>cc-family-name: <input autocomplete="cc-family-name"></label>
<label>cc-number: <input autocomplete="cc-number"></label>
<label>cc-exp-month: <input autocomplete="cc-exp-month"></label>
<label>cc-exp-year: <input autocomplete="cc-exp-year"></label>
<label>cc-exp: <input autocomplete="cc-exp"></label>
<p>
<input type="submit" value="Submit">
<button type="reset">Reset</button>
</p>
</form>
<h2>Login form</h2>
<form class="alignedLabels">
<label>username: <input autocomplete="username"></label>
<label>current-password: <input type="password" autocomplete="current-password"></label>
<p><input type="submit" value="Login"></p>
</form>
<h2>Registration form</h2>
<form class="alignedLabels">
<label>username: <input autocomplete="username"></label>
<label>new-password: <input type="password" autocomplete="new-password"></label>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>