新規登録フォーム
お名前・メール・パスワード（簡易強度表示）・利用規約同意を備えた新規登録フォーム。各欄はフォーカスを外した時点で検証し、問題があればその場でメッセージを出す。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- 氏名・メール・パスワード・規約同意の新規登録
- 欄を離れた時点で検証しその場で直させたい入力
- 簡易な強度バーを付けたパスワード設定
- 避ける場面
- 1項目ずつ確認する長い申込（ステップフォーム）
- 強度をポリシーとして強制する画面
- 構成要素
- 見出し
- 入力欄×3
- メッセージ
- 強度バー
- 規約チェック
- 登録ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- エラー
- 成功
- キーボード
Tab で欄を移動し、離れた（blur）時点で検証。Space で規約チェック、Enter で送信（全欄＋同意をまとめて検証し、最初のエラー欄へフォーカス）
- 支援技術
label[for]、aria-describedby でメッセージと強度の文言を結び、各メッセージは aria-live=polite。エラー欄は aria-invalid=true＋枠色＋文言。強度バーは aria-hidden で隠し文言が正。同意未チェックも文言で示す
- 動き
強度バーの幅・色 250ms、枠色 180ms。reduced-motion で無効
デザインの要点
- 検証は blur のとき。打っている途中で赤くすると、まだ書き終えていない欄を叱ることになる
- 一度エラーになった欄だけは入力中も再評価する。直した瞬間に緑へ戻ると、送信前に安心できる
- 送信時は全欄をまとめて検証し、最初のエラー欄へフォーカスを移す。エラーの場所を探させない
- 規約の同意は未チェックでも黙らない。送信が止まった理由を文言で出さないと、ボタンが壊れたと思われる
実装メモ
各入力は 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" aria-live="polite"></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" aria-live="polite"></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-strength su-pw-msg" />
<div class="su-meter" aria-hidden="true"><span id="su-pw-bar"></span></div>
<span class="su-sr" id="su-pw-strength"></span>
<p class="su-msg" id="su-pw-msg" aria-live="polite"></p>
</div>
<div class="su-field">
<label class="su-check">
<input type="checkbox" id="su-terms" aria-describedby="su-terms-msg" />
<span class="su-checkmark" aria-hidden="true"></span>
<span><a href="#">利用規約</a>に同意します</span>
</label>
<p class="su-msg su-terms-msg" id="su-terms-msg" aria-live="polite"></p>
</div>
<button class="su-submit" id="su-submit" type="submit">登録する</button>
</form>