Twitter Bootstrap 3 の基本　フォームのサンプル

HTMLのフォームタグというのは、多種多様なログイン画面や登録画面で使用されています。
今回はこのフォームタグをBootstrapを使って表示するとどのようにUIに変化があるのかをみていきたいと思います。

フォームのサンプル

では早速、様々なフォームタグにBootstrapクラスを当てはめてみましょう。
(※ソースコードが長くなってきたので、bodyタグ内のソースを抜粋しています。)

<div class="container-fluid">
	<h1>BootStrapの練習です。</h1>
	名前：
	<input type="text" class="form-control" placeholder="名前を入力してください">
	趣味：
	<textarea class="form-control" rows="3">趣味を入力してください</textarea>
	好きな果物：
	<div class="checkbox">
		<label><input type="checkbox" value="apple">リンゴ</label>
		<label><input type="checkbox" value="banana">バナナ</label>
		<label><input type="checkbox" value="orange">みかん</label>
	</div>
	きらいな果物：
	<div class="radio">
		<label><input type="radio" value="apple">リンゴ</label>
		<label><input type="radio" value="banana">バナナ</label>
		<label><input type="radio" value="orange">みかん</label>
	</div>
	<br>好きな野菜：
	<select class="form-control">
		<option>人参</option>
		<option>キャベツ</option>
		<option>ピーマン</option>
	</select>
	きらいな野菜：
	<select multiple class="form-control">
		<option>人参</option>
		<option>キャベツ</option>
		<option>ピーマン</option>
	</select>
</div><!-- /container -->

以下のような表示になります。

殆ど普通のフォームと変わりませんが、例えばアクティブにしたフォームが青くハイライトされたり、枠にradiusが効いていたり、ボタンとラベルの幅がちょうどいいサイズで取られていたり・・と、細かい部分ではありますが、見やすいUIになっています。
これを実現するためにやっていることは、チェックボックスとラジオボタンは各々「checkbox」「radio」クラスを付与したdivタグで括り、それ以外は「form-control」クラスを付与しているというだけです。

まとめ

今回見てきたように、ほぼ現状のフォームタグそのままに、簡単にフォームの整形が行えるというのがBootstrapを利用するメリットです。
とはいえ、横幅が常に最大に伸びてしまったり、選択が常に有効になってしまったりと、デフォルトの状態です。
次回は、そのあたりのカスタマイズ方法を見ていきたいと思います。