フォームコントロールは、 Bootstrap によって自動的にいくつかのグローバルなスタイルを受け入れています：

クラス .form-control を持つ、すべての文字用の <input>、 <textarea>、<select> 要素の幅は 100% です。

Bootstrap フォーム・レイアウト

Bootstrap は、3 種類のフォーム・レイアウトを用意しています：

縦型フォーム (デフォルト)

次の例では、2つの input フィールドと、1つのチェックボックス、そして submit ボタンを持った縦型フォームを作成します：

例

<form>
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Try it Yourself »

Bootstrap インラインフォーム

インラインフォームでは、すべての要素はインラインで、左揃えで、そしてラベルが横に並びます。

注: これは、幅が少なくとも 768px のビューポート内のフォームに適用されます！

次の例では、2 つの input フィールドと、1 つのチェックボックス、そして submit ボタンを持ったインラインフォームを作成します：

例

<form class="form-inline">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Try it Yourself »

チップ: すべての input にラベルが含まれていない場合は、そのフォームによってスクリーンリーダに問題が生じます。.sr-only クラスを使用することによって、スクリーンリーダを除き、すべてのデバイスに対しラベルを非表示にすることができます：

例

<form class="form-inline">
<div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Try it Yourself »

Bootstrap 横型フォーム

横型フォームは、マークアップの量やフォームの表現の双方で、他のフォームからはかけ離れています。

チップ: 横型レイアウトのラベルとフォームコントロールを配置するには、Bootstrap の定義済みグリッドクラスを使用します。

次の例では、2 つの input フィールドと、1 つのチェックボックス、そして submit ボタンを持った横型フォームを作成します：

例

<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">Password:</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"> Remember me</label>
      </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>
</form>

Try it Yourself »

Bootstrap フォーム

Bootstrap のデフォルト設定