Bootstrap5 形状

Bootstrap 5 フォーム

この記事では、Bootstrap 5 でフォームを作成およびカスタマイズする方法について説明します。フォームコントロール、レイアウト、検証など、さまざまな側面について説明します。

1. フォームコントロール

Bootstrap 5 は、ユーザーフレンドリーなフォームを作成するために、様々なフォームコントロールとクラスを提供しています。

1.1 テキスト入力フィールド

.form-control クラスを <input type="text"> 要素に適用することで、標準のテキスト入力フィールドを作成できます。.form-control-lg や .form-control-sm クラスでサイズ調整も可能です。

<input type="text" class="form-control" placeholder="氏名">

1.2 テキストエリア

<textarea> 要素にも .form-control クラスを適用することで、複数行のテキスト入力エリアを作成できます。

<textarea class="form-control" placeholder="メッセージ"></textarea>

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

.form-check、.form-check-input、.form-check-label クラスを使って、統一感のあるチェックボックスとラジオボタンを作成できます。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">チェックボックス</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" id="radio1" name="radio">
  <label class="form-check-label" for="radio1">ラジオボタン</label>
</div>

1.4 セレクトボックス

<select> 要素に .form-select クラスを適用することで、スタイリッシュなドロップダウンセレクトボックスを作成できます。

<select class="form-select">
  <option selected>選択肢 1</option>
  <option value="1">選択肢 2</option>
  <option value="2">選択肢 3</option>
</select>

1.5 ファイルアップロード

<input type="file"> 要素に .form-control クラスを適用することで、ファイルアップロードコントロールを作成できます。

<input class="form-control" type="file" id="formFile">

1.6 範囲スライダー

<input type="range"> 要素に .form-range クラスを適用することで、範囲スライダーコントロールを作成できます。

<input type="range" class="form-range" id="customRange1">

2. フォームレイアウト

Bootstrap 5 のグリッドシステムとユーティリティクラスを組み合わせることで、様々なフォームレイアウトを実現できます。

2.1 基本フォーム

.form-label クラスでフォームラベルを作成し、フォームコントロールの前に配置します。.mb-3 クラスでフォームコントロールにマージンを追加します。

<div class="mb-3">
  <label for="email" class="form-label">メールアドレス</label>
  <input type="email" class="form-control" id="email">
</div>

2.2 水平フォーム

.row と .col-* クラスを使って、水平方向のフォームレイアウトを作成できます。

<div class="row mb-3">
  <label for="email" class="col-sm-3 col-form-label">メール</label>
  <div class="col-sm-9">
    <input type="email" class="form-control" id="email">
  </div>
</div>

2.3 インラインフォーム

.form-inline クラスを使用すると、全てのフォームコントロールを1行に配置できます。ただし、このクラスはレスポンシブデザインには最適化されていません。

<form class="form-inline">
  <div class="mb-3">
    <label for="name" class="sr-only">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名">
  </div>
</form>

2.4 フローティングラベル

.form-floating クラスを使うと、入力時にラベルが上部に移動するフローティングラベルを作成できます。

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="email" placeholder="[email protected]">
  <label for="email">メールアドレス</label>
</div>

3. フォーム検証

HTML5 の検証属性と Bootstrap 5 の検証スタイルを組み合わせることで、ユーザーに分かりやすいフォーム検証を提供できます。

3.1 検証状態

.is-valid と .is-invalid クラスで、フォームコントロールの検証状態を視覚的に表示できます。

<input type="text" class="form-control is-valid" id="validInput">
<input type="text" class="form-control is-invalid" id="invalidInput">

3.2 検証フィードバック

.valid-feedback と .invalid-feedback クラスで、検証成功または失敗時のメッセージを表示できます。

<div class="mb-3">
  <label for="validationInput" class="form-label">市区町村</label>
  <input type="text" class="form-control is-invalid" id="validationInput" required>
  <div class="invalid-feedback">
    市区町村を入力してください。
  </div>
</div>

4. カスタムフォーム

Bootstrap 5 のフォームは、カスタムクラス、Sass 変数、Mixin を使用してカスタマイズできます。

4.1 カスタムクラス

Bootstrap 5 が提供するカスタムクラスを使用して、フォームコントロールの色、サイズ、スタイルを変更できます。

<input type="text" class="form-control form-control-lg" placeholder=".form-control-lg">

4.2 Sass 変数

Sass 変数を変更することで、Bootstrap 5 のフォームのデフォルトスタイルを変更できます。

$form-control-color: #fff;
$form-control-bg: #000;

4.3 Mixin

Mixin を使用して、独自のフォームスタイルを作成できます。

@mixin custom-form-control {
  .form-control {
    border-color: $custom-color;
  }
}

よくある質問

Q1. Bootstrap 5 でフォームを作成するにはどうすればよいですか？

A1: <form> 要素を使用し、フォームコントロールに適切なクラスを追加します。

Q2. Bootstrap 5 でフォームを検証するにはどうすればよいですか？

A2: HTML5 の検証属性と Bootstrap 5 の検証スタイルを使用します。

Q3. Bootstrap 5 でフォームをカスタマイズするにはどうすればよいですか？

A3: カスタムクラス、Sass 変数、および Mixin を使用します。