HTML5ではこのテキスト入力欄に様々な値を自動入力出来るようになりました。この自動入力は要素内に指定されたname属性を見ることで自動入力する値を決定しています。
自動入力（autocomplete）で作成したテキスト入力欄は、一つ自動入力でテキスト入力すると他の自動入力テキストに対しても自動で入力してくれます。
ECサイトなどでお馴染みのものですよね、webサイトが自動入力に対応してくれていると便利なものです。
今回も一通りのサンプルを作成してみました。コピペして使ってください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample_HTML5</title>
<style>
label {
display: block;
height: 3em;
}
</style>
</head>
<body>
<div class="form_area">
<form action="/" method="post">
<!-- autocompleteはname属性の履歴を見るのでinput要素name属性を必ず指定すること -->
<label>autocomplete-organization<br>
<input type="text" name="organization" autocomplete="organization" autofocus="autofocus">
</label>
<label>autocomplete-email<br>
<input type="text" name="email" autocomplete="email">
</label>
<label>autocomplete-name<br>
<input type="text" name="name" autocomplete="name">
</label>
<label>autocomplete-postal-code<br>
<input type="text" name="postal-code" autocomplete="postal-code">
</label>
<label>autocomplete-address-level1<br>
<input type="text" name="address-level1" autocomplete="address-level1" placeholder="東京都">
</label>
<label>autocomplete-address-level2<br>
<input type="text" name="address-level2" autocomplete="address-level2">
</label>
<label>autocomplete-address-line1<br>
<input type="text" name="address-line1" autocomplete="address-line1">
</label>
<label>autocomplete-address-line2<br>
<input type="text" name="address-line2" autocomplete="address-line2">
</label>
<label>autocomplete-on<br>
<input type="text" name="on" autocomplete="on">
</label>
<label>autocomplete-off<br>
<input type="text" name="off" autocomplete="off">
</label>
<label>submit<br>
<input type="submit" value="送信">
</label>
</form>
</div>
</body>
</html>
