jQueryでフォームを便利にパワーアップさせる方法

フォーム ガイドテキストイメージ

今、フォーム作成の勉強中でいろいろ試したり調べている最中なのですが、jQueryを使うことでフォームを便利に出来ることがわかりましたのでご紹介したいと思います。

スポンサーリンク
スポンサーリンク

入力フォームにうっすらと文字を表示

入力フォームの名前や電話番号を入力する所によく、うっすらと文字が記述されているのを見かけると思います。

実は、HTML5だと属性値placeholderを使用して簡単に実装できるのですが、ブラウザによっては使用できません。IEは10でやっと対応し始めたので、使用するには注意が必要です。

HTML5のフォーム新機能の各ブラウザの対応状況

その点、jQueryを使用すれば、ユーザーがJavaScriptを切っていない限り表示でき、幅広いユーザーに対応できます。

jQueryを読み込む

まずはjQueryを読み込みます。読み込む方法は大きく分けて2つありますが今回は

を参考にして、少しでも動作を早くするために、ホスティングされているものを使います。

head内に下記のコードを追加してjQueryの読み込みを行います。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

※ver1.10.1の読み込み時のコードです。

これで準備は出来ました。

jQueryプラグインjQuery Form Tipsを使用する

jQueryプラグインのjQuery Form Tipsを使用します。

これのプラグインもホスティングされているものを使います。

<script type="text/javascript" src="http://jquery-formtips.googlecode.com/files/jquery.formtips.1.2.6.js" ></script>

※ver1.2.6の読み込み時のコードです

注意としてプラグインを読み込むコードはjQueryを読み込んでいるコードの下に追加します。これは先にjQueryを読み込まないと動作しないためです。

次にフォームのhtmlか外部のJavaScriptに、実行するためのコードを追加しますが、私は外部のJavaScriptに書いて読み込みました。

form.jsをつくりjQuery Form Tipsを動かすためのコード書き、htmlに読み込みます。JavaScriptを読み込む順番ですが、jQueryプラグインを読み込んだコードの下にform.jsを読み込むコードを記載してください。

form.jsのコード

$(function() {
    $('form input.help, form textarea.help').formtips({
        tippedClass: 'tipped'
    });
});

htmlのコード

<script src="form.js" type="text/javascript"></script>

jQueryとJavaScriptの準備は出来ました。

うっすらと表示する文字の色を指定

うっすらと表示する文字の色をするのはCSSです。
tippedクラスを作成し、colorプロパティで色を調整します。

.tipped {
	color: #BBB;

HTMLでフォームを作成

うっすらと文字を表示させたいタグにhelpクラスを追加し、title属性には表示する文字列を入力します。

<form action="#" method="post">
<table>
<tr>
<th>名前</th>
<td><input name="name" type="text" class="help" title="氏名を入力してください。" size="20" maxlength="30"></td>
</tr>
<tr>
<th>住所</th>
<td><input name="address" type="text" class="help" title="住所を入力してください。" size="40" maxlength="50"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input name="email" type="text" class="help" title="メールアドレスを入力してください。" size="40" maxlength="50"></td>
</tr>
<tr>
<th>コメント</th>
<td><textarea name="comment" cols="40" rows="10" class="help" title="コメントを入力してください。"></textarea></td>
</tr>
</table>
<input type="submit">
</form>

サンプルページへ移動する

※<input type=”reset”>ボタンを使うとうっすらと表示している文字が全て消えしまい、その後にユーザーがテキストを入力するとうっすらと表示させる色と同じになってしまうので注意が必要です。

まとめ

ユーザー目線に立ち、使いやすいフォームを作成できるように目指してがんばりたい。

他にもフォームをパワーアップさせる方法があるのでおいおいご紹介していきたいと思います。

スポンサーリンク
スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です