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

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

さて，今回より数回にかけて，フォーム（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時に何かする際はこれを利用しましょう。