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を利用するメリットです。
とはいえ、横幅が常に最大に伸びてしまったり、選択が常に有効になってしまったりと、デフォルトの状態です。
次回は、そのあたりのカスタマイズ方法を見ていきたいと思います。