• フォーム(Forms)
• フォームテキスト(Form text)
• サイジング(Sizing)
• 読み取り専用プレインテキスト(Readonly plain text)
• カラーピッカー(Color picker)
• データリスト(Datalists)
• 選択肢(Select)
• チェックボックス＆ラジオボタン(Checks & Radios)
• スイッチ(Switches)
• インラインチェック＆ラジオ(Inline check & radio)
• チェックボックスとトグルボタン(Checkbox toggle buttons)
• レンジ(Range)
• インプットグループ(Input group)
• フローティングラベル(Floating labels)
• レイアウト(Layout)
  • フォームの縦配置(Vertical form)
  • フォームの横配置(Horizontal form)
  • ラベルの横配置(Horizontal label)
• バリデーション(Validation)
  • ブラウザバリデーション(Browser validation)
  • カスタムバリデーション(Custom validation)
  • ツールチップ(Tooltips)

フォームは、ラベルに .form-label を、<input> 等のコントロールに .form-control を指定します。

<form>
  <div class="mb-2">
    <label class="form-label" for="name">Name</label>
    <input class="form-control" type="text" name="name" id="name">
  </div>
  <div class="mb-2">
    <label class="form-label" for="address">Address</label>
    <input class="form-control" type="text" name="address" id="address">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

.form-text はフォームの注釈文などのテキストを表示します。

<input type="text" class="form-control" name="name">
<div class="form-text">全角文字で入力してください。</div>

.form-control-lg は大きなフォーム、.form-control-sm は小さなフォームを表示します。

<input type="text" class="form-control form-control-lg" placeholder="Large size">
<input type="text" class="form-control" placeholder="Normal size">
<input type="text" class="form-control form-control-sm" placeholder="Small size">

.form-control-plaintext は読み取り専用のプレインテキストを表示します。

<input type="text" readonly class="form-control-plaintext" id="email" value="foo@example.com">

.form-control-color はカラーピッカーに指定します。

<input type="color" class="form-control form-control-color" name="color">

list="..." で <datalist> を指定することで、入力に応じで候補が絞られるデータリストを指定することができます。

<input class="form-control" list="states" name="state">
<datalist id="states">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

選択肢には .form-select を指定します。.form-select-lg は大き目、.form-select-sm は小さ目に表示します。

<select class="form-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

チェックボックスやラジオボタンには .form-check、.form-check-input、.form-check-label を指定します。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check_1" name="1">
  <label class="form-check-label" for="check_1">Check#1</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" id="radio_1_1" name="radio_1" value="1" checked>
  <label class="form-check-label" for="radio_1_1">Red</label>
</div>

.form-switch はスイッチスタイルのチェックボックスを表示します。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch_1" name="switch_1" checked>
  <label class="form-check-label" for="switch_1">Switch#1</label>
</div>

.form-check-inline を指定すると、チェックボックスやラジオボタンを横並びに表示します。

<div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline_checkbox_1" value="1" checked>
    <label class="form-check-label" for="inline_checkbox_1">Check#1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline_checkbox_2" value="2">
    <label class="form-check-label" for="inline_checkbox_2">Check#2</label>
  </div>
</div>

.btn-check を指定するとチェックボックスをトグルボタンとして利用することができます。On の時は少し色が濃くなります。周りにボーダーが表示されるのは On/Off ではなくフォーカスです。

<input class="btn-check" type="checkbox" id="btn_check">
<label class="btn btn-primary" for="btn_check" id="btn_check_label" style="width:5rem">Off</label>
<script>
(function() {
  document.getElementById('btn_check').addEventListener('click', function(e) {
    document.getElementById('btn_check_label').innerText = this.checked ? "On" : "Off";
  });
})();
</script>

.form-range はレンジを表示します。

<label class="form-label" for="range_1">Example range</label>
<input class="form-range" type="range" id="range_1">

.input-group 内のフォームコントロールやボタンはインプットグループとして表示されます。テキストには .input-group-text を指定します。.input-group-lg は大き目、.input-group-sm は小さ目に表示します。

<div class="col-6 mb-2">
  <div class="input-group">
    <span class="input-group-text">Search</span>
    <input class="form-control" type="text">
    <button class="btn btn-secondary">&#9166;</button>
  </div>
</div>
<div class="col-6">
  <div class="input-group input-group-sm">
    <span class="input-group-text">Search</span>
    <input class="form-control" type="text">
    <button class="btn btn-secondary">&#9166;</button>
  </div>
</div>

.form-floating は、ラベルを入力欄の内側に表示します。入力中は上部に小さく表示されます。<input> は最初に記述する必要があり、placeholder 属性が必須です。

<div class="form-floating">
  <input type="email" class="form-control" id="floating_label_1" placeholder="name@example.com">
  <label for="floating_label_1">Your name</label>
</div>

通常のラベルやフォームは横幅 100% で縦に配置されます。

<div class="mb-2">
  <label for="layoutExam1-name" class="form-label">Name</label>
  <input type="text" class="form-control" id="layoutExam1-name" name="name">
</div>
<div class="mb-2">
  <label for="layoutExam1-address" class="form-label">Address</label>
  <input type="text" class="form-control" id="layoutExam1-address" name="address">
</div>

横並びにしたい場合は .row や .col を使用します。.col-sm などを利用すると、広い画面では横並びに、スマホなどの狭い画面では縦並びにすることもできます。

<div class="row">
  <div class="col-sm">
    <label class="form-label" for="layoutExam2-name">Name</label>
    <input type="text" class="form-control" id="layoutExam2-name" name="name">
  </div>
  <div class="col-sm">
    <label class="form-label" for="layoutExam2-address">Address</label>
    <input type="text" class="form-control" id="layoutExam2-address" name="address">
  </div>
</div>

ラベルを横に配置するにも .row と .col を使用します。.col-sm-* を使用することで、スマホではラベルとコントロールが縦配置になります。ラベルは .form-label の代わりに .col-form-label や .col-form-label-{sm|lg} を使用することで、ラベルをコントロールの高さの中央に配置することができます。

<div class="row mb-3">
  <label class="col-form-label col-sm-2" for="layoutExam3-name">Name</label>
  <div class="col-sm-10"><input type="text" class="form-control" id="layoutExam3-name" name="name"></div>
</div>
<div class="row">
  <label  class="col-form-label col-sm-2"for="layoutExam3-address">Address</label>
  <div class="col-sm-10"><input type="text" class="form-control" id="layoutExam3-address" name="address"></div>
</div>

フォームバリデーションは JavaScript と組み合わせて行います。checkValidity() は required などのバリデーションチェックを行い、正しければ :valid, 誤っていれば :invalid の属性をフォームコントロールに与えます。また、フォームに .was-validated を設定すると、フォームコントロールの色が変更されると共に、正しい時は .valid-feedback のメッセージが、誤っている時は .invalid-feedback のメッセージが表示されます。ブラウザ標準のエラーメッセージが表示されないように、<form> には novalidate を指定します。下記のフォームで何も入力せずに Submit ボタンを押してみてください。

<form class="needs-validation" novalidate>
  <div class="mb-2">
    <input type="text" class="form-control" required>
    <div class="valid-feedback">Good!</div>
    <div class="invalid-feedback">Required.</div>
  </div>
  <button class="btn btn-primary">Submit</button>
</form>
<script>
(function () {
  var forms = document.querySelectorAll('.needs-validation');
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  })
})();
</script>

サーバ側でバリデーションしたり、JavaScript で独自のバリデーションを行う場合は、フォームコントロールに .is-valid または .is-invalid クラスを設定してください。下記は JavaScript で独自バリデーションを行うサンプルです。何も入力・変更しないで Submit ボタンを押してみてください。

<form id="form1" novalidate>
  <div class="row mb-2 gx-2">
    <div class="col-3">
      <input type="text" class="form-control" required value="">
      <div class="valid-feedback">Good!</div>
      <div class="invalid-feedback">Required.</div>
    </div>
    <div class="col-3">
      <input type="text" class="form-control" data-maxlen=5 value="Long Text">
      <div class="valid-feedback">Good!</div>
      <div class="invalid-feedback">Too long.</div>
    </div>
    <div class="col-3">
      <input type="text" class="form-control" data-maxnum=100 value=1000>
      <div class="valid-feedback">Good!</div>
      <div class="invalid-feedback">Too big.</div>
    </div>
    <div class="col-3">
      <input type="text" class="form-control" data-regexp="^\d{4}-\d{2}-\d{2}$" value="1999/12/31">
      <div class="valid-feedback">Good!</div>
      <div class="invalid-feedback">Invalid format.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(function () {
  var form = document.querySelector('#form1');
  form.addEventListener('submit', function(event) {
    form.querySelectorAll('.form-control').forEach(function(elm) {
      var required = elm.required;
      var maxlen = elm.getAttribute('data-maxlen');
      var maxnum = elm.getAttribute('data-maxnum');
      var regexp = elm.getAttribute('data-regexp');     
      if ((required && (elm.value.length == 0)) ||
          (maxlen && (maxlen < elm.value.length)) ||
          (maxnum && (maxnum < Number(elm.value))) ||
          (regexp && !(elm.value.match(regexp)))) {
        elm.classList.add('is-invalid');
        elm.classList.remove('is-valid');
        event.preventDefault();
        event.stopPropagation();
      } else {
        elm.classList.add('is-valid');
        elm.classList.remove('is-invalid');
      }
    });
  });
})();
</script>

.{valid|invalid}-feedback の代わりに .{valid|invalid}-tooltip を用いることで、正常・異常メッセージをツールチップとして表示することができます。親要素に position-relative を指定してください。

<form class="row" novalidate id="form-example-tooltip">
  <div class="col-4 position-relative">
    <input type="text" class="form-control is-valid" value="Mark" required>
    <div class="valid-tooltip">Good!</div>
  </div>
  <div class="col-4 position-relative">
    <input type="text" class="form-control is-invalid" value="" required>
    <div class="invalid-tooltip">Invalid</div>
  </div>
</form>