フォーム

デフォルトセッティング

フォームコントロールは自動的にスタイリングされます。
.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-horizontal クラスを追加し、すべての <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>