ここに、妥当なHTML5構文を持ったフォームがあります。メール、 url、および数字入力だけでなく、パターン属性を 持つ通常のテキスト入力も使用しています。 requred 属性は、必須フィールドを示すために使用します。 古い方法だが便利な maxlength 属性は、30文字以上の入力を不可能にします。
<form id="myform">
<fieldset>
<h3>サンプル登録フォーム</h3>
<p> 誤った値を入力し、送信ボタンを押してください。</p>
<p>
<label>メール *</label>
<input type="email" name="email" required="required" />
</p>
<p>
<label>ウェブサイト *</label>
<input type="url" name="url" required="required" />
</p>
<p>
<label>名前 *</label>
<input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
</p>
<p>
<label>年齢</label>
<input type="number" name="age" size="4" min="5" max="50" />
</p>
<p id="terms">
<label>条件に同意します</label>
<input type="checkbox" required="required" />
</p>
<button type="submit">フォームを送信</button>
<button type="reset">リセット</button>
</fieldset>
</form>
ここは、簡単な部分です。単にバリデータを初期化すれば、全てが正確なHTML5 が得られます。
$("#myform").validator();
HTMLコードの後に script ブロックを置くか、または、 ウェブページの文書オブジェクト・モデル（DOM）がロードされるとすぐに スクリプトを実行するため、jQueryの $(document).ready を 代わりに使用することができます。
デザインのために、1つの外部スタイルシート を 使用しています。これは、フォーム全体のスタイルを設定しています。 ここでは、検証とエラーメッセージに焦点を当てています:
/* エラーメッセージ */
.error {
/* supply height to ensure consistent positioning for every browser */
height:15px;
background-color:#FFFE36;
border:1px solid #E1E16D;
font-size:11px;
color:#000;
padding:3px 10px;
margin-left:-2px;
/* CSS3 spicing for mozilla and webkit */
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius-bottomleft:0;
-moz-border-radius-topleft:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
-moz-box-shadow:0 0 6px #ddd;
-webkit-box-shadow:0 0 6px #ddd;
}