Bootstrapでフォームをデザインする

Bootstrapでフォームをデザインするには、”form-control”をclassに追加します。

参考ページ：forms

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

フォームのグループ化

フォームをグループ化したいときは、”form-group”を使います。

<div class="form-group">
	<label for="inputtext">テキスト入力</label>
	<input type="text" class="form-control" id="inputtext"></input>
</div>

フォームをインラインで表示

フォームをインラインで表示させたいときは、”form-inline”を使います。

<form class="form-inline">
	<div class="form-group">
		<label for="inputtext">テキスト入力</label>
		<input type="text" class="form-control" id="inputtext"></input>
	</div>
</form>

一応、form要素を使用しないでもインラインでフォームを表示できます。

<div class="form-group form-inline">
	<label for="inputtext">テキスト入力</label>
	<input type="text" class="form-control" id="inputtext"></input>
</div>

フォームの位置を合わせる

ラベルとフォーム等のグループの位置を合わせる場合、”form-horizontal”を使います。

またラベルとフォームをグリッド（col-md-数字またcol-sm-数字等）を使い幅を揃えることができます。下の例では、label要素にcol-md-3、div要素にcol-md-9（inputに直接設定しても反映されないのでdivを利用）と設定してします。

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-md-3 control-label" for="inputtext">ユーザー名</label>
		<div class="col-md-9">
			<input type="text" class="form-control" id="inputtext"></input>
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-3 control-label" for="inputtext">パスワード</label>
		<div class="col-md-9">
			<input type="password" class="form-control" id="inputtext"></input>
		</div>
	</div>
</form>