ログインフォーム

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[サービス名]

例：Toolly

[送信先]

フォームのaction。未定なら「#」のまま

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたはフォームのUXとセキュリティに配慮できるフロントエンドエンジニアです。
[サービス名]の「ログインフォーム」の画面を実装してください（認証処理は含めず、見た目と入力まわりの挙動のみ）。

## 表示内容
- 見出し「ログイン」
- メールアドレス入力欄
- パスワード入力欄（右端に「表示／非表示」の切り替えボタン）
- 「ログイン」ボタン
- 「パスワードをお忘れの方」リンク
- 「アカウントをお持ちでない方は 新規登録」リンク

## レイアウト・デザイン
- 画面中央にカード（最大幅 400px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px）
- ラベルは入力欄の上に常に表示（14px、font-weight 700）
- 入力欄：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px
- フォーカス時：枠線 #1463F0 と 3px の薄いリング
- ログインボタン：幅100%、高さ 48px、背景 #1463F0、文字 #FFFFFF、font-weight 700
- 項目間の余白 20px

## 入力まわりの属性
- メール：type="email"、autocomplete="username"、inputmode="email"
- パスワード：type="password"、autocomplete="current-password"
- どちらも貼り付けを禁止しない（パスワードマネージャーを妨げない）
- form は method="post"（送信先：[送信先]）

## 動作
- 切り替えボタンでパスワードの表示・非表示を切り替える（type を text / password に変更）
- 送信中はボタンを無効化し、文言を「ログイン中…」にして二重送信を防ぐ
- 未入力の項目があれば、その入力欄の下にメッセージを表示する

## エラー表示
- 認証に失敗した場合は、フォーム上部に「メールアドレスまたはパスワードが正しくありません」と表示する
- どちらが間違っているかは示さない
- エラー時もメールアドレスの入力内容は残し、パスワード欄にフォーカスを移す

## アクセシビリティ
- 切り替えボタンは button type="button"、aria-pressed で状態を伝え、ラベルは「パスワードを表示」
- エラーメッセージは role="alert"、入力欄ごとのメッセージは aria-describedby で関連付ける
- すべての操作がキーボードだけで行えること

## 出力形式
- [使用技術]のコードを1つ出力
- 認証処理を接続する箇所をコメントで明示