ログインフォーム（記憶チェック付き）
このログインフォームは、メールアドレスとパスワードの入力欄に「ログイン状態を保持」のチェックボックスと「パスワードを忘れた」リンクを組み合わせた、認証画面の基本形です。JavaScript は使わず、HTML の type="email" や required 属性でブラウザ標準のバリデーションを効かせています。
解説
このログインフォームは、メールアドレスとパスワードの入力欄に「ログイン状態を保持」のチェックボックスと「パスワードを忘れた」リンクを組み合わせた、認証画面の基本形です。JavaScript は使わず、HTML の type="email" や required 属性でブラウザ標準のバリデーションを効かせています。入力欄は :focus 時に枠線の色が変わり、今どこを入力しているかが一目で分かる作りです。
使う場面
- 会員制サイトや SaaS のサインイン画面
- 管理画面・ダッシュボードの入口
- 会員限定コンテンツの前に置くログインモーダル
カスタマイズの起点は、フォーカス色の #667eea と角丸・影の数値です。ブランドカラーに合わせて変えるだけで印象が大きく変わります。実運用では、ラベルと入力欄を <label> で結び付けてあるため読み上げにも対応しやすく、autocomplete 属性を足すとパスワード管理ツールとの相性が上がります。送信ボタンはコントラスト比を確保し、押せる状態が明確に伝わるようにしておくと安心です。
よくある質問
JavaScript なしでも入力チェックは効きますか？
効きます。type=email や required などの HTML 標準属性で、空欄やメール形式の誤りはブラウザ側がチェックしてくれます。複雑な条件分岐や非同期の重複チェックが必要なときだけ JavaScript を足してください。
フォーカス時の青色を自社カラーに変えたいです。
input:focus の border-color に指定された #667eea を任意の色に書き換えるだけで変わります。同じ色をボタンの背景にも使うと、画面全体のトーンが揃って統一感が出ます。