フォーム

デフォルトセッティング

フォームコントロールは自動的にスタイリングされます。
.form-control クラスのすべてのコントロール、 <input><textarea> 、および <select> の幅は100%となります。

フォームレイアウト

Bootstrapには3種類のフォームレイアウトがあります。

  • 垂直(デフォルト)
  • インライン
  • 水平

3つのフォームレイアウトの標準ルールは以下です。

  • <div class="form-group"> でラベルとフォームコントロールを囲います。
  • すべてのコントロール <input><textarea> 、および <select> 要素に .form-control クラスを追加します。

垂直フォーム

この例では、2つの入力フィールド、1つのチェックボックス、および送信ボタンを持つ垂直型のフォームを作成しました。

<form>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">パスワード:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> パスワードを保存</label>
  </div>
  <button type="submit" class="btn btn-default">送信</button>
</form>

インラインフォーム

インライン形式では、すべての要素が左揃えで並びます。
注: これは、768ピクセル以上のビューポート内のフォームにのみ適用されます。
インラインフォームでは .form-inline<form> 要素に追加します。
次の例では、2つの入力フィールド、1つのチェックボックス、および送信ボタンを持つインラインフォームを作成します。

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">パスワード:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> パスワードを保存</label>
  </div>
  <button type="submit" class="btn btn-default">送信</button>
</form>

ヒント: コントロールにラベルを付ける必要がない場合、 .sr-only クラスを使用すると、スクリーンリーダー以外のすべてのデバイスのラベルを非表示にすることができます。

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">パスワード:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> パスワードを保存</label>
  </div>
  <button type="submit" class="btn btn-default">送信</button>
</form>

水平フォーム

水平型は、 <form> 要素に .form-horizo​​ntal クラスを追加し、すべての <label> 要素に .control-label クラスを追加します。
ヒント: Bootstrapの定義済みのグリッドクラスを使用して、ラベルやフォームコントロールのグループを水平方向のレイアウトに揃えます。
次の例では、2つの入力フィールド、1つのチェックボックス、および送信ボタンを持つ水平型フォームを作成します。

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">パスワード:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> パスワードを保存</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">送信</button>
    </div>
  </div>
</form>