form-check-label

bootstrap5.css

bootstrap5.css
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}
bootstrap5.css
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: #198754;
}
bootstrap5.css
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}

html bootstrap5 Sample

js トグルボタンでdivコンテンツに様々な要素を追加する:dropdown-toggleとdropdown-menu


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="mb-3">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="mb-3">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <!-- form-checkはチェックボックス -->
        <!-- form-check-labelはチェックの状態に応じたラベルスタイルになる-->
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

フォームの基本要素:form-control


キャリアメールは届かない場合があります。
  <form>
    <!-- Bootstrap は display: block と width: 100%をほぼすべてのフォームコントロールに適用しているので、フォームはデフォルトでは垂直に並びます。 -->
    <!-- inputタグに、form-controlが設定する -->
    <div class="mb-3">
      <label for="email1">メールアドレス</label>
      <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="mb-3">
      <label for="password1">パスワード</label>
      <input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
    </div>
    <div class="mb-3">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-select" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="mb-3">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-select" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="form-control-file" id="file1">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="checkbox01">
      <label class="form-check-label" for="">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>

フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket


formタイトルにfont-awesome

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

チェックボックスを横並びに変更する:form-check-inline


  <!-- 同じ水平行にあるチェックボックスやラジオをグループ化する -->
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio1" value="option1" />
    <label class="form-check-label" for="Radio1">1を選択</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio2" value="option2" />
    <label class="form-check-label" for="Radio2">2を選択</label>
  </div>

チェックボックスを無効にする:disabled


  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio3" value="option3" disabled />
    <label class="form-check-label" for="Radio3">3を選択 (disabled)</label>
  </div>

チェックボックスとラジオボタンを作成する:form-checkとform-check-inputとform-check-label


  <!-- カスタムフォームのチェックボックス -->
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox13">
    <label class="form-check-label" for="checkbox13">チェックする</label>
  </div>
  <!-- カスタムフォームのラジオボタン -->
  <div class="form-check">
    <input type="radio" id="option1" name="option" class="form-check-input">
    <label class="form-check-label" for="option1">オプション1</label>
  </div>
  <div class="form-check">
    <input type="radio" id="option2" name="option" class="form-check-input">
    <label class="form-check-label" for="option2">オプション2</label>
  </div>

スイッチ型のラジオボタン:form-switch


  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled />
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled />
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
  </div>

フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto


  <!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
  <!-- .col を .col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
  <!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
  <!-- bootstrap5では、form-rowからrowに変更 -->
  <div class="row align-items-center">
    <div class="col-auto">
      <!-- labelはvisually-hidden -->
      <label class="visually-hidden" for="inputName">氏名</label>
      <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
    </div>
    <div class="col-auto">
      <div class="input-group mb-2">
        <label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check"> チェックする </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">送信</button>
    </div>
  </div>

フォームレイアウトにrow:rowとmb-3とcol-md-6


  <!-- colとrowで自由自在にデザインを作っていく -->
  <div class="row">
    <div class="mb-3 col-md-6">
      <label for="inputEmail">メールアドレス</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputPassword">パスワード</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <div class="row">
    <div class="mb-3 col-md-4">
      <label for="inputState">国</label>
      <select id="inputState" class="form-select">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="mb-3 col-md-2">
      <label for="inputZip">郵便番号</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputCity">都道府県</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="mb-3">
    <label for="inputAddress1">住所1</label>
    <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
  </div>
  <div class="mb-3">
    <label for="inputAddress2">住所2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check">
      <label class="form-check-label" for="check">チェックする</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">サインイン</button>

一連の入力グループをまとめて無効にする:disabled


  <fieldset disabled>
    <div class="mb-3">
      <label for="disabledTextInput">無効な入力欄</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect">無効なプルダウンメニュー</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
      <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
    </div>
    <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
  </fieldset>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="mb-3 row">
    <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="mb-3">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="mb-3 row">
    <div class="col-sm-2">チェックボックス</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

インラインのフォーム:form-inline


@
  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>