Bootstrap5 フォームの作成について

Bootstrap 5のフォームコンポーネントは、ユーザー入力を受け取るためのさまざまな要素を提供します。テキストボックス、チェックボックス、ラジオボタン、ドロップダウンリストなど、幅広いフォーム要素を簡単にスタイリングして、使いやすいユーザーインターフェースを作成できます。

基本的なフォームの構造

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">メールアドレスは他人に共有されません。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">チェックする</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

主な要素の説明

<form>: フォーム全体のコンテナ。
<div class="mb-3">: マージンボトムを3に設定したフォームグループ。
<label>: フォーム要素のラベル。
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">: メール入力フィールド。
<div id="emailHelp" class="form-text">: 補足説明テキスト。
<input type="password" class="form-control" id="exampleInputPassword1">: パスワード入力フィールド。
<input type="checkbox" class="form-check-input" id="exampleCheck1">: チェックボックス。
<button type="submit" class="btn btn-primary">: 送信ボタン。

入力フィールドの種類

Bootstrap 5では、さまざまな種類の入力フィールドを簡単に作成することができます。

テキスト

<input type="text" class="form-control" placeholder="テキストを入力">

テキストエリア

<textarea class="form-control" rows="3"></textarea>

メール

<input type="email" class="form-control" placeholder="メールアドレスを入力">

パスワード

<input type="password" class="form-control" placeholder="パスワードを入力">

セレクトボックス

<select class="form-select">
  <option selected>選択してください</option>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

チェックボックス

<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
  デフォルトのチェックボックス
</label>

ラジオボタン

<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
  デフォルトのラジオボタン1
</label>
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
<label class="form-check-label" for="flexRadioDefault2">
  デフォルトのラジオボタン2
</label>

フォームのレイアウト

フォームは、さまざまなレイアウトで構築できます。例えば、グリッドシステムを使って複数の入力フィールドを並べることができます。

<form>
  <div class="row mb-3">
    <div class="col">
      <input type="text" class="form-control" placeholder="ファーストネーム">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="ラストネーム">
    </div>
  </div>
  <div class="mb-3">
    <input type="email" class="form-control" placeholder="メールアドレス">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

入力フィールドの検証

Bootstrap 5では、フォームの入力フィールドに対する検証スタイルを簡単に追加できます。

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationCustom01" class="form-label">名前</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="invalid-feedback">
      名前を入力してください。
    </div>
  </div>
  <div class="mb-3">
    <label for="validationCustom02" class="form-label">メール</label>
    <input type="email" class="form-control" id="validationCustom02" required>
    <div class="invalid-feedback">
      有効なメールアドレスを入力してください。
    </div>
  </div>
  <button class="btn btn-primary" type="submit">送信</button>
</form>