フォーム入力
新規登録フォーム
お名前・メール・パスワード（簡易強度表示）・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
各入力は blur（フォーカスを外した瞬間）に検証し、その欄だけに枠色とメッセージを出すインライン検証です。一度エラーになった欄は入力中も再評価して回復を反映します。パスワードは長さと文字種から簡易スコアを出しバーで示します。送信時は全欄＋規約同意をまとめて確認します。
コード（コピーして使えます）
<form class="su-form" id="su-form" novalidate>
<h2 class="su-title">アカウント作成</h2>
<div class="su-field">
<label class="su-label" for="su-name">お名前</label>
<input id="su-name" class="su-input" type="text" placeholder="山田 太郎" autocomplete="name" data-rule="name" aria-describedby="su-name-msg" />
<p class="su-msg" id="su-name-msg"></p>
</div>
<div class="su-field">
<label class="su-label" for="su-email">メールアドレス</label>
<input id="su-email" class="su-input" type="email" placeholder="you@example.com" autocomplete="email" data-rule="email" aria-describedby="su-email-msg" />
<p class="su-msg" id="su-email-msg"></p>
</div>
<div class="su-field">
<label class="su-label" for="su-pw">パスワード</label>
<input id="su-pw" class="su-input" type="password" placeholder="8文字以上" autocomplete="new-password" data-rule="pw" aria-describedby="su-pw-meter su-pw-msg" />
<div class="su-meter" aria-hidden="true"><span id="su-pw-bar"></span></div>
<p class="su-msg" id="su-pw-msg"></p>
</div>
<label class="su-check">
<input type="checkbox" id="su-terms" />
<span class="su-checkmark" aria-hidden="true"></span>
<span><a href="#">利用規約</a>に同意します</span>
</label>
<button class="su-submit" id="su-submit" type="submit">登録する</button>
</form>