145 строки
8.1 KiB
HTML
145 строки
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Form Autofill Demo Page</title>
|
|
</head>
|
|
<style>
|
|
.formbox {
|
|
display:inline-flex;
|
|
align-content:flex-start;
|
|
flex-wrap:wrap;
|
|
width:280px;
|
|
height:420px;
|
|
margin:5px 5px 40px;
|
|
border:1px solid #000;
|
|
vertical-align: top;
|
|
padding: 8px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<h1>Form Autofill Demo Page</h1>
|
|
<ul>
|
|
</ul>
|
|
<div>
|
|
<div class="formbox"><form id="form_A">
|
|
<h2>Form A</h2>
|
|
<p><label>organization: <input type="text" id="organization" name="organization" autocomplete="organization" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_B">
|
|
<h2>Form B</h2>
|
|
<p><label>organization: <input type="text" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_C">
|
|
<h2>Form C</h2>
|
|
<p><label>FOO BAR: <input type="text" id="organization" name="tel" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_D">
|
|
<h2>Form D</h2>
|
|
<p><label>FOO BAR: <input type="text" id="organization" name="email" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_E">
|
|
<h2>Form E</h2>
|
|
<p><label>FOO BAR: <input type="text" id="organization" name="first_name" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_F">
|
|
<h2>Form F</h2>
|
|
<p><label>FOO BAR: <input type="text" name="organization" id="tel" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><label>tel: <input type="text" id="tel" name="tel" autocomplete="tel"></label></p>
|
|
<p><label>email: <input type="text" id="email" name="email" autocomplete="email"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
<div class="formbox"><form id="form_G">
|
|
<h2>Form G</h2>
|
|
<p><label>FOO BAR: <input type="text" id="email" autofocus></label></p>
|
|
<p><label>streetAddress: <input type="text" id="street-address" name="street-address" autocomplete="street-address"></label></p>
|
|
<p><label>addressLevel2: <input type="text" id="address-level2" name="address-level2" autocomplete="address-level2"></label></p>
|
|
<p><label>addressLevel1: <input type="text" id="address-level1" name="address-level1" autocomplete="address-level1"></label></p>
|
|
<p><label>postalCode: <input type="text" id="postal-code" name="postal-code" autocomplete="postal-code"></label></p>
|
|
<p><label>country: <input type="text" id="country" name="country" autocomplete="country"></label></p>
|
|
<p><input type="submit"></p>
|
|
<p><button type="reset">Reset</button></p>
|
|
</form></div>
|
|
|
|
|
|
</div>
|
|
<p><button id="btn">Add new input</button></p>
|
|
|
|
<form>
|
|
<p><input type="text" id="username" name="username"></p>
|
|
<p><input type="password" id="password" name="password"></p>
|
|
<p><input type="submit"></p>
|
|
</form>
|
|
|
|
<script>
|
|
var btn = document.getElementById('btn');
|
|
var form = document.getElementById('form');
|
|
var count = 1;
|
|
|
|
btn.onclick = function() {
|
|
var p = document.createElement('p');
|
|
p.innerHTML = '<label>new input ' + (count++) + ': <input type="text"></label>';
|
|
form.appendChild(p);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|