Bootstrap4 入力ボックスグループ

Bootstrap4 入力グループ

説明:

この記事では、Bootstrap4 で入力グループを使用して、フォームの機能と外観を向上させる方法について説明します。

---

1. 入力グループとは？

入力グループ (input group) は、Bootstrap4 が提供する便利なコンポーネントです。テキストボックス、ドロップダウンリスト、ボタンなどのフォーム要素をまとめて、一体感のあるフォームを作成することができます。

入力グループを使用すると、フォーム要素の配置がよりコンパクトになり、スタイルや機能を追加することができます。

2. 基本構造

入力グループを作成するには、.input-group クラスを使用します。

.input-group コンテナ内に、まとめたいフォーム要素を配置します。


<div class="input-group">
  <input type="text" class="form-control" placeholder="キーワードを入力">
  <button class="btn btn-primary" type="button">検索</button>
</div>

3. 追加要素

3.1. 入力ボックスの前に要素を追加する

.input-group-prepend クラスを使用してコンテナを作成し、追加する要素（ボタンやテキストなど）をそのコンテナ内に配置します。


<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名">
</div>

3.2. 入力ボックスの後に要素を追加する

.input-group-append クラスを使用してコンテナを作成し、追加する要素をそのコンテナ内に配置します。


<div class="input-group">
  <input type="text" class="form-control" placeholder="金額">
  <div class="input-group-append">
    <span class="input-group-text">円</span>
  </div>
</div>

4. サイズ

入力グループのサイズを変更するには、以下のクラスを使用します。

.input-group-sm: 小型入力グループ
.input-group-lg: 大型入力グループ


<div class="input-group input-group-sm mb-3">
  <!-- 小型の入力グループ -->
</div>

<div class="input-group">
  <!-- 通常サイズの入力グループ -->
</div>

<div class="input-group input-group-lg">
  <!-- 大型入力グループ -->
</div>

5. 多重入力グループ

.input-group クラスをネストして使用することで、多重入力グループを作成することができます。


<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">https://</span>
  </div>
  <input type="text" class="form-control" placeholder="www.example.com">
  <div class="input-group-append">
    <span class="input-group-text">.jp</span>
  </div>
</div>

6. チェックボックスとラジオボタン

.input-group-text クラスを使用すると、チェックボックスやラジオボタンを入力グループに追加することができます。

また、.custom-control クラスを使用してスタイルをカスタマイズすることもできます。


<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

7. ケーススタディとサンプルコード

ここでは、様々な種類の入力グループの作成例とサンプルコードを紹介します。

ケース	サンプルコード
ボタン付き入力グループ	`<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="キーワードを入力"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button">検索</button> </div> </div>`
ドロップダウンリスト付き入力グループ	`<div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">オプション</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>選択してください...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>`
複数入力グループ	`<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div> <input type="text" class="form-control"> </div>`
チェックボックスとラジオボタン付き入力グループ	`<div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio" aria-label="Radio button for following text input"> </div> </div> <input type="text" class="form-control" aria-label="Text input with radio button"> </div>`
異なるサイズの入力グループ	`<div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"> <div class="input-group-append"> <span class="input-group-text" id="inputGroup-sizing-sm">Small</span> </div> </div>`

まとめ

この記事では、Bootstrap4 の入力グループを使用して、より美しく、使いやすいフォームを作成する方法を学びました。

---

Bootstrap4 入力グループに関するQ&A

Q1: 入力グループ内でボタンを無効にするにはどうすればよいですか？

A1: ボタンに disabled 属性を追加します。


<button class="btn btn-primary" type="button" disabled>無効なボタン</button>

Q2: 入力グループの幅を調整するにはどうすればよいですか？

A2: 入力グループを含む要素に CSS の width プロパティを設定します。


.input-group-container {
  width: 50%;
}

Q3: 入力グループのスタイルをカスタマイズするにはどうすればよいですか？

A3: 入力グループのクラスをターゲットにした CSS ルールを作成します。または、独自のクラスを作成し、必要なスタイルを適用します。


/* 入力グループの背景色を変更 */
.input-group {
  background-color: #f2f2f2;
}

/* カスタムクラスを作成 */
.my-custom-input-group {
  border: 2px solid blue;
}