Bootstrap

Bootstrapフォームの作り方｜見た目の良い入力フォームを簡単に

Bootstrap フォーム 入力

Bootstrapフォームの作り方
見た目の良い入力フォームを簡単に

Bootstrapを使えば、テキスト入力、セレクトボックス、チェックボックスなど、さまざまなフォーム要素をスタイリッシュに表示できます。
この記事では、よく使うフォームパターンをまとめて解説します。

こんな人向けの記事です

  • HTMLフォームの見た目を整えたい
  • Bootstrapのフォームクラスを理解したい
  • バリデーション表示を実装したい

Step 1基本のテキスト入力

Bootstrap のフォームは form-label と form-control を使います。

HTML 
<form>
  <div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control"
           placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label class="form-label">パスワード</label>
    <input type="password" class="form-control"
           placeholder="パスワードを入力">
  </div>
</form>
クラス役割
form-labelラベルにマージンと太字を適用
form-control入力欄に幅100%、パディング、ボーダーを適用
mb-3マージンボトム（余白をあける）

Step 2セレクトボックスとテキストエリア

HTML 
<!-- セレクトボックス -->
<div class="mb-3">
  <label class="form-label">カテゴリ</label>
  <select class="form-select">
    <option selected>選択してください</option>
    <option value="1">技術</option>
    <option value="2">デザイン</option>
    <option value="3">ビジネス</option>
  </select>
</div>

<!-- テキストエリア -->
<div class="mb-3">
  <label class="form-label">コメント</label>
  <textarea class="form-control" rows="3"></textarea>
</div>
form-control と form-select の違い
form-control → input, textarea 用
form-select → select 用（ドロップダウン矢印のスタイルが付く）

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

HTML 
<!-- チェックボックス -->
<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="checkbox" id="check2">
  <label class="form-check-label" for="check2">メルマガを受け取る</label>
</div>

<!-- ラジオボタン -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="free">
  <label class="form-check-label" for="free">無料プラン</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="paid">
  <label class="form-check-label" for="paid">有料プラン</label>
</div>

Step 4入力グループ（アイコン付き）

入力欄の前後にテキストやアイコンを付けられます。

@
https://
HTML 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">https://</span>
  <input type="text" class="form-control" placeholder="example.com">
</div>

Step 5フォームのレイアウト

グリッドシステムを使って、フォーム要素を横並びに配置できます。

HTML 
<form>
  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label">姓</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-md-6">
      <label class="form-label">名</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

まとめ

  • form-control で入力欄、form-select でセレクトボックスをスタイリング
  • form-check でチェックボックス・ラジオボタンを整形
  • input-group でアイコンやテキストを入力欄に付加
  • グリッド（row + col-*）で横並びレイアウト
  • mb-3 等のユーティリティクラスで余白を調整

この記事が役に立ったら、ぜひシェアしてください。