簡単EFO!主要ブラウザのフォームの入力支援機能実装状況まとめ

最近では、HTML5とともにフォームを使いやすくするための入力支援機能のいくつかをブラウザが実装しています。

ブラウザの実装機能を利用すれば、javascriptなどで機能を開発する必要がなくなり、HTML側に簡単な記述を加えるだけで一連の機能が実装できるようになり大変便利です。
今回は次々と進化しているブラウザの入力支援機能についてご紹介したいと思います。

※以下、スクリーンショットとして紹介するブラウザのバージョンは、いずれもInternet Exolorer11、Chrome41、FireFox36となります。

プレースホルダー

プレースホルダー(初期文言表示)とは、項目内にあらかじめ表示しておき入力を始めると消える文字列のことで、一般的には入力例などを表示するために使用します。

プレースホルダーに入力例の表示。

プレースホルダーの例。

フォームにプレースホルダーがあると、ユーザーはこれから入力すべき内容と位置を直感的に理解することができます。EFOに欠かせない機能の一つといえるでしょう。

プレースホルダーといえば一般には下記のような動きを行いますが、HTMLタグ側にplaceholder属性という形で文言を記述するだけでこれらを自動的にブラウザ側が実装してくれます。

  1. 薄い色であらかじめ入力例を表示しておく
  2. 入力を開始すると文字列が消える(かつ、入力した内容については文字色が濃くなる)
  3. 入力内容をすべて削除すると再び入力例を表示する
  4. 主要ブラウザでの実装例

    プレースホルダー機能は、すでに多くのブラウザが対応しています。とくに不自由も感じることはありません。
    文字の色などもブラウザ毎に記述方法が異なるもののスタイルシートによって装飾することが可能なようです。

    IE
    place_ie

    Firefox
    place_ff

    Chrome
    place_cr

    必須判定

    フォームタグ内にrequireという属例を追加することにより、ブラウザ側で入力項目を必須と認識し、入力されたかどうかを判定することができます。
    仕様としては以下のようになっています。

    ツールチップの表示

    まずIEとFireFoxでは、必須項目上にマウスをあてると、必須項目である旨を伝えるツールチップを表示します。

    IE

    IE

    FireFox

    FireFox



    未入力アラート

    また、必須項目を入力せずに送信ボタンを押下すると、未入力の必須項目の枠線を赤く(Chromeは青で)表示し、必須を伝える旨の吹き出しが登場します。

    IE

    IE

    Chrome

    Chrome

    Firefox

    Firefox

    加えてFirefoxだけが、必須項目からフォーカスをはずした際に(送信ボタンを押さなくても)赤枠があらわれるようになっていました。ただしこの赤枠は、一旦何かを入力して削除した場合にのみ表示されるようです。

    必須アラートとしてはいまひとつ

    上記のとおりほとんどの未入力時のアラートメッセージは送信ボタンを押下した時点ではじめて表示されるものとなっており、リアルタイム性は低いようです。
    また、表示の方法も、エラーのある内容の一番上しかふきだしを表示しなかったり、ふきだしの位置やデザイン、メッセージのカスタマイズ性などまだ課題は残る印象です。

    入力形式の判定

    必須と同様に、入力形式をマークアップすることで、ブラウザ側でアラートを出すことができます。

    実際に動きを確かめたのはnumber(数字)とemail(メールアドレス)の2種類ですが、必須のときと同様に、送信ボタン押下時に入力形式を正すよう伝えるアラートを表示していました。

    Firefoxのみが必須時と同様に送信ボタン押下前に赤色の枠を付ける形でエラーを表示します。なお、送信ボタン押下時のメッセージは入力形式に最適化されておらず、未入力とみなされているようです。
    IEでは特筆すべき点として、数字入力欄に数字以外の文字列を入力すると自動で入力内容がクリアされるという点がありました。

    IE

    Chrome。送信ボタン押下時

    Chrome。送信ボタン押下時

    FireFox

    Firefoxではメッセージの内容までは最適化されていなかった

    Firefoxではメッセージの内容までは最適化されていなかった

    Chrome

    IEでは、数字以外の入力を自動的にクリアするようになっていた

    IEでは、数字以外の入力を自動的にクリアするようになっていた

    オートフォーカス

    フォームページの読み込みと同時に、フォームの一番最初の項目に自動的にフォーカスをあてる(選択状態にしておく)機能がオートフォーカスです。
    ユーザーがマウスで項目を選択することなく、すぐに入力を開始することができます。

    こちらもフォームにautofocusという属性を加えるだけでOK。
    今回試した3種類のブラウザではいずれもとくに問題なく実装されていました。

    IE

    IE

    Firefox

    Firefox

    Chrome

    Chrome


    オートコンプリート

    ブラウザが過去の入力内容を記憶し自動で補完してくれる機能です。

    ac_cr

    丁度2日前のgoogle公式ブログで、Chromeがautocokplete属性を完全にサポートしている旨が発表されています。
    パスワードマネージャとしての機能は多くのブラウザが備えていますが、googleの発表では名前やメールアドレスなどの定番の入力内容に対するサジェストの表示を扱っています。

    オートコンプリートのデータ値の一覧表。名前やメールアドレス、電話番号などのほかにクレジットカード番号などの項目もある

    オートコンプリートのデータ値の一覧表。名前やメールアドレス、電話番号などのほかにクレジットカード番号などの項目も。住所も番地や郵便番号など細かく区分されている

    過去にautocokplete属性でマークアップされたフォームを送信したことがある場合、他のサイトで入力を行う際もautocokplete属性がマークアップされているかぎりは入力内容を補完してくれるため、たいへん便利な機能ですね。(多くのサイトが実装すればするほどユーザーにとっては便利になります。)

    フォームごとの入力内容の区分け(例えば住所入力欄の区切り方など)、細かく気になる点はありますが、名前やアドレス、電話番号など一部が保管されるだけでもかなり入力の手間が省けることは言うまでもありません。

    まとめ

    いかがだったでしょうか。本日はブラウザのフォームの入力支援機能についてまとめてみました。

    日々進化しているブラウザのおかげで、どんどんフォーム入力のユーザビリティが向上しているのは非常によいことですね。
    ただし現状は、ブラウザによって対応状況や表示方法にかなりばらつきがあるという点は否めません。

    実は今回ご紹介しきれなかったその他の属性値や入力支援機能があるのですが、いずれも一部のブラウザだけが対応しているなど、まだまだ普及は進んでいないのが現状です。

    今後古いバージョンのシェアが下がり、新しい主要ブラウザでこれらがあたりまえに提供されるようになれば、これまでjavascriptやEFOツールを使って実装していた入力支援機能のいくつかについてはより簡単に導入できるようになるのではないでしょうか。

    参考URL
    http://googlewebmastercentral-ja.blogspot.jp/2015/03/helping-users-fill-out-online-forms.html

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です