Bootstrap3におけるFormに関して

ファガイです。

本日は、Bootstrap3におけるFormのコーディングに関してまとめようかと思います。

基本的な話。

まずはミニマムな所から。知ってないと困る点。

input,select,textarea要素等にはform-controlというクラス名を付ける必要があります。
labelにはcontrol-labelというクラス名を付ける必要があります。

とりあえずこれだけはまず抑えましょう。分かってないとアウトです。

基本例

基本の例です。これはBootstrap公式に載っているものを少し減らして、一部だけ日本語に変えてます。

ここで下のソースを確認出来ます。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="メールアドレスを入力">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワード">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">送信</button>
</form>

form-groupに関して

form-groupは項目と内容を合わせたもののくくりとして親に設定します。
色々まとめてグループ化するわけではなく、個々にセットします。

ただ、先程のソースにあるchekboxのようにチェックする項目であればcheckboxクラスでくくります。(ちなみに、ラジオボタンならradioです。)

フォーム自体を取りまとめるクラス

これは２つしか無いです。form-horizontalか、form-inlineです。
基本的にこのクラス名は親元のform要素につけます。

この２つのクラスを解説すると

form-horizontal

主に常用されるであろうクラスです。

よくあるログインフォームみたいな左側に項目、右側にinputをつける際に利用されます。このクラスをつけるとcontrol-labelが右寄せになったり、form-group等に影響があります。

また、この要素を指定するとform-groupにrowクラスを同様の機能が付与されます。なのでrowクラスを別途記述する必要はありません。なお、付けてしまうとずれます。

ここで下のソースを確認出来ます。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">メールアドレス</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="メールアドレス">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-xs-2 control-label">パスワード</label>
    <div class="col-xs-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="パスワード">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">サインイン</button>
    </div>
  </div>
</form>

公式のサンプルではcol-sm-で書かれてますが、col-xs-を使う方が良いと思います。理由としては、xsでの指定をしておくとノンレスポンシブにすることが出来るためです。

form-inline

すべてのフォームがインラインで表示されます。

これは使う箇所は限られるでしょう。

たまに使える所がありますがちょっと特殊な場合だけですね。

チェックボックスとラジオボタン

軽く解説はしていましたがチェックボックスとラジオボタンに関してです。

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    オプション１
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    オプション２(無効)
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    オプション１
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    オプション２
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    オプション３(無効)
  </label>
</div>

こんな感じですね。そもそも公式に載ってる情報ですが。

また、横に並べたい時があるかと思います。そんな時にはdivを無くして、labelに対してcheckbox-inlineやradio-inlineを適用します。

一応qiitaの方にインラインでの書き方書いておきました。
bootstrap3で横並びのボックスを実現する方法

まとめ

はっきり言うと、この記事を作っててform-horizontalの際にform-groupがrowクラスの意味を果たすことを知らずにいました。
やっぱり知らないことに挑戦してアウトプットすることは大事ですね。

ではでは。