BootStrapのFormについて

前回、Bootstrapにおけるグリッドシステムについてエントリーしました。

グリッドシステムについて

次にBootstrapのフォームについてなんですが、書き方にいろいろパターンがあり、通常とちょっと違ったりします。

今回は整理の意味もこめてBootstrapにおけるフォームについてエントリーします。

なお、BootstrapのテーマとしてFlat UIを使っています。

 

解説

フォームのレイアウトでは

の2種類あります。

一般的に「お問い合わせ」「登録」などで使われるのが「水平フォーム」になります。

表示領域の幅に応じて、ラベルとフォーム部品を水平に並べるフォームです。

今回は水平フォームをメインに解説していきます。

まずは、サンプルのdemoページをご覧ください。

[demo]

このソースコードは以下のようになります。

<form class="form-horizontal" style="margin-top: 50px;">

  <div class="form-group">
  <label class="col-sm-2 control-label" for="InputName">氏名</label>
  <div class="col-sm-10">
  <input type="text" class="form-control" id="InputName" placeholder="氏名">
  <!--/.col-sm-10---></div>
  <!--/form-group--></div>

  <div class="form-group">
  <label class="col-sm-2 control-label" for="InputEmail">メール・アドレス</label>
  <div class="col-sm-10">
  <input type="email" class="form-control" id="InputEmail" placeholder="メール・アドレス">
  </div>
  <!--/form-group--></div>

  <div class="form-group">
  <label class="col-sm-2 control-label" for="InputPassword">パスワード</label>
  <div class="col-sm-10">
  <input type="password" class="form-control" id="InputPassword" placeholder="パスワード">
  </div>
  <!--/form-group--></div>

  <div class="form-group">
  <label class="col-sm-2 control-label" for="InputSelect">選択</label>
  <div class="col-sm-10">
  <select data-toggle="select" class="form-control select select-default" id="InputSelect">
  <option>選択肢１</option>
  <option>選択肢２</option>
  <option>選択肢３</option>
  </select>
  </div>
  <!--/form-group--></div>

  <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <div class="form-group">
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5a">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5a" required checked> 1
  </label>
  </div>
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5b">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5b" required > 2
  </label>
  </div>
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5c">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5c" required > 3
  </label>
  </div>
  </div>
  </div>
  <!--/form-group--></div>

  <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-primary btn-block">送信</button>
  </div>
  <!--/form-group--></div>

</form>

上記のソースコードについて解説していきます。

解説は以下のような流れでしていきます。

【1】テキスト系フォーム（type属性：text、email、password）

【2】チェックボックス／ラジオボタン

【3】インラインチェックボックス/インラインラジオボタン

 

【1】テキスト系フォーム（type属性：text、email、password）

   :
  <div class="form-group">
    <label class="col-sm-2 control-label" for="InputName">氏名</label>
    <div class="col-sm-10">
    <input type="text" class="form-control" id="InputName" placeholder="氏名">
    <!--/.col-sm-10---></div>
  <!--/form-group--></div>
  ：

 

【2】チェックボックス／ラジオボタン

:
  <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <div class="form-group">
  <div class="checkbox">
  <label class="checkbox" for="checkbox5a">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5a" required checked> 1
  </label>
  </div>
  <div class="checkbox">
  <label class="checkbox" for="checkbox5b">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5b" required > 2
  </label>
  </div>
  <div class="checkbox">
  <label class="checkbox" for="checkbox5c">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5c" required > 3
  </label>
  </div>
  </div>
  </div>
  <!--/form-group--></div>
:

 

【3】インラインチェックボックス/インラインラジオボタン

:
<div class="form-group">
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5a">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5a" required checked> 1
  </label>
  </div>
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5b">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5b" required > 2
  </label>
  </div>
  <div class="checkbox-inline">
  <label class="checkbox" for="checkbox5c">
  <input type="checkbox" data-toggle="checkbox" value="" id="checkbox5c" required > 3
  </label>
  </div>
  </div>
  </div>
<!--/form-group--></div>
:

 

フォームグループサイズ

フォームのサイズを .form-group-sm、 .form-group-lg 指定することで標準より小さくしたり大きく表示することができます。

 

標準より小さくする

  :
  <div class="form-group form-group-sm">
  <label class="col-sm-2 control-label" for="InputName">氏名</label>
  <div class="col-sm-10">
  <input type="text" class="form-control" id="InputName" placeholder="氏名">
  <!--/.col-sm-10---></div>
  <!--/form-group--></div>
  :

 

標準より大きくする

  :
  <div class="form-group form-group-lg">
  <label class="col-sm-2 control-label" for="InputName">氏名</label>
  <div class="col-sm-10">
  <input type="text" class="form-control" id="InputName" placeholder="氏名">
  <!--/.col-sm-10---></div>
  <!--/form-group--></div>
  :

BootStrapにおけるフォームのコーディングの仕方については以上です。

 

-周辺知識