jQueryで入力フォームの「必須項目」などのインターフェースを考えてみる。TechnicalHOMEABOUTTIPSCONTACTSITEMAPRSSTWITTERFACEBOOKjQueryで入力フォームの「必須項目」などのインターフェースを考えてみる。入力フォームの項目がたくさん存在するページは、何かと面倒に感じたりします。「必須項目」をとりあえず埋めて次へ進みたいと思うこともよくあること。「必須項目」を視覚的に判断させるためにちょっとした工夫を施しているサイトを良く見かけます。「必須項目」という目印を噴出しなんかで表すjQueryライブラリもたくさんあったり。そんな「必須項目」をさりげなく目立たせる為に入力フォームにちょっとした仕掛けを組み込むSCRIPTを考えてみました。比較的シンプルなものから。入力後は背景色を白(基本色)に変換するSCRIPT。「必須項目」は背景が赤くなっているので視覚的な判断はしやすいかと思います。実際のSCRIPTは以下の様な感じに。空の物に対して背景色を赤に変えています。シンプルではあるけれど動き的にこれくらいでも「必須項目」については判断出来るかなと思ってます。あたる項目タイトル(ここではTH)の背景を入力フォームが未入力の場合は赤くして、実際の入力フォームの右側にも「必須項目」の文字を置いて目立たせています。フォーム入力後は背景は他の項目と同じ色になり「必須項目」のテキストはフェードアウトさせることで未入力の「必須項目」を判断しやすくする方法。(サンプルは動作が目立つように必要以上に背景色の色を強くしています...)こっちのパターンのSCRIPTは以下の様な感じ。{$(this).css("background-color","#ffffff");}});});入力ページにあまりゴチャゴチャ動きを付けすぎるのもよろしく無いと思いますが、さり気ない仕掛けを組み込むことで、ユーザには意外と親切なインターフェースに繋がる部分があると思います。17:04どうしても師匠の説明されてる、(入力フォームの「必須項目」などのインターフェースを考えてみる)をやってみたくて、師匠のソースコードをコピーしてブラウザーで表示させて見ました。何とか動かないかなぁと考えてグーグルアジャックスjquery1.9.1と繋いでみました。白黒からカラーに変更になり成功です。後は、師匠の提供されているスクリプトのコードを参考に配色を変更して見たり、cssで装飾したりしてみました。職業支援訓練でドリームウィーバーでフォームを作る授業が一日だけ有りましたが、メールの送受信も知らないパソコンスキル0の私にとって、何をやってるのか全く分からず悲しお地蔵さまでした。師匠のおかげで動的なフォームの作り方や色々なカスタマイズの方法を学びました。0:44>kinoyasuさんコメントありがとうございます。こちらの入力フォーム用のスクリプトに関してもいろいろお試しいただいている様で嬉しく思っております。入力フォーム関連でもjQueryを使うことでいろいろと動的な動きをつけることが可能になるのであれこれ試してみてください。師匠と呼ばれるほどの者でもありませんがこれからも皆さんに少しでもお役に立てる情報を発信できるようにがんばらせていただきます。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。PAGETOPjQueryで入力フォームの「必須項目」などのインターフェースを考えてみる。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。