Bootstrap5 入力グループ
使用できるのは.input-groupクラスを使用して、フォームの入力ボックスにアイコンやテキスト、ボタンなどのスタイルを追加できます。
.input-group-textクラスを使用してテキストのスタイルを設定します。。
Bootstrap 例
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
</form>
試してみる »
入力ボックスのサイズ
使用する.input-group-smクラスは小さい入力ボックスを設定し、.input-group-lgクラスは大きい入力ボックスを設定します：
Bootstrap 例
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
<span class="input-group-text">Large</span>
<input type="text" class="form-control">
</div>
試してみる »
複数の入力ボックスとテキスト
Bootstrap 例
<!--複数の入力ボックス-->
<div class="input-group mb-3">
<span class="input-group-text">Person</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<!--複数のテキスト情報-->
<div class="input-group mb-3">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
<input type="text" class="form-control">
</div>
試してみる »
チェックボックスとラジオボタン
テキスト情報はチェックボックスとラジオボタンで置き換えることができます：
Bootstrap 例
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="サンプル">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
試してみる »
入力ボックスにボタングループを追加
Bootstrap 例
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Something clever..">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
試してみる »
ドロップダウンメニューの設定
入力ボックスにドロップダウンメニューを追加する場合、.dropdown クラスを使用する必要はありません。
Bootstrap 例
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ウェブサイトを選択</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
<li><a class="dropdown-item" href="https://www.example.com">サンプル</a></li>
<li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
</ul>
<input type="text" class="form-control" placeholder="ウェブサイトアドレス">
</div>
試してみる »
入力グループのラベル
入力グループでは、入力グループの外側の label を使用してラベルを設定します。ラベルの for 属性は入力グループの id と対応させる必要があり、ラベルをクリックすると入力ボックスにフォーカスできます：
Bootstrap 例
<form>
<label for="demo">ここにメールアドレスを入力してください:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<span class="input-group-text">@example.com</span>
</div>
</form>
試してみる »