【初心者の方向け】 Bootstrap4の使い方フォーム

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

問い合わせや予約・申し込み・コメントといった様々な用途で使われるフォームデザインをBootstrapを使ってデザインしてみましょう。

Bootstrap4のバージョン4.3をベースに書いています。

基本的なフォーム

テキスト入力のみのシンプルなフォームです。

まずは、こちらを確認して見ましょう。

フォームサンプル

サンプルコード

<input>や<select>、<textarea>を使用する際は.form-group内に記述していきます。

また各要素には、class=”form-control”を指定してください。

.form-controlには、該当する要素の外観などのデザインが指定されています。

<form>
  <div class="form-group">
    <label for="name">名前</label>
    <input type="text" class="form-control" id="name" placeholder="名前">
  </div>
  <div class="form-group">
    <label for="mail">メールアドレス</label>
    <input type="email" class="form-control" id="mail" placeholder="メールアドレス">
  </div>
  <div class="form-group">
    <label for="comment">コメント</label>
    <textarea class="form-control" id="comment" rows="3" placeholder="コメントを入力してください"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">送信する</button>
</form>

セレクトフォーム

セレクトフォームは単独選択や複数選択など指定できます。

サンプルコード

<form>
<div class="form-group">
    <label for="select1">選択してください</label>
    <select class="form-control" id="select1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>
  <div class="form-group">
    <label for="select2">複数選択できます</label>
    <select multiple class="form-control" id="select2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

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

チェックボックスとラジオボタンのサンプルです。

テキスト入力フォームなどと違う点は

.form-check内に記述していく形になります。

また<input><label>のクラスも内容が変わるので、サンプルコードを確認してください。

サンプルコード

チェックボックスやラジオボタンを横並びにするには.form-check-inlineを指定してください。

<!--チェックボックス-->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="check1">
  <label class="form-check-label" for="check1">1</label>
  <input class="form-check-input" type="checkbox" value="" id="check2">
  <label class="form-check-label" for="check2">2</label>
  <input class="form-check-input" type="checkbox" value="" id="check3">
  <label class="form-check-label" for="check3">3</label>
</div>
<!--ラジオボタン-->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
  <label class="form-check-label" for="radio1">1</label>
  <input class="form-check-input" type="radio" name="radio" id="radio2" value="option2">
  <label class="form-check-label" for="radio2">2</label>
  <input class="form-check-input" type="radio" name="radio" id="radio3" value="option3">
  <label class="form-check-label" for="radio3">3</label>
</div>

ファイル入力

ファイル入力は.form-group内に記述していきます。
<input>には.form-control-fileを指定します。

サンプルコード

<form>
  <div class="form-group">
    <label for="file1">ファイルを選択</label>
    <input type="file" class="form-control-file" id="file1">
  </div>
</form>

レンジ入力

スマホでの入力支援や、大きい数値など直感的に選択できるレンジ入力は

<input>要素に.form-control-rangeを使用してデザインされます。

JavaScriptを用いて視覚的な数値の変動も表示できます。

JavaScriptを組み合わせた例

サンプルコード

通常のレンジ表示になります。

実際に使用する場合には、<input>内にmax=”○” min=”○” step=”○” value=”○”を使ってレンジ入力の最小値や最大値を指定していきましょう。

<form>
  <div class="form-group">
    <label for="range">レンジ</label>
    <input type="range" class="form-control-range" id="range">
    <span id="value">5</span>
  </div>
</form>

フォームレイアウト

グリッドを使用してフォームのレイアウトも可能です。

サンプルでは画面幅に応じて縦並びに切り替わります。

サンプルコード

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="name-sample">名前</label>
      <input type="text" class="form-control" id="name-sample" placeholder="名前">
    </div>
    <div class="form-group col-md-6">
      <label for="sex">性別</label>
      <select id="sex" class="form-control">
        <option selected>選択してください</option>
        <option>男</option>
        <option>女</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="text" class="form-control" id="email" placeholder="メールアドレス">
  </div>
  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input1">選択欄</label>
      <select id="inputState" class="form-control">
        <option selected>選択してください</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
    </div>
    <div class="form-group col-md-4">
      <label for="input-2">入力欄</label>
      <input type="text" class="form-control" id="input-2">
    </div>
    <div class="form-group col-md-4">
      <label for="input-3">入力欄</label>
      <input type="text" class="form-control" id="input-3">
    </div>
</div>  
<button type="submit" class="btn btn-primary">送信</button>
</form>