menu
menu

入力しやすい入力フォーム | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook7
  • はてなブックマーク4
  • Google+0
  • Pocket0
  • Twitter0

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

  • 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でご確認ください。

サンプルデモ
autocomplete="off"

名前:

MAIL:

電話番号:

autocomplete="on"

名前:

MAIL:

電話番号:

autocomplete="name" autocomplete="email" autocomplete="tel"

名前:

MAIL:

電話番号:

姓:

名:

 ブラウザは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>

 autocomplete属性を省略した場合、オートコンプリート機能は有効になります。


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


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


関連リンク

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

  • カテゴリー:Labs
  • facebook7
  • はてなブックマーク4
  • Google+0
  • Pocket0
  • Twitter0