サイトの会員登録やショッピングサイトなどで、
入力フォームの項目がたくさん存在するページは、何かと面倒に感じたりします。
「必須項目」をとりあえず埋めて次へ進みたいと思うこともよくあること。

最近ではその様な入力フォームが数多く存在するページでは、
「必須項目」を視覚的に判断させるためにちょっとした工夫を施しているサイトを良く見かけます。
「必須項目」という目印を噴出しなんかで表すjQueryライブラリもたくさんあったり。

そんな「必須項目」をさりげなく目立たせる為に入力フォームに
ちょっとした仕掛けを組み込むSCRIPTを考えてみました。

まずは比較的シンプルなものから。
「必須項目」の入力フォームのみ空の状態で背景色を変化させ、
入力後は背景色を白(基本色)に変換するSCRIPT。

動作サンプルは以下
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

未入力の「必須項目」は背景が赤くなっているので
視覚的な判断はしやすいかと思います。

実際のSCRIPTは以下の様な感じに。

◆SCRIPT
$(function(){
	$('td input[type=text],td textarea,td select').css({
		backgroundColor: '#fff',
		border: '#666666 1px solid'
	});
	$('td.necessary input,td.necessary textarea,td.necessary select,td.necessary option').each(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
		} else {
			$(this).css("background-color","#ffffff");
		}
	});
	$('td.necessary input,td.necessary textarea,td.necessary select,td.necessary option').blur(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
		} else {
			$(this).css("background-color","#ffffff");
		}
	});
	$('td.necessary select,td.necessary option').focus(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
		} else {
			$(this).css("background-color","#ffffff");
		}
	});
});

単純にinput、textarea、selectのvalueの値を見て、
空の物に対して背景色を赤に変えています。

シンプルではあるけれど動き的にこれくらいでも「必須項目」については
判断出来るかなと思ってます。
(サンプルはあまり入力項目数を多くしていないのでわかりづらいかもしれませんが…)

これをもっとアレンジしてみると
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

「必須項目」にあたる項目タイトル(ここではTH)の背景を
入力フォームが未入力の場合は赤くして、実際の入力フォームの右側にも
「必須項目」の文字を置いて目立たせています。
フォーム入力後は背景は他の項目と同じ色になり
「必須項目」のテキストはフェードアウトさせることで
未入力の「必須項目」を判断しやすくする方法。
(サンプルは動作が目立つように必要以上に背景色の色を強くしています…)

こっちのパターンのSCRIPTは以下の様な感じ。

◆SCRIPT
$(function(){
	$('td input[type=text],td textarea,td select').css({
		backgroundColor: '#fff',
		border: '#666666 1px solid'
	});
	$('td.necessary input,td.necessary textarea,td.necessary select,td.necessary option').each(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
			$(this).parent().prevAll('th').css("background-color","#FF8F8F");
		} else {
			$(this).css("background-color","#ffffff");
			$(this).parent().prevAll('th').css("background-color","#e9e9e9");
			$(this).next('span').fadeOut("normal");
		}
	});
	$('td.necessary input,td.necessary textarea,td.necessary select,td.necessary option').blur(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
			$(this).parent().prevAll('th').css("background-color","#FF8F8F");
			$(this).next('span').fadeIn("normal");
		} else {
			$(this).css("background-color","#ffffff");
			$(this).parent().prevAll('th').css("background-color","#e9e9e9");
			$(this).next('span').fadeOut("normal");
		}
	});
	$('td.necessary select,td.necessary option').focus(function(){
		if(this.value == ""){
			$(this).css("background-color","#ffebeb");
		} else {
			$(this).css("background-color","#ffffff");
		}
	});
});

入力ページにあまりゴチャゴチャ動きを付けすぎるのもよろしく無いと思いますが、
さり気ない仕掛けを組み込むことで、
ユーザには意外と親切なインターフェースに繋がる部分があると思います。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)

  • kinoyasu | 2013.07.09 17:04

    どうしても師匠の説明されてる、(入力フォームの「必須項目」などのインターフェースを考えてみる)をやってみたくて、師匠のソースコードをコピーしてブラウザーで表示させて見ました。何とか動かないかなぁと考えてグーグルアジャックスjquery1.9.1と繋いでみました。白黒からカラーに変更になり成功です。後は、師匠の提供されているスクリプトのコードを参考に配色を変更して見たり、cssで装飾したりしてみました。職業支援訓練でドリームウィーバーでフォームを作る授業が一日だけ有りましたが、メールの送受信も知らないパソコンスキル0の私にとって、何をやってるのか全く分からず悲しお地蔵さまでした。師匠のおかげで動的なフォームの作り方や色々なカスタマイズの方法を学びました。有難うございます一歩前進出来ました!

  • BlackFlag | 2013.07.11 0:44

    >kinoyasuさん
    コメントありがとうございます。
    こちらの入力フォーム用のスクリプトに関しても
    いろいろお試しいただいている様で嬉しく思っております。

    入力フォーム関連でもjQueryを使うことで
    いろいろと動的な動きをつけることが可能になるので
    あれこれ試してみてください。

    まだまだ師匠と呼ばれるほどの者でもありませんが
    これからも皆さんに少しでもお役に立てる情報を発信できるように
    がんばらせていただきます。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで入力フォームの「必須項目」などのインターフェースを考えてみる。

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR