menu
menu

キーワード検索

 

最近の投稿

入力しやすい入力フォーム

  • Labs

HTML5

こんにちは(・∀・)

前回のラジオボタンやチェックボックスの解説に続いて今回もフォーム系についての解説になります。今回はinput要素のautocomplete属性についてです。

autocomplete属性

input要素にautocomplete属性を設定するとフォームへの入力内容の自動補完が有効になります。「on」「off」以外にもWHATWGが規格しているそれ以外の値をまとめました。

解説
name姓名
family-name
given-name
emailメールアドレス
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属性は使う側にとってはとても便利な機能ですね。

関連リンク

input要素【HTMLリファレンス】

  • カテゴリー:Labs