フォーム入力
ログインフォーム
メール・パスワード・「ログイン状態を保持」チェック・送信ボタン・パスワード再発行リンクを備えた定番のログイン画面。送信すると短いローディング演出が出る。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
送信時に 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>
</form>