Bootstrap 3.3.7 フォームとGUIコンポーネント
Bootstrapにはフォーム向けの独自デザインも用意されている。フォームの基本コントロールと送信に使うボタンについて説明する。
フォームに関する基本クラス
ユーザー入力の基本はフォームである。フォームはHTMLの<form>タグと各種コントロールタグを組み合わせて作る。Bootstrapでもこの基本は変わらないが、独自の表示スタイルを利用できる。
<form>
<div class="form-group">
<label for="foo">ラベル</label>
<input type="text" class="form-control" id="foo">
</div>
</form>
class="form-group"
フォームの各コントロールは、通常<div class="form-group">でまとめる。これによりBootstrapが1つの入力項目として配置する。
class="form-control"
テキスト入力系コントロールと<select>にはclass="form-control"を付ける。<input type="text">、<input type="password">、<textarea>、<select>などにBootstrapのフォームスタイルが適用される。
<form>
<div class="form-group">
<label for="txt1">Text:</label>
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<label for="pw1">Password:</label>
<input type="password" class="form-control" id="pw1">
</div>
<div class="form-group">
<label for="ta1">Text Area:</label>
<textarea class="form-control" id="ta1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="sl1">Select:</label>
<select class="form-control" id="sl1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn" value="Click">
</div>
</form>
チェックボックスとラジオボタン
チェックボックスとラジオボタンはform-groupとform-controlを使わず、専用のクラスを使う。
チェックボックス
<div class="checkbox">
<label for="foo">
<input type="checkbox" id="foo">
ラベル
</label>
</div>
ラジオボタン
<div class="radio">
<label for="foo">
<input type="radio" id="foo">
ラベル
</label>
</div>
実際には<label>を使い、ラベルと入力コントロールをまとめて扱うことが多い。
disabledクラス
チェックボックスやラジオボタンを使えない状態にするには、入力タグにdisabled属性を設定し、外側の<div>にdisabledクラスを追加する。すると、マウスポインタが使用不可を示す表示になる。
<div class="checkbox disabled">
<label for="cb2">
<input type="checkbox" id="cb2" disabled>
Check Box
</label>
</div>
インラインフォーム
フォームは通常縦に並ぶ。入力項目が少なく横に並べたい場合は、インラインフォームを使う。
<form class="form-inline">
コントロールの書き方は通常のフォームと同じで、form-groupやform-controlを指定する。横幅が狭くなると、Bootstrapが自動で縦並びに切り替える。