ログインフォーム
メール・パスワード・「ログイン状態を保持」チェック・送信ボタン・パスワード再発行リンクを備えた定番のログイン画面。送信すると短いローディング演出が出る。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- メール＋パスワードの定番ログイン画面
- 送信中をボタン内スピナーで見せたい認証
- 「ログイン状態を保持」を持つサービス
- 避ける場面
- SSO・パスキーだけの認証
- パスワード再設定など別フローの画面
- 構成要素
- 見出し
- メール欄
- パスワード欄
- 再発行リンク
- 保持チェック
- 送信ボタン（スピナー）
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 無効
- 読み込み中
- 成功
- キーボード
Tab で欄・リンク・チェック・ボタンを移動。Space でチェック切替、Enter で送信。未入力があればブラウザの required 検証が止める。送信中はボタンが disabled
- 支援技術
label[for]、required（送信時に checkValidity で検証）、autocomplete=username／current-password。送信中は form に aria-busy、結果は隠し aria-live=polite で通知。スピナーは aria-hidden
- 動き
スピナー 700ms linear 回転（送信中）、枠・チェック 150〜180ms。reduced-motion で停止
原則ヤコブの法則
デザインの要点
- 再発行リンクはパスワードのラベルと同じ行の右端に置く。入力欄の下だと送信ボタンと競合し、押し間違える
- 送信中はボタンの文字を visibility:hidden にしてスピナーを重ねる。幅が変わらないので画面が揺れない
- メール欄の autocomplete は username。email にするとパスワード管理ツールが組として保存しない
- 送信中は disabled で二重送信を防ぐが、押した後に無反応に見えないよう 0 秒目からスピナーを出す
実装メモ
送信時に e.preventDefault() で実送信を止め、ボタンに .is-loading を付けてラベルを隠しスピナーを回す擬似ローディングです。実装ではここを実際の認証リクエストに置き換えてください。チェックボックスは視覚を自作しつつ中身はネイティブ input なのでキーボード操作がそのまま効きます。
コード（コピーして使えます）
<form class="lf-form" id="lf-form" novalidate>
<h2 class="lf-title">ログイン</h2>
<div class="lf-field">
<label class="lf-label" for="lf-email">メールアドレス</label>
<input id="lf-email" class="lf-input" type="email" placeholder="you@example.com" autocomplete="username" required />
</div>
<div class="lf-field">
<div class="lf-row">
<label class="lf-label" for="lf-pw">パスワード</label>
<a class="lf-forgot" href="#">パスワードをお忘れですか？</a>
</div>
<input id="lf-pw" class="lf-input" type="password" placeholder="••••••••" autocomplete="current-password" required />
</div>
<label class="lf-check">
<input type="checkbox" id="lf-remember" />
<span class="lf-checkmark" aria-hidden="true"></span>
ログイン状態を保持
</label>
<button class="lf-submit" id="lf-submit" type="submit">
<span class="lf-submit-label">ログイン</span>
<span class="lf-spinner" aria-hidden="true"></span>
</button>
<span class="lf-sr" id="lf-status" aria-live="polite"></span>
</form>