フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法

Post on:2013年6月19日

sponsorsr

フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。
しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。
参考：The placeholder attribute -W3C

フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。

Making Infield Form Labels Suck Less II

デモ
実装

デモ

まずは、デモから見てください。
アニメーションgifにしてみました。

デモのアニメーション

初期状態では入力欄にラベルが表示され、入力時にはそのラベルがツールチップ状に表示されます。

静止キャプチャの方が分かりやすいでしょうか。

初期状態はラベルが入力欄に

入力時はラベルがツールチップで

実装

実装のポイント

label要素内のテキストをラベルとして利用する。
初期状態でラベルのテキストを表示する。
入力時にもラベルがユーザーの目に見えるようにする。
ラベルの配置はフォームとページのレイアウトで行われるようにする。
スクリプトが利用可能でない時でも、ラベルを利用できるようにする。

これらのポイントを踏まえた、実装は下記のようになります。

HTML

HTMLはシンプルで、label要素とinput要素を対にして実装するだけです。
スクリプトが利用可能でない時は、そのままlaber要素のテキストが表示されます。

<p>
    <span class="infield-label">
        <label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" class="input" size="50">
    </span>
</p>
<p>
    <span class="infield-label">
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" class="input" size="50">
    </span>
</p>

CSS

まずは、ベーシックなスタイルから。

/* basic html styling */
 body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 70px 0 0 50px;
}

p {
    margin: 0 0 20px;
}

最後に、フォーム周りのスタイルです。フォーカス時に入力欄がハイライトします。

/* input styling */
 .input {
    background: #fff;
    border: 1px solid #c4c4c4;
    color: black;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 38px;
    margin: 0;
    outline: none;
    padding: 0 10px;
}

.lt-ie9 .input {
    line-height: 38px;
}

.input:focus {
    border-color: #08c;
    -webkit-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
       -moz-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
            box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
}

/* infieldLabel styles */
 .infield-label {
    display: block;
    position: relative;
}

.infield-label label {
    bottom: 0;
    color: #777;
    display: block;
    left: 0;
    line-height: 39px;
    margin: 0;
    right: 0;
    top: 0;
}

/* normally hidden behind .js class on body */
 .infield-label label {
    cursor: text;
    font-size: 14px;
    padding: 0 10px;
    position: absolute;
    white-space: nowrap;
}

.placeholder-focus label {
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    bottom: auto;
    color: #fff;
    line-height: 32px;
    right: auto;
    top: -40px;
}

.no-rgba .placeholder-focus label {
    background-color: #111;
}

.placeholder-focus label:after {
    border-top: 5px solid rgba(0, 0, 0, 0.8);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    bottom: -5px;
    content:'';
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
}

.no-rgba .placeholder-focus label:after {
    border-top-color: #111;
}

.infield-label-image.placeholder-focus label {
    top: -122px;
}

.placeholder-hide label {
    bottom: auto;
    left: -9999px;
    right: auto;
    top: -9999px;
}

JavaScript

スクリプトでlaberl要素のテキストを入力欄に表示し、入力時にツールチップとして表示します。
実装にはjquery.jsを外部ファイルとします。

/*! jquery.infieldLabel.js v 1.0 | Author: Jeremy Fields [jeremy.fields@viget.com], 2013 | License: MIT */

(function ($) {

    $.infieldLabel = function (el, options) {

        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("infieldLabel", base);

        // internal variables
        base.$input = null;

        base.init = function () {
            base.options = $.extend({}, $.infieldLabel.defaultOptions, options);

            base.setup();
        };


        // setup

        // first time input setup
        base.setup = function () {
            base.$input = base.$el.find("input[type=text], input[type=password]");

            // hide label if there's already a value
            base.blur();

            // bind events
            base.bind();
        };

        // binds the focus, blur and change events
        base.bind = function () {
            base.$input.on("focus.infield", function () {
                base.$el.removeClass(base.options.hideClass)
                    .addClass(base.options.focusClass);

            }).on("blur.infield change.infield", function () {
                base.blur();
            });
        };

        base.blur = function () {
            if (base.$input.val() !== "") {
                base.$el.removeClass(base.options.focusClass)
                    .addClass(base.options.hideClass);

            } else {
                base.$el.removeClass(base.options.focusClass + " " + base.options.hideClass);
            }
        };

        // run initializer
        base.init();
    };

    $.infieldLabel.defaultOptions = {
        focusClass: "placeholder-focus",
        hideClass: "placeholder-hide"
    };

    $.fn.infieldLabel = function (options) {
        this.each(function () {
            (new $.infieldLabel(this, options));
        });
    };

})(jQuery);

$('.infield-label').infieldLabel();