編集 Github

フォーム

フォームコントロールスタイル、レイアウトオプション、およびさまざまなフォームを作成するためのカスタムコンポーネントの例と使用上のガイドライン。

概要

Eメールの確認、番号の選択などの新しい入力コントロールを利用するには、すべての入力に適切なtype属性（Eメールアドレスの場合は「email」、数値情報の場合は「number」）を必ず使用してください。

これがBootstrapのフォームスタイルを示す簡単な例です。 必要なクラス、フォームのレイアウトなどに関するドキュメントを読んでください。

あなたのEメールを他の人と共有することは決してありません。 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">電子メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">あなたのEメールを他の人と共有することは決してありません。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
  選択肢1はこちら
          <span class="form-check-sign">
              <span class="check"></span>
          </span>
      </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

フォームコントロール

`、

さらに私たちの[カスタムフォーム]（＃custom-forms）を調べて、 <select>をさらにスタイルにしてください。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">電子メールアドレス</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">選択例</label>
    <select class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">複数選択の例</label>
    <select multiple class="form-control selectpicker" data-style="btn btn-link" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">テキストエリアの例</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

, スワップ その.form-control for .form-file-upload and .form-file-simple or .form-file-multiple.

<div class="form-group form-file-upload form-file-simple">
    <input type="text" class="form-control inputFileVisible" placeholder="Simple chooser...">
    <input type="file" class="inputFileHidden">
  </div>

  <div class="form-group form-file-upload form-file-multiple">
    <input type="file" multiple="" class="inputFileHidden">
    <div class="input-group">
        <input type="text" class="form-control inputFileVisible" placeholder="Single File">
        <span class="input-group-btn">
            <button type="button" class="btn btn-fab btn-round btn-primary">
                <i class="material-icons">attach_file</i>
            </button>
        </span>
    </div>
  </div>

  <div class="form-group form-file-upload form-file-multiple">
    <input type="file" multiple="" class="inputFileHidden">
    <div class="input-group">
        <input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple>
        <span class="input-group-btn">
            <button type="button" class="btn btn-fab btn-round btn-info">
                <i class="material-icons">layers</i>
            </button>
        </span>
    </div>
  </div>

読み取り専用

入力の値が変更されないようにするために、入力に readonlyブール属性を追加します。 読み取り専用入力は（無効化された入力とまったく同じように）より明るく表示されますが、標準カーソルは保持されます。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

例

<div class="form-group label-floating has-success">
    <label class="control-label">成功入力</label>
          <input type="text" value="Success" class="form-control" />
    <span class="form-control-feedback">
    <i class="material-icons">done</i>
    </span>
  </div>
<div class="form-group label-floating has-danger">
      <label class="control-label">エラー 入力</label>
        <input type="email" value="Error Input" class="form-control" />
        <span class="material-icons form-control-feedback">clear</span>
    </div>
group 
<div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
          <i class="material-icons">group</i>
      </span>
    </div>
    <input type="text" class="form-control" placeholder="With Material Icons">
  </div>
<div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fa fa-group"></i>
      </span>
    </div>
    <input type="text" class="form-control" placeholder="With Font Awesome Icons">
  </div>

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

デフォルトのチェックボックスとラジオは .form-checkの助けを借りて改良されています。両方の入力タイプのための単一のクラスで、HTML要素のレイアウトと振る舞いを改良しています。 チェックボックスはリストから1つまたは複数のオプションを選択するためのものですが、ラジオは多数の中から1つのオプションを選択するためのものです。

無効化されたチェックボックスとラジオはサポートされていますが、親の <label>の上に not-allowedカーソルを置くには、 .disabledクラスを親の .form-checkに追加する必要があります。 無効化されたクラスは、入力の状態を示すのを助けるためにテキストカラーも明るくします。

デフォルト（積み上げ）

デフォルトでは、直接の兄弟であるチェックボックスとラジオはいくつでも縦に積み重ねられ、 .form-checkで適切に間隔をあけます。

<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="">
選択肢1はこれであり、それが素晴らしい理由を含めるようにしてください
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>

<div class="form-check disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="" disabled>
オプション2は無効です
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
    </label>
</div>
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
 ラジオはオフです
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>
<div class="form-check form-check-radio">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
   ラジオがオン
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
  無線が無効になっている
        <span class="circle">
            <span class="check"></span>
        </span>
    </label>
</div>

列をなして

任意の .form-checkに .form-check-inlineを追加して、チェックボックスやラジオを同じ横の行にグループ化します。

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
    <span class="form-check-sign">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>
<div class="form-check form-check-radio form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
    <span class="circle">
        <span class="check"></span>
    </span>
  </label>
</div>

レイアウト

Bootstrapはほとんどすべてのフォームコントロールに display：blockと width：100％ を適用するので、デフォルトではフォームは垂直に積み重ねられます。 フォームごとにこのレイアウトを変更するために追加のクラスを使用できます。

フォームグリッド

私たちのグリッドクラスを使ってもっと複雑なフォームを作ることができます。 複数の列、さまざまな幅、および追加の配置オプションが必要なフォームレイアウトにこれらを使用します。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="ファーストネーム">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="苗字">
    </div>
  </div>
</form>

フォーム行

また、.rowを.form-rowに交換することもできます。これは、標準のグリッド行のバリエーションで、デフォルトの列ガターをオーバーライドして、よりコンパクトでコンパクトなレイアウトにします。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="ファーストネーム">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="苗字">
    </div>
  </div>
</form>

グリッドシステムを使用して、より複雑なレイアウトを作成することもできます。

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Eメール</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">パスワード</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">住所</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">住所 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">シティ</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-3">
      <label for="inputState">状態</label>
      <select id="inputState" class="form-control">
        <option selected>選ぶ...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2 ml-auto">
      <label for="inputZip">ジップ</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
     見てくれよ
          <span class="form-check-sign">
            <span class="check"></span>
          </span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">サインイン</button>
</form>

無効なフォーム

入力に disabledブール属性を追加して、ユーザーの操作を防ぎ、明るく見せます。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

入力に disabledブール属性を追加して、ユーザーの操作を防ぎ、明るく見せます。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">  無効な入力</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">無効な選択メニュー</label>
      <select id="disabledSelect" class="form-control">
        <option></option>
      </select>
    </div>
    <div class="form-check">
      <label class="form-check-label">
          <input class="form-check-input" type="checkbox" value="">
     チェックアウトできません
          <span class="form-check-sign">
            <span class="check"></span>
          </span>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提出する</button>
  </fieldset>
</form>

アンカー付きの警告

デフォルトでは、ブラウザは <fieldset disabled>内のすべてのネイティブフォームコントロール（ <input>、 <select>および <button>要素）を無効にし、キーボードとマウスの両方の操作を防ぎます。しかし、あなたのフォームが <a ... class="btn btn-*">要素も含んでいる場合、これらは pointer-events：noneのスタイルのみを与えられます。 [ボタンの無効状態]に関するセクション（{{site.baseurl}} / docs / {{site.docs_version}} / components / buttons /＃disabled-state）（特にアンカーのサブセクションに記載）このCSSプロパティはまだ標準化されておらず、Opera 18以下またはInternet Explorer 10では完全にはサポートされていません。キーボードユーザーがこれらのリンクにフォーカスしたりアクティブにしたりすることを妨げることはありません。安全のために、このようなリンクを無効にするにはカスタムJavaScriptを使用してください。

ブラウザ間の互換性

Bootstrapはすべてのブラウザにこれらのスタイルを適用しますが、Internet Explorer 11以下は <fieldset>の disabled属性を完全にはサポートしていません。これらのブラウザでフィールドセットを無効にするには、カスタムJavaScriptを使用してください。

ファイルブラウザ

...
画像を選択 変化する Remove 
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
    <div class="fileinput-new thumbnail img-raised">
        <img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" alt="...">
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
    <div>
        <span class="btn btn-raised btn-round btn-default btn-file">
            <span class="fileinput-new">画像を選択</span>
            <span class="fileinput-exists">変化する</span>
            <input type="file" name="..." />
        </span>
        <a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
    </div>
</div>

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.