bootstrapを使ってシンプルなWebページを作成する③〜入力フォーム〜

## 概要

- [前回](https://qiita.com/ozaki25/items/7401c97ddcf0482aafa2)の続き
- bootstrapのバージョンは3.7を使っている
- https://getbootstrap.com/docs/3.3
- 動作確認のための準備は[こちら](https://qiita.com/ozaki25/items/37a31be60f169fbabbf9#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E6%89%8B%E9%A0%86)

## 今回の内容

- 入力フォームのバリエーションを見る

## ラベルの下に入力域が来るタイプ

- ラベルと入力域が上下に並ぶタイプのフォーム

<img width="816" alt="スクリーンショット 2017-10-27 1.20.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/058cb1cc-f49c-b939-5ade-84100fd4cf42.png">

```html:index.html
      <form>
        <div class="form-group">
          <label class="control-label">項目1</label>
          <input class="form-control" type="text">
        </div>
        <div class="form-group">
          <label class="control-label">項目2</label>
          <div class="radio">
            <label><input type="radio" name="radio">選択肢1</label>
            <label><input type="radio" name="radio">選択肢2</label>
            <label><input type="radio" name="radio">選択肢3</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">項目3</label>
          <div class="checkbox">
            <label><input type="checkbox" name="checkbox">選択肢1</label>
            <label><input type="checkbox" name="checkbox">選択肢2</label>
            <label><input type="checkbox" name="checkbox">選択肢3</label>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">項目4</label>
          <select class="form-control">
            <option>選択肢1</option>
            <option>選択肢2</option>
            <option>選択肢3</option>
            <option>選択肢4</option>
            <option>選択肢5</option>
          </select>
        </div>
        <button class="btn btn-default">送信</button>
      </form>
```

## ラベルと入力域が横並びになるタイプ

- ラベルと入力域が横に並ぶタイプのフォーム

<img width="819" alt="スクリーンショット 2017-10-27 1.28.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/848582d0-a757-8afc-9dc4-ef1ca602a1c8.png">

```html:index.html
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">項目1</label>
          <div class="col-sm-10">
            <input class="form-control" type="text">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">項目2</label>
          <div class="col-sm-10 radio">
            <label><input type="radio" name="radio">選択肢1</label>
            <label><input type="radio" name="radio">選択肢2</label>
            <label><input type="radio" name="radio">選択肢3</label>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">項目3</label>
          <div class="col-sm-10 checkbox">
            <label><input type="checkbox" name="checkbox">選択肢1</label>
            <label><input type="checkbox" name="checkbox">選択肢2</label>
            <label><input type="checkbox" name="checkbox">選択肢3</label>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">項目4</label>
          <div class="col-sm-10">
            <select class="form-control">
              <option>選択肢1</option>
              <option>選択肢2</option>
              <option>選択肢3</option>
              <option>選択肢4</option>
              <option>選択肢5</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default">送信</button>
          </div>
        </div>
      </form>
```

## フォームをパネルの中に入れる

- 上記の2パターンをパネルに入れると以下のような感じになる

- ラベルの下に入力域が来るタイプ

<img width="833" alt="スクリーンショット 2017-10-27 1.35.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/d9bd92df-cb48-29aa-5de3-159ab4f79d11.png">

```html:index.html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">フォーム1</div>
        <div class="panel-body">
          <form>
            <div class="form-group">
              <label class="control-label">項目1</label>
              <input class="form-control" type="text">
            </div>
            <div class="form-group">
              <label class="control-label">項目2</label>
              <div class="radio">
                <label><input type="radio" name="radio">選択肢1</label>
                <label><input type="radio" name="radio">選択肢2</label>
                <label><input type="radio" name="radio">選択肢3</label>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">項目3</label>
              <div class="checkbox">
                <label><input type="checkbox" name="checkbox">選択肢1</label>
                <label><input type="checkbox" name="checkbox">選択肢2</label>
                <label><input type="checkbox" name="checkbox">選択肢3</label>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">項目4</label>
              <select class="form-control">
                <option>選択肢1</option>
                <option>選択肢2</option>
                <option>選択肢3</option>
                <option>選択肢4</option>
                <option>選択肢5</option>
              </select>
            </div>
            <button class="btn btn-default">送信</button>
          </form>
        </div>
      </div>
    </div>
```

- ラベルと入力域が横並びになるタイプ

<img width="827" alt="スクリーンショット 2017-10-27 1.33.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6a9702ba-1b00-fb66-98dc-9edb054b5d0f.png">

```html:index/html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">フォーム1</div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">項目1</label>
              <div class="col-sm-10">
                <input class="form-control" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">項目2</label>
              <div class="col-sm-10 radio">
                <label><input type="radio" name="radio">選択肢1</label>
                <label><input type="radio" name="radio">選択肢2</label>
                <label><input type="radio" name="radio">選択肢3</label>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">項目3</label>
              <div class="col-sm-10 checkbox">
                <label><input type="checkbox" name="checkbox">選択肢1</label>
                <label><input type="checkbox" name="checkbox">選択肢2</label>
                <label><input type="checkbox" name="checkbox">選択肢3</label>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">項目4</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option>選択肢1</option>
                  <option>選択肢2</option>
                  <option>選択肢3</option>
                  <option>選択肢4</option>
                  <option>選択肢5</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-default">送信</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
```

## エラーの表現

- 入力エラーがあった場合の表現のしかた
- class属性の付け外しや、要素の表示切り替えは、javascriptや使っているテンプレートエンジンの機能によって実現することになる

### 項目単位に色をつける

- `form-group`に`has-error`をつけるとラベルと入力域が赤くなる

<img width="735" alt="スクリーンショット 2017-10-30 1.36.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/bc1ead50-4255-6b40-f3da-afc89e71426f.png">
<img width="732" alt="スクリーンショット 2017-10-30 1.37.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6cf2f42d-26f8-cffe-bf22-ffb2069bb553.png">

```html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">フォーム1</div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目1</label>
              <div class="col-sm-10">
                <input class="form-control" type="text">
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目2</label>
              <div class="col-sm-10 radio">
                <label><input type="radio" name="radio">選択肢1</label>
                <label><input type="radio" name="radio">選択肢2</label>
                <label><input type="radio" name="radio">選択肢3</label>
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目3</label>
              <div class="col-sm-10 checkbox">
                <label><input type="checkbox" name="checkbox">選択肢1</label>
                <label><input type="checkbox" name="checkbox">選択肢2</label>
                <label><input type="checkbox" name="checkbox">選択肢3</label>
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目4</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option>選択肢1</option>
                  <option>選択肢2</option>
                  <option>選択肢3</option>
                  <option>選択肢4</option>
                  <option>選択肢5</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-default">送信</button>
              </div>
            </div>
          </form>
        </div>
      </div>
```

### 項目単位にメッセージの表示

- input等の入力域のしたに`text-danger`を持ったメッセージを入れる

<img width="733" alt="スクリーンショット 2017-10-30 1.43.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/6d4832cd-ecd0-9af2-9c46-4f8b3f0d196a.png">

```html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">フォーム1</div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目1</label>
              <div class="col-sm-10">
                <input class="form-control" type="text">
                <div class="text-danger">正しく入力して下さい</div>
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目2</label>
              <div class="col-sm-10 radio">
                <label><input type="radio" name="radio">選択肢1</label>
                <label><input type="radio" name="radio">選択肢2</label>
                <label><input type="radio" name="radio">選択肢3</label>
                <div class="text-danger">正しく入力して下さい</div>
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目3</label>
              <div class="col-sm-10 checkbox">
                <label><input type="checkbox" name="checkbox">選択肢1</label>
                <label><input type="checkbox" name="checkbox">選択肢2</label>
                <label><input type="checkbox" name="checkbox">選択肢3</label>
                <div class="text-danger">正しく入力して下さい</div>
              </div>
            </div>
            <div class="form-group has-error">
              <label class="col-sm-2 control-label">項目4</label>
              <div class="col-sm-10">
                <select class="form-control">
                  <option>選択肢1</option>
                  <option>選択肢2</option>
                  <option>選択肢3</option>
                  <option>選択肢4</option>
                  <option>選択肢5</option>
                </select>
                <div class="text-danger">正しく入力して下さい</div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-default">送信</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
```

### 上部にエラーメッセージを表示

<img width="733" alt="スクリーンショット 2017-10-30 1.45.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/175213/3540d9ca-04c5-3870-5569-fd43ba6eea2b.png">

```html
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">フォーム1</div>
        <div class="panel-body">
          <div class="alert alert-danger">
            <p>入力内容を確認して下さい</p>
          </div>
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">項目1</label>
              <div class="col-sm-10">
                <input class="form-control" type="text">
              </div>
            </div>
            <!-- ... -->
          </div>
        </div>
      </div>
    </div>
```

## 次回

- 続きは[こちら](https://qiita.com/ozaki25/items/90c8900faacfacf0d231)