サイトの会員登録やショッピングサイトなどで、
入力フォームの項目がたくさん存在するページは、何かと面倒に感じたりします。
「必須項目」をとりあえず埋めて次へ進みたいと思うこともよくあること。
最近ではその様な入力フォームが数多く存在するページでは、
「必須項目」を視覚的に判断させるためにちょっとした工夫を施しているサイトを良く見かけます。
「必須項目」という目印を噴出しなんかで表す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");
}
});
});
入力ページにあまりゴチャゴチャ動きを付けすぎるのもよろしく無いと思いますが、
さり気ない仕掛けを組み込むことで、
ユーザには意外と親切なインターフェースに繋がる部分があると思います。
ご参考までに。。。