【Labs】入力しやすい入力フォーム
こんにちは（・∀・）
前回のラジオボタンやチェックボックスの解説に続いて今回もフォーム系についての解説になります。今回はinput要素のautocomplete属性についてです。
autocomplete属性
input要素にautocomplete属性を設定するとフォームへの入力内容の自動補完が有効になります。「on」「off」以外にもWHATWGが規格しているそれ以外の値をまとめました。
| 値 | 解説 |
|---|---|
| name | 姓名 |
| family-name | 姓 |
| given-name | 名 |
| メールアドレス | |
| url | ホームページ |
| tel | 電話番号 |
| postal-code | 郵便番号 |
| address-level1 | 都道府県 |
| address-level2 | 市区町村 |
| address-line1 | 番地・マンション名(1行目) |
| address-line2 | 番地・マンション名(2行目) |
| organization | 会社名 |
| on | オートコンプリートを有効にする(初期値) |
| off | オートコンプリートを無効にする |
ここで抜き出した値以外についてはWHATWG Autofillでご確認ください。
ブラウザはname属性の値で自動入力する内容を判断しているようなので、適切なname属性が設定されていれば、autocomplete属性の値「on」だけで、良いような気がするのですがどうなのでしょう。
HTML
<p>名前:<input type="text" name="name" autocomplete="off"> autocomplete="off"</p>
<p>MAIL:<input type="text" name="email" autocomplete="off"> autocomplete="off"</p>
<p>電話番号:<input type="text" name="tel" autocomplete="off"> autocomplete="off"</p>
<p>名前:<input type="text" name="name" autocomplete="on"> autocomplete="on"</p>
<p>MAIL:<input type="text" name="email" autocomplete="on"> autocomplete="on"</p>
<p>電話番号:<input type="text" name="tel" autocomplete="on"> autocomplete="on"</p>
<p>名前:<input type="text" name="name" autocomplete="name"> autocomplete="name"</p>
<p>MAIL:<input type="text" name="email" autocomplete="email"> autocomplete="email"</p>
<p>電話番号:<input type="text" name="tel" autocomplete="tel"> autocomplete="tel"</p>
Result
| autocomplete="off" | |
|---|---|
| 名前: | |
| MAIL: | |
| 電話番号: | |
| autocomplete="on" | |
| 名前: | |
| MAIL: | |
| 電話番号: | |
| autocomplete="name" autocomplete="email" autocomplete="tel" | |
| 名前: | |
| MAIL: | |
| 電話番号: | |
| 姓: | |
| 名: | |
autocomplete属性を省略した場合、オートコンプリート機能は有効になります。
入力しやすい入力フォームということで以前から思っていたことなのですが、よく名前や電話番号、郵便番号などを分けて入力させるように作られている入力フォームがありますが、入力する側にとってはとても手間だと思うのですがどう思いますか。ただでさえ入力フォームは敬遠しがちなのに、入力フィールドが多いとさらに入力する気が起きなくなると思います。情報を入力して送ってもらいたい側としては、少しでも入力を簡単に、というような気づかいをする必要があると思います。
以上でautocomplete属性についての解説は終了です。適切に値の設定がしてあるとautocomplete属性は使う側にとってはとても便利な機能ですね。