【Labs】入力しやすい入力フォーム

こんにちは（・∀・）

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

autocomplete属性

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

ここで抜き出した値以外については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属性を省略した場合、オートコンプリート機能は有効になります。

入力しやすい入力フォームということで以前から思っていたことなのですが、よく名前や電話番号、郵便番号などを分けて入力させるように作られている入力フォームがありますが、入力する側にとってはとても手間だと思うのですがどう思いますか。ただでさえ入力フォームは敬遠しがちなのに、入力フィールドが多いとさらに入力する気が起きなくなると思います。情報を入力して送ってもらいたい側としては、少しでも入力を簡単に、というような気づかいをする必要があると思います。

以上でautocomplete属性についての解説は終了です。適切に値の設定がしてあるとautocomplete属性は使う側にとってはとても便利な機能ですね。

関連リンク

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