multiple_sections/section_heuristics.html (64 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Autofill Demo Page</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="../base.js"></script>
</head>
<body>
<h1>Form Autofill - Section Test Page [Heuristics]</h1>
<form>
<div class="section section-a">
<label>Name: <input autocomplete="name"></label><br/>
<label>Organization: <input autocomplete="organization"></label><br/>
</div>
<div class="section section-a">
<label>Street Address: <input autocomplete="street-address"></label><br/>
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
<label>Country: <input autocomplete="country"></label><br/>
</div>
<div class="section section-b">
<label>Street Address: <input autocomplete="street-address"></label><br/>
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
<label>Country: <input autocomplete="country"></label><br/>
</div>
<div class="section section-c">
<label>Street Address: <input autocomplete="street-address"></label><br/>
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
<label>Country: <input autocomplete="country"></label><br/>
</div>
<div class="section section-c">
<label>Telephone: <input autocomplete="work tel"></label><br/>
<label>Email: <input autocomplete="work email"></label><br/>
</div>
<div class="section section-d">
<p>This section contains the duplicated fields, so the two fields can not be filled even they have the different `contactType`.</p>
<label>Telephone: <input autocomplete="home tel"></label><br/>
<label>Email: <input autocomplete="home email"></label><br/>
</div>
<div class="section section-e">
<label>Card Holder Name: <input autocomplete="cc-name"></label><br/>
<label>Card Number: <input autocomplete="cc-number"></label><br/>
<label>Exp Month: <input autocomplete="cc-exp-month"></label><br/>
<label>Exp Year: <input autocomplete="cc-exp-year"></label><br/>
</div>
<div class="section section-f">
<label>Card Holder Name: <input autocomplete="cc-name"></label><br/>
<label>Card Number: <input autocomplete="cc-number"></label><br/>
<label>Exp Month: <input autocomplete="cc-exp-month"></label><br/>
<label>Exp Year: <input autocomplete="cc-exp-year"></label><br/>
</div>
<div>
<input type="submit" value="Submit">
<button type="reset">Reset</button>
</div>
</form>
</body>
</html>