---
title: ログイン画面
screen: ./login.png?highlight=[[4,6,95,36],[53,50,238,43],[53,93,238,48],[128,144,103,50]]
---

# 概要

ログイン画面。

# この画面に関する遷移

```uiflows
[ブックマークやURLの直接入力でサイト内へアクセス]
未ログインの場合
==> ログイン画面
ログイン済みの場合
==> アクセスを試みた画面

[ログアウト]
==> ログイン画面

[ログイン画面]
ログイン済みでアクセス
==> 商品画面
正しいID/PWでログイン
==> 商品画面
==> ログイン画面に自動遷移前にアクセスしようとした画面
間違ったID/PWでログイン
==> ログイン画面（ID/PW間違い）

[パスワード変更画面](./change-password.html)
正しいパスワード変更
==> 商品画面

[商品画面](../schedule/index.html)
```

# 基本仕様

-   HTML の form の入力欄の入力値が送信される。
-   入力チェックは、フロントエンドでは入力済みかどうかだけ判別し、保存してログインボタンの有効/無効状態を切り替える。
-   エラー時は、サーバーサイドから返されたエラーメッセージを表示する

# 機能一覧

-   [1.コンテンツタイトル](#1.コンテンツタイトル)
-   [2.ユーザー ID 入力欄](#2.ユーザーID入力欄)
-   [3.パスワード入力欄](#3.パスワード入力欄)
-   [4.ログインボタン](#4.ログインボタン)

# 機能詳細

## 1.コンテンツタイトル

ログイン画面のタイトルを表示する。

## 2.ユーザー ID 入力欄

ログインに使用するユーザー ID を入力する入力欄。

### input 要素の属性値

| 属性名 | 値       |
| :----- | :------- |
| `type` | `text`   |
| `name` | `userId` |

## 3.パスワード入力欄

ログインに使用するユーザー ID に対応するパスワードを入力する入力欄。

### input 要素の属性値

| 属性名 | 値         |
| :----- | :--------- |
| `type` | `password` |
| `name` | `password` |

## 4.ログインボタン

ログインを実行するボタン。

```uiflows
[ログインボタン（無効状態）]
ID/PWを入力
==> ログインボタン（有効状態）

[ログインボタン（有効状態）]
クリック
==> 送信
==> ログインボタン（無効状態）
```

### input 要素の属性値

| 属性名 | 値       |
| :----- | :------- |
| `type` | `submit` |