Bootstrap Form おさらい


BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。
結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。

###事前に知っておきたい

Formをいじるまえに知っておきたいこととしては、

- レイアウトにより（inline, horizontal）、マークアップが異なる。
- text系(input,textarea,select)と、その他のものは扱いが違う。
- horizontalではform-groupがrowと同じ概念になる（なので要素をcol-xで分割）

の３つ。

私は、いろいろな差をBootstrapが吸収してくれるはずという先入観により、遠回りをしました。

###素の状態

container以外は何もbootstrapの要素はない。

```html
<div class="container">
	<form>
		<label>name</label>
		<input type="text" name="email">
		<label>password</label>
		<input type="text" name="password">
		<input type="checkbox">remember
		<button type="submit">ログイン</button>
	</form>
</div>
```

これは、下記のようにレンダリングされる。

![form01](http://www.bluecode.jp/qiita/form01.png)

素の状態です。

###Bootstrapとしての基本形

Bootstrapで基本的なformを作る際、

- text系はlabelと一緒に\<div class="form-group">で囲む。
- text系はclass="form-control"を定義する。
- checkbox,radiobutton,submit等はform-groupでは囲まない(horizontalでは囲む）。

というのがある。こんな感じ。

```html
<div class="container">
	<form>
		<div class="form-group">
			<label>name</label>
			<input type="text" name="email" class="form-control">
		</div>
		<div class="form-group">
			<label>password</label>
			<input type="text" name="password" class="form-control">
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox">remember
			</label>
		</div>
		<button type="submit">ログイン</button>
	</form>
</div>
```

さらに、

* checkboxは\<div class="checkbox">で囲む。
* checkboxは\<lavel>で囲む（うーん）。これ入れないと位置がずれる（インデントの位置をlabelと同じにする）。

などに留意する必要がある。

これは、このようにレンダリングされます。

![form03](http://www.bluecode.jp/qiita/form03.png)

多くの場合、これで事足ります。text系は、with=100%になる。

ちなみに、

```html

<div class="container">
	<form>
		<div class="form-group">
			<label>name</label>
			<input type="text" name="email">
		</div>
		<div class="form-group">
			<label>password</label>
			<input type="text" name="password">
		</div>
		<div class="checkbox">
			<!-- <label> -->
				<input type="checkbox">remember
			<!-- </label> -->
		</div>
		<button type="submit">ログイン</button>
	</form>
</div>
```

このように.form-controlを設定せず、checkboxに\<label>を定義しないと、

![form02](http://www.bluecode.jp/qiita/form02.png)

と、グチャグチャになってしまいます。

###基本形におけるinputサイズの設定

通常？はsizeですが、どうやらsizeは無視されるようです。sytle="width:200px;"は効きます。
めんどいので、inline styleでもいいのですが、Bootstrapらしくcolumnで定義してみます。

columnを使うにはrowが必要なので、rowを適切な箇所に定義します。

例えば、

```html
<div class="container">
	<form>
		<div class="form-group">
			<label>name</label>
			<div class="row">
				<div class="col-xs-4">
					<input type="text" name="email" class="form-control" size="30">
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="row">
				<div class="col-xs-2">
					<label>password</label>
				</div>
				<div class="col-xs-4">
					<input type="text" name="password" class="form-control">
				</div>
			</div>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox">remember
			</label>
		</div>
		<button type="submit" class="btn btn-default">ログイン</button>
	</form>
</div>
```

emailの方は、単にinputのサイズを変えるパターン。これは、こうなる。

passwordの方は、labelとinput等を並べる方法。ただ、高さ等が合わない。。これは、horizontalで解決する方が早い。

縦のサイズは.input-smで小さくなる。

![form04](http://www.bluecode.jp/qiita/form04.png)

正直、horizontalとかではない普通のinput等の制御はレスポンシブとかなければinline styleがいいのでは？という結論。

###radio, checkbox

上記の例では、rememberという、1行で収まるパターンだった。が、普通は、性別で男女を聞くという複数のパターンとなる。
これが、またまた厄介である。

結論から言えば、bootstrapのスタイルだけではどうしようもなく、\<p>やら\<b>やら、一般のタグと組み合わせてスタイルを整えることになる。
例えばこんな感じ。ただ、これはボタンが縦並びになる。通常は横並びにしたい。

```html
<p><b>性別</b></p>
<div class="radio">
	<label>
		<input type="radio" name="gender" value="man"><b>男</b>
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="gender" value="woman"><b>女</b>
	</label>
</div>
```

横並びにするにはradio-inlineなどと-inlineをつける。checkboxも基本同じ。

```html
<p><b>性別</b></p>
<div class="radio-inline">
	<label>
		<input type="radio" name="gender" value="man"><b>男</b>
	</label>
</div>
<div class="radio-inline">
	<label>
		<input type="radio" name="gender" value="woman"><b>女</b>
	</label>
</div>
```

###そして.form-horizontal

rowを使わなくても、横並び、サイズの調整は.form-horizontalを使えば簡単にできる。

```html
<div class="container">
	<form class="form-horizontal">
		<div class="form-group">
			<label class="control-label col-xs-2">name</label>
			<div class="col-xs-5">
				<input type="text" name="name" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-xs-2">password</label>
			<div class="col-xs-5">
				<input type="text" name="password" class="form-control">
			</div>
		</div>
		<div class="form-group">
			<div class="col-xs-offset-2 col-xs-10">
				<div class="checkbox">
					<label>
						<input type="checkbox">remember
					</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-xs-offset-2 col-xs-10">
				<button type="submit" class="btn btn-default">送信</button>
			</div>
		</div>
	</form>
</div>
```

一見複雑に見えるが、\<div class="form-group">を\<div class="row">だと思えば、なんでいちいちdivで囲まなければいけないかなど、理解し易い。

こうなる。

![form05](http://www.bluecode.jp/qiita/form05.png)

###いちおう.form-inline

横並びにしたい場合は、\<form class="form-inline>とする。

```html
<div class="container">
	<form class="form-inline">
		<div class="form-group">
			<input type="text" name="name" class="form-control">
		</div>

		<div class="form-group">
			<input type="text" name="password" class="form-control">
		</div>

		<div class="checkbox">
			<label>
				<input type="checkbox">remember
			</label>
		</div>

		<button type="submit" class="btn btn-default">送信</button>
		
	</form>
</div>
```
これはこうなる。

![form06](http://www.bluecode.jp/qiita/form06.png)

inlineでテキストボックスのサイズはどう変えるのか？そのうち試す。まあ、inlineなので、inline stypeかな。

###テキストボックスの縦サイズ

Bootstrapのテキストボックスはちとでかい。
テキストボックスの縦サイズは、.input-smで小さくなる。