2014年に制作した記事を2016/09に加筆修正
jQuery Validation Pluginは入力フォームのバリデートをしてくれるjQueryプラグインです。
入力誤りなどをチェックしてくれます。
通常はシステム屋さんがうにょうにょやってくれるので、HTMLコーダーがこういうのを用意する機会もあまりないとは思いますが、知っておいても損はないと思います。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。
なお、入力フォームに入力する行為は、ユーザーにとって結構なストレスになります。
さらにエラーが何度も表示されたりすると心が折れて、途中で諦めてしまうこともあります。
このようなプラグインを使って何が間違っているのかを明確に知らせるのも大事ですが、そもそも必須項目なのか、何文字まで入力可能なのか、全角・半角どちらかに決まっているのか、使用できない文字があるのか・・・などといった注意を明記してエラーを出させないことも大事です。
ちなみに、注意書きもたくさんあったり、長文だったりすると、ユーザーが理解を諦めてしまったりします。ぱっと見てわかるように工夫しましょう。
入力項目の厳選、入力の順番、日本語なら頻繁に全角半角を切り替えさせない工夫など、ユーザーのストレスを軽減する入力フォームの設計が肝心です。
何も入力せずに「送信」ボタンをクリックすると、エラーが表示されます。
<form action="CGIやWebアプリケーションのurl">
<label for="yourname">名前</label><input name="yourname" type="text" id="yourname" placeholder="入力例など"><input type="submit" value="送信">
</form>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
通常通り、入力フォームを組んでください。
inputタグなどの入力フォーム関連のタグには任意の名前（name属性の値）をつけます。
必要であれば、formタグにclassやidを設定してください。
input[type="text"]{
/*必要な設定*/
}
input[type="text"].error{
/*エラーが表示されて時に必要な設定*/
}
label.error{
/*エラーメッセージに必要な設定*/
}
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
cssを設定する必要はありませんが、エラーメッセージの位置を変えたり、テキストカラーを変えたりしたいときは、適宜設定をしてください。
エラーメッセージはデフォルトで、labelタグにclass[error]を付与して、挿入されます（ついでにエラー対象の入力フォーム関連タグにもclass[error]が追加されます）。エラーメッセージのタグやclass名は好きなものに変更することができます。詳しくはページ下の参考ページや提供元サイトのデモページなどを参照してください。
余談ですが、inputタグのtype別にcssを設定することが可能です。IE7から使えます（E[attr=value]形式のみ）。IE6などはブラウザは従来通りclassやidを指定することになります。
$(function(){
$('form').validate({
rules:{
yourname:'required'
},
messages:{
yourname:'名前を入力してください'
}
});
})
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
この他にもいろいろできます。詳しくはページ下の参考ページや提供元サイトのデモページなどを参照してください。
先にも述べました通り、入力フォームはユーザーにいろいろとストレスを与えます。
しかし、企業などの場合、会員登録してもらったり、アンケートに答えてもらったり、どうしたって入力作業をユーザーに強いる機会が出てきてしまいます。
なので、できるだけユーザーに負荷を与えない入力フォームのデザインや送信完了するまでのフローの設計を考えることが重要になってきます。
この問題は、入力デバイスが何であるかということも考慮に入れる必要があります。キーボードを使っての入力とスマートデバイスのようなタッチパネルでの入力では負荷が違ってきます。
また、スマートデバイスの普及により、キーボードに慣れないユーザーが若い世代にもそれなりにいるので、キーボードよりタッチパネルの方が楽に感じる人や、その逆の人もいることも意識しておきましょう。
文字入力だけでなく、何かを選択してもらうにしても、選択肢の文言が単語なのか文章なのか、またはその内容によってチェックボックスやラジオボタンの方がいいのか、セレクトボックス（プルダウンメニュー）の方がいいのかが違ってくると思います。
例えば「ご自分の考えに一番近いものを選んでください」などという質問の場合、セレクトボックスにしてしまうと選択肢が隠れている状態になるので、選択肢を比較するにはまずセレクトボックスを開くという作業が必要になります。
あれ？さっきの回答違うかも？と思っても、すべての選択肢を憶えていられる人は稀でしょうから、選択済みの回答でよかったとしても再度セレクトボックスを開いて上から下まで吟味しないといけません（しかもセレクトボックスの幅が狭いと選択済みの内容すら確認できなかったり）。画面の狭いスマートフォンなどではスクロールも発生することもあるでしょうから、さらにユーザーに作業を強いる可能性があります。
さらにこれが複数選択になると、セレクトボックスは（デザインによっては）選択中のものがすべて表示されないし、スマートデバイスの場合はOSによっていろいろ問題が出てきます。
逆に出身都道府県を選択させたい場合などは、日本である程度生活しているユーザーなら選択肢に何があるかわかっているので、すべての選択肢をあらかじめ見せておく必要はないですし、セレクトボックスの方がユーザーにとっても回答を探しやすい可能性があります。表示スペースも節約できる分、ユーザーは他にどんな質問があるか確認しやすく良いかもしれません。
このように、どのタイプの入力フォームを使うかということも大事ですが、そもそも入力項目を最小限にしたり、できるだけ文字入力を少なくしたり、入力フォームにおけるユーザーのストレスを軽減するための工夫のしどころはいろいろありそうです。
また、作業のストレスを軽減する他に、完了までにどんなステップがあるか、どれくらい時間がかかりそうか、会員登録などであれば登録だけで料金が発生するのか、この契約によって自分に不都合があるのか、個人情報はどのようにあつかわれるのかなど不安になりそうなことを先読みしてユーザーに知らせるといった気遣いも大事になってくるでしょう（入力途中で同意していたことも、完了までの間にどんなことに同意してしまったか不安になるものです・・・かといって親切の押し売り状態でもうざがられますが）。
以下に参考URLをいくつか掲載しますが、記事が書かれた当時はトレンドだったとしても、時間が経てばトレンドではなくなるどころか、よくない方法（考え方）となる場合もあるので、参考にとどめてください。実際に入力フォームを運用する場合は最新の情報を自分で調べて、それがその入力フォームにおいてベストなのかよく考えてください。
ご紹介した記事にはSEOやEFO(Entry Form Optimization エントリーフォーム最適化）のコンサルなどを行っている会社の記事もあったりしますが、これらの会社を推奨しているわけではないので、あしからず。
また、そういう会社の記事なので、コンバージョン率アップとか、入力フォームを作りたい側の視点でタイトルがつけられているものもありますが、作り手本意ではなく、ユーザーへの愛ある入力フォーム設計を忘れないでください。愛です。愛。