Bootstrapでフォームを利用する方法

![フォーム.png](https://qiita-image-store.s3.amazonaws.com/0/160563/097ac956-675c-cb42-b6ed-260124aad3ed.png)


#基本的な記述方法

<form>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label>File input</label>
    <input type="file">
  </div>
  <div class="checkbox">
      <input type="checkbox"> Check me out
  </div>
  <a class="btn btn-default">Submit</a>
</form>

* 大枠をformタグで囲む
* フォームひとつひとつを"form-group"で囲む
* 入力エリアにはinputタグに"form-control"のクラスを設定

```html:qiita.rb
<form>
  <!-- Eメール入力エリア -->
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <!-- パスワード入力エリア -->
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <!-- ファイルアップロード -->
  <div class="form-group">
    <label>File input</label>
    <input type="file">
  </div>
　<!-- チェックボックス -->
  <div class="checkbox">
      <input type="checkbox"> Check me out
  </div>
  <!-- 送信ボタン -->
  <button type="submit" class="btn btn-default">Submit</button>
</form>
```

#オプション
様々なクラスを付与する事で見た目の装飾・機能追加が可能

##インライン
![inline.png](https://qiita-image-store.s3.amazonaws.com/0/160563/0dcf7963-a4da-4006-777f-9e19253f9e61.png)

* インラインで表示したい場合は、formに"form-inline"を追加

```html:qiita.rb
<form class="form-inline">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
```

###入力エリアを隙間なく横並び(インライン)表示する記述方法
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
</form>

* 横並びしたい入力エリアを"input-group"で囲む

```html:qiita.rb
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div>$</div>
      <input type="text" class="form-control" placeholder="Amount">
      <div>.00</div>
    </div>
  </div>
</form>
```

##コントロールタイプ
###テキスト
<input type="text" class="form-control">

* 基本的なテキストを入力

```html:qiita.rb
<input type="text" class="form-control">
```

###テキストエリア

* テキストよりも縦幅が広くなった入力エリア

```html:qiita.rb
<textarea class="form-control" rows="3"></textarea>
```

###チェックボタン・ラジオボタン
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    通常チェックボタン
  </label>
　<label>
    <input type="checkbox" value="" disabled>
    チェック禁止チェックボタン
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" value="option1" checked>
    初期選択状態ラジオボタン
  </label>
　<label>
    <input type="radio" name="optionsRadios"value="option2">
    通常ラジオボタン
  </label>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" value="option3" disabled>
    チェック禁止ラジオボタン
  </label>
</div>
</div>

```html:qiita.rb
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    通常チェックボタン
  </label>
　<label>
    <input type="checkbox" value="" disabled>
    チェック禁止チェックボタン
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" value="option1" checked>
    初期選択状態ラジオボタン
  </label>
　<label>
    <input type="radio" name="optionsRadios"value="option2">
    通常ラジオボタン
  </label>
  <label>
    <input type="radio" name="optionsRadios" value="option3" disabled>
    チェック禁止ラジオボタン
  </label>
</div>
```

###セレクト
####通常パターン
![select_normal.png](https://qiita-image-store.s3.amazonaws.com/0/160563/298b23d5-87b9-4554-16c6-19a7d7a9f7c1.png)

```html:qiita.rb
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
```

####複数選択
![select_multiple.png](https://qiita-image-store.s3.amazonaws.com/0/160563/ffde71e8-5b0f-93f2-0035-dbbf8474a4c7.png)

* selectタグの"multiple"を追記

```html:qiita.rb
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
```

##状態
###フォーカス
![input_focus.png](https://qiita-image-store.s3.amazonaws.com/0/160563/2630d024-7b84-3a34-6a2b-6870dbbaa26e.png)

* inputタグにid="focusedInput"を指定

```html:qiita.rb
<input class="form-control"　type="text" id="focusedInput">
```

###使用禁止

<input class="form-control" type="text" disabled>

* inputタグにdisabledを指定

```html:qiita.rb
<input class="form-control" type="text" disabled>
```

###読み専用
![read_only.png](https://qiita-image-store.s3.amazonaws.com/0/160563/374aa7c4-ec81-6415-b1bb-4b25a20a6c8b.png)

* inputタグにreadonlyを指定

```html:qiita.rb
<input class="form-control" type="text" readonly>
```

##ヘルプテキスト
<label>入力エリア</label>
<input type="text" class="form-control">
<span class="help-block">ここにヘルプテキストを記載</span>

* 入力エリアの補足文を付ける場合はヘルプテキストを利用
* ヘルプテキストにしたい文章に"help-block"のクラスを付与

```html:qiita.rb
<span class="help-block">ここにヘルプテキストを記載</span>
```

##カラー
<div class="form-group has-success">
  <input type="text" class="form-control">
</div>
<div class="form-group has-warning">
  <input type="text" class="form-control">
</div>
<div class="form-group has-error">
  <input type="text" class="form-control">
</div>

* 色を変更したいinputタグに下記のクラスで囲む

|色|使用クラス|
|:---|:---|
|緑|has-success|
|黄色|has-warning|
|赤|has-error|

```html:qiita.rb
<div class="form-group has-success">
  <input type="text" class="form-control">
</div>
<div class="form-group has-warning">
  <input type="text" class="form-control">
</div>
<div class="form-group has-error">
  <input type="text" class="form-control">
</div>
```

###アイコンをつけることも可能
![with-icon.png](https://qiita-image-store.s3.amazonaws.com/0/160563/cf3b1735-a3c6-0e61-1ef3-51153cead0a3.png)


* アイコンをつけたいinputタグを囲んでいるタグに"has-feedback"を指定
* 利用したいアイコンにクラス"form-control-feedback"を指定

```html:qiita.rb
<div class="form-group has-success has-feedback">
  <input type="text" class="form-control">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <input type="text" class="form-control">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <input type="text" class="form-control">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
```

##サイズ
<input class="form-control input-lg" type="text">
<input class="form-control" type="text">
<input class="form-control input-sm" type="text">


* サイズを変更したいinputタグに下記のクラスを付与

|サイズ|使用クラス|
|:---|:---|
|大|input-lg|
|中|何も付与しない|
|小|input-sm|

```html:qiita.rb
<input class="form-control input-lg" type="text">
<input class="form-control" type="text">
<input class="form-control input-sm" type="text">
```


#参考

* [Bootstrap公式サイト](http://getbootstrap.com/css/#forms)