今回よりフォーム関連の実践

前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで、様々なサイトで使いたい部分で使えるようにできるという点でも、とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので、みなさんもぜひ挑戦してみてください。

さて、今回より数回にかけて、フォーム（Form）関連の実践例についてご紹介していきます。フォームでは、ユーザーが使いやすいよう（入力しやすいように）に工夫することで様々な点において、利便性を向上させることができます。

今回はフォームの入力部分に入力例などを入れておき、フォーカスしたときにその入力例を消す仕組みを作ってみることにします。

入力例を入れておきフォーカス時に消す

フォームの入力部分で、入力例を入れておくことで、その部分にどのような入力をしたらいいのか明示しておくことができます。このようにしておくことで、ユーザーが入力の時に戸惑わなくて済むようになります。

入力例を最初からHTMLに入れておくこともできるのですが、それではフォーカスしても最初に入れておいた文字は消えず、わざわざ入力する人が消す手間が増えてしまいます。ユーザビリティーとしては高めることができても、ユーザーの手間が増えるのは良くありません。

<p><label for="sample01">名前：</label><input id="sample01" type="text" value="技評太郎" /></p>

サンプルでは入力例として「技評太郎」という値をvalueに入れただけのものです。このままでは、先にも書いたように、例ではなく、実際のユーザーの名前を入力する際に、わざわざその文字を消さなくてはなりません。

そこで、入力欄にフォーカスしたときに、あらかじめ入っていた文字を消すということを、JavaScript側で行うようにします。

$(function(){
    $('input').focus(function(){
        $(this).val('');
    });
});

上記の例では、あらかじめHTML側のvalueに入力例を入れておき、フォーカスしたときに、それを消すというだけのシンプルな例です。

しかしこれだけでは、仮にフォーカスが入っても、入力しないままでフォーカスがはずれた時に、何も値が入っていない状態になってしまいます。例えばその欄だけ入力を後回しにしたときになど、入力が何もなかった場合に、元の入力例を表示するようにしておくのが親切です。

focus

focusはinputやtextareaなどの要素に、マウスやタブキーでフォーカスした際に、イベントを実行させるものです。簡単な例を見てみましょう。

$(function(){
    $('input').focus(function(){
        alert('フォーカスしました');
    });
});

inputにフォーカスすると「フォーカスしました」のアラートを表示する簡単なサンプルです。focus時に何かする際はこれを利用しましょう。

入力欄が空白ならデフォルトに戻す

それでは、フォーカスがはずれた時に、何も値が入っていない空白の状態の場合に、最初に入れておいた例を再度表示させる例を作ってみましょう。

また、フォーカスしたことをわかりやすくするために、少し装飾を加える工夫も入れようと思います。フォーカスしたときに背景色とボーダーをわかりやすいように、色がつくようにしてみます。

input{
	background-color: #ffffff;
	border: 1px solid #7B9EBD;
}

input.focus{
	background-color: #eeeeff;
	border: 2px solid #003399;
}

$(function(){
    $('input').focus(function(){
        if($(this).val() == this.defaultValue) { $(this).val(""); }
        $(this).addClass('focus');
    }).blur(function(){
        if($(this).val() == "") { $(this).val(this.defaultValue); }
        $(this).removeClass('focus');
    });
});

背景色とボーダーを変える部分については、addClassを利用し、フォーカスした時にだけclassをつけることで変化をつけます。CSSでは、classがついているときと、ついていないときの指定がされています。

ここで一点注意ですが、背景色だけを変えようとすると、入力欄がくぼんだように見える状態になってしまいます。これはボーダーの種類が「inset」という内側に影の入ったようなタイプになってしまい、少し立体に見えるようになるからです。背景色を指定しない時と同じように表示をさせたい場合は、ボーダーの指定もするようにしてください。

このサンプルでは、フォーカスした時に、サンプルとして入れておいた値と同じであれば、その値が消えるようにし、また、フォーカスがはずれた時に値に何も入ってなければ、元の値を表示するものです。

blur

blurはinputやtextareaなどの要素から、フォーカスがはずれた際に、イベントを実行させるものです。簡単な例を見てみましょう。

$(function(){
    $('input').blur(function(){
        alert('フォーカスがはずれました');
    });
});

inputからフォーカスがはずれると「フォーカスがはずれました」のアラートを表示する簡単なサンプルです。フォーカスからはずれる時に何かする際はこれを利用しましょう。

valueを使わずlabelを利用した実践例

さて、ここまでHTMLのvalueに直接値を入れておき、それをフォーカス時に消すというサンプルをご紹介してきました。その方法であれば、HTMLもJavaScriptもシンプルかつ簡単な構造で作成することができます。

しかし、この方法だと、全てのvalueをあらかじめ入れておかなければならないので、JavaScriptを利用していないような環境の人がいた場合、値を削除をしてから入力しなければならなくなってしまいます。

そこで、あらかじめvalueに値を入れておくことはせず、他の方法で、入力例を表示しておく実践サンプルをもう一つご紹介いたします。

<table>
<tbody>
<tr>
<th>名前：</th>
<td><input id="sample61" type="text" /><label for="sample61">例：技評太郎</labrl></td>
</tr>
<tr>
<th>カナ：</th>
<td><input id="sample62" type="text" /><label for="sample62">例：ギヒョウタロウ</labrl></td>
</tr>
<tr>
<th>役職：</th>
<td><input id="sample64" type="text" /><label for="sample64">例：係長</labrl></td>
</tr>
</tbody>
</table>

$(function(){
    $('input').each(function(){
        var thisInput = $(this);
        var label = $(this).next();

        thisInput.parent().wrapInner('<div />');
        if(thisInput.parent().css('position') != 'absolute'){
            	thisInput.parent().css('position','relative');
        }
        label.css({
            	position: 'absolute',
            	top: '2px',
            	left: '5px'
        });
    });
	
    $('input').focus(function(){
        var label = $(this).next();
        label.hide();
    }).blur(function(){
        var label = $(this).next();
        if(this.value.length<1){
            	label.show();
        }
    });
});

positionで配置

この実践例では、positionを利用して、inputの上にlabelを表示させ、input内にあるかのようにみせています。positionをうまく利用するために、wrapInnerを使い、inputとlabelを囲うdivを、tdの内側につけています。そのdivをposition:relative;で配置し、その中のlabelにposition:absolute;で、inputに重なるように配置します。

あとはinputにフォーカスしたときに、そのlabelを非表示にし、もしinputに何も入力がなければ、再度そのlabelを表示するようにしておきます。

入力があるかないかは、input内の文字数を「this.value.length」を使いカウントし、1文字もなければ再度表示させます。

作り方は様々

今回は、valueにあらかじめ値を入れておいてそれをフォーカス時に消す例と、labelを使い、input要素に重ねて表示させる2つの方法をご紹介いたしました。

ここでご紹介したのはあくまで一例であり、他にも考えれば様々な仕組みで同様のものは作れます。例えば、valueの値を動的に入れたり削除したりする方法も考えられると思います。

これらを導入するサイトのデザインや構造によっても、作り方はそれぞれになってくると思いますので、そのサイトにあった作りで作るのもいいかもしれませんし、どんなサイトでも使えるように、プラグインとして利用するなど、作り方を変えるのもいいと思います。

そのサイトだけの作りでもいいでしょうし、どんなサイトでも使えるようにするのもいいですし、様々チャレンジしてみてはいかがでしょう。