概要

こちらのページに記載した公式ドキュメントのうち、フォーム関連の Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS/Forms です。JavaScript には依存せずに動作します。

標準的なレイアウト

<div class="container"></div> に含めて使用します。まとまりごとに form-group で囲います。

<form>
  <!-- 一行入力 -->
  <div class="form-group">
    <label for="id_1" class="control-label">一行入力</label>
    <input type="text" class="form-control" id="id_1" placeholder="一行入力">
  </div>

  <!-- 固定された hidden 項目 -->
  <div class="form-group">
    <label for="id_2" class="control-label">固定された項目</label>
    <p class="form-control-static" style="background: #fafafa">固定値 (hidden はなくてもよい)</p>
    <input type="hidden" id="id_2" value="固定値">
  </div>

  <!-- テキストエリア -->
  <div class="form-group">
    <label for="id_3" class="control-label">テキストエリア</label>
    <textarea class="form-control" id="id_3" rows="3" placeholder="テキストエリア"></textarea>
    <p class="help-block">※ここに補足情報</p>
  </div>

  <!-- チェックボックス -->
  <div class="form-group">
    <label class="control-label">チェックボックス</p>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        項目 1
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        項目 2
      </label>
    </div>
  </div>

  <!-- インラインチェックボックス -->
  <div class="form-group">
    <label class="control-label">インラインチェックボックス</p>
    <label class="checkbox-inline">
      <input type="checkbox" value="">
      項目 1
    </label>
    <label class="checkbox-inline disabled">
      <input type="checkbox" value="" disabled>
      項目 2
    </label>
  </div>

  <!-- ラジオボタン -->
  <div class="form-group">
    <label class="control-label">ラジオボタン</p>
    <div class="radio">
      <label>
        <input type="radio" name="myradio" id="radio_01" value="1" checked>
        選択肢 1
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="myradio" id="radio_02" value="2">
        選択肢 2
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="myradio" id="radio_03" value="3" disabled>
        選択肢 3
      </label>
    </div>
  </div>

  <!-- インラインラジオボタン -->
  <div class="form-group">
    <label class="control-label">インラインラジオボタン</p>
    <label class="radio-inline">
      <input type="radio" name="imyradio" id="radio_11" value="1" checked>
      選択肢 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="imyradio" id="radio_12" value="2">
      選択肢 2
    </label>
    <label class="radio-inline disabled">
      <input type="radio" name="imyradio" id="radio_13" value="3" disabled>
      選択肢 3
    </label>
  </div>

  <!-- ボタン -->
  <button type="submit" class="btn btn-primary">送信</button>
  <button type="reset" class="btn btn-default">キャンセル</button>
</form>

コントロールのサイズを変更したい場合は class に input-sm または input-lg を追加します。

class="form-control input-lg"
class="form-control input-sm"
class="form-control-static input-lg"
class="form-control-static input-sm"

ボタンのサイズを変更したい場合は以下のようにします。

class="btn btn-default btn-xs"
class="btn btn-default btn-sm" (input-sm と同じサイズ)
class="btn btn-default btn-lg" (input-lg と同じサイズ)
class="btn btn-default btn-block" (画面幅一杯)

「リンクのような見栄えの button」および「ボタンのような見栄えの a」を作成することもできます。

<button class="btn-link">button-tag</button>
<a href="#" class="btn btn-default">a-tag</a>

フォームの色を変化させて強調表示するためには以下のようにします。エラーがあった場合などに使用します。

<form>
  <div class="form-group has-error">
    <label class="control-label">入力エラーあり</label>
    <input type="text" class="form-control" placeholder="入力エラーあり">
  </div>

  <div class="form-group has-success">
    <label class="control-label">入力エラーなし</label>
    <input type="text" class="form-control" placeholder="入力エラーなし">
  </div>

  <div class="form-group has-warning">
    <label class="control-label">入力エラーの可能性</label>
    <input type="text" class="form-control" placeholder="入力エラーの可能性">
  </div>
</form>

入力フォームとボタンなどを一行に連結表示するためには以下のようにします。input-group-sm または input-group-lg を input-group に加えて指定すると全体のサイズを変更できます。

<form>
  <div class="input-group">

    <span class="input-group-addon">
      <input type="checkbox">
    </span>

    <span class="input-group-addon">&yen;</span>

    <input type="text" class="form-control">

    <span class="input-group-btn">
      <button type="submit" class="btn btn-primary">検索</button>
    </span>
  </div>
</form>

インラインフォームレイアウト

<form class="form-inline"></form> とすると、Small 以上 (768px 以上) の画面幅においてはインラインで一行表示されるようになります。

<form class="form-inline">

  <div class="form-group">
    <label class="control-label">Extra Small では一段組み</label>
    <input type="text" class="form-control" placeholder="Extra Small では一段組み">
  </div>

  <button type="submit" class="btn btn-primary">送信</button>
  <button type="reset" class="btn btn-default">キャンセル</button>

</form>

水平フォームレイアウト

<form class="form-horizontal"></form> とすると、その内部における form-group はグリッドレイアウトにおける row と同じように一行を表現するようになります。control-label を指定しているため以下の例では 1 列目が右寄せになります。

<form class="form-horizontal">

  <div class="form-group">
    <label class="col-sm-4 control-label">Extra Small では一段組み</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" placeholder="Extra Small では一段組み">
    </div>
  </div>

  <div class="col-sm-offset-4 col-sm-8">
    <button type="submit" class="btn btn-primary">送信</button>
    <button type="reset" class="btn btn-default">キャンセル</button>
  </div>

</form>