CSS STUDIO

inputグループ

テキスト形式の<input>の前後または両側に、テキストまたはボタンを追加することでフォーム要素を拡張します。 単一の.form-controlの前または後ろに要素を追加するために、 .input-groupと.input-group-addonを使用します。

テキスト形式の<input>のみ対象

WebKitブラウザでは完全なスタイルで表示する事ができないため、<select>要素への使用は避けてください。

あるケースにおいてrows属性への配慮がされていないため、<textarea>要素への使用は避けてください。

inputグループ内のツールチップとポップオーバーに必要とされる特別な設定
.input-group内の要素にツールチップまたはポップオーバーを使用している場合は、 副作用(ツールチップ、またはポップオーバーがトリガされた際の要素の幅の間延び/角丸の喪失のような)を避けるためにcontainer: 'body'オプションを指定する必要があります。

他のコンポーネントと混ぜないでください
inputグループと、直接フォームグループまたはグリッドカラムを混ぜないでください。 代わりに、フォームグループまたはgirdに関係する要素の中にinputグループを入れて、入れ子の状態にしてください。

常にラベルを付けること
もし各inputにラベルが含まれていないと、そのフォームでのスクリーンリーダーによる読み取りが困難になります。 これらのinputグループのために、ラベルまたはその役割を果たす機能を付けることで、 支援技術にそれが伝わるようにしてください。

適切な技術が使われて(<label>要素は.sr-onlyクラスを使用することで非表示にされ、 他にaria-label、aria-labelledby、aria-describedby、title、placeholderを使用します)、 伝えられるべき付加情報は実装したインターフェースのウィジェットによって様々なものになります。 このセクション内の例で、いくつかの提案と特有のアプローチを紹介します。

基本的な例

inputのいずれかの側に、1つの付属要素またはボタンを配置します。 inputの両側に1つずつ配置しても構いません。

  • 片側への複数の付属要素の配置はサポートされません。
  • 1つのinputグループ内への複数のform-controlの配置はサポートされません。
@

@example.com

$ .00 
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

サイズ変更

.input-group自身に連係するフォームのサイズ変更クラスを追加すると、 内部の各要素にサイズ変更クラスを繰り返し指定することなく、自動的にサイズ変更が行われます。

@

@

@ 
<form class="bs-example bs-example-form" data-example-id="input-group-sizing">
  <div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
  </div>
  <br>
  <div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
  </div>
  <br>
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
  </div>
</form>

付属のチェックボックスとラジオボタン

テキストの代わりに、inputの付属部分の内部に、チェックボックスまたはラジオボタンを配置します。 

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

付属のボタン

inputグループ内でボタンは他とは少し異なる部分があり、1階層余分に入れ子が必要になります。 .input-group-addonの代わりに、ボタンを囲うのに.input-group-btnを使用する必要があります。 ブラウザのデフォルトのスタイルが上書き不可であるため、必要になります。 

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ドロップダウン付きのボタン 

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

分割ボタン 

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

 Back to top

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。