Bootstrap4 フォーム(form)クラスの使い方を徹底解説

記事にはプロモーションが含まれる場合があります。

Bootstrap4で利用できるform(フォーム)の使い方をご紹介します。

Bootstrap4 のフォームの使い方横並び

一部追加されたクラスなどありますが、formの基本的な使い方はbootstrap3とほぼ同じです。

Bootstrap4でのフォーム(form)の基本的な使い方
- 基本的なフォーム部品の使い方
- ラベルとフォーム部品を横並びにする
フォーム部品を全て横並びにする form-inline
フォームサイズの設定 form-control-{sm | lg}
チェックボックスとラジオボタン
まとめ

合わせて読みたい記事

Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

Bootstrap4でのフォーム(form)の基本的な使い方

基本的なフォーム部品の使い方

フォームを利用する場合の基本的な使い方としては、フォーム部品(input、textarea、select)にform-controlクラスを追加し、外側をform-groupクラスをつけたdivタグで囲む形になります。

クラス名	内容
form-group	ラベルやフォーム部品をグルーピングする外側のdivタグで利用します。余白などの見た目を整えてくれます。
form-control	フォーム部品に設定します。input、textarea、selectで利用します。フォーム部品の大きさやレイアウトを整えてくれます。
form-check-input	input要素のtypeがcheckboxやradioの場合は、form-controlの代わりにform-check-inputを利用します。

■表示例

Bootstrap フォームの例

■ソースコード

<form action="index.html" method="post">
  <div class="form-group">
    <label for="name">氏名</label>
    <input type="email" class="form-control" id="name" placeholder="ウェブスト太郎">
  </div>
  <div class="form-group">
    <label for="message">メッセージ</label>
    <textarea id="message" name="message" rows="8" cols="80" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="date">日付</label>
    <select id="date" class="form-control" name="date">
      <option value="2017年1月">2017年10月</option>
      <option value="2017年1月">2017年11月</option>
      <option value="2017年1月">2017年12月</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">登録する</button>
</form>

</div>

<label for="message">メッセージ</label>

</div>

</select>

</div>

</form>

(参考)form-group、form-controlのCSS

■form-groupクラスのCSS
form-groupのCSS

■form-controlクラスのCSS
form-controlのCSS

ラベルとフォーム部品を横並びにする

ラベルとフォーム部品を横並びにするためには、グリッドシステムのrow、col-{prefix}-{数字}を利用します(※)。

■表示例
Bootstrap4 のフォームの使い方横並び

■上記のソースコード

<form action="index.html" method="post">
  <div class="form-group row">
    <label for="email" class="col-sm-4 col-form-label">メールアドレス</label>
    <div class="col-md-8">
      <input type="text" class="form-control" id="email" value="">
    </div>
  </div>
  <div class="form-group row">
    <label for="password" class="col-sm-4 col-form-label">パスワード</label>
    <div class="col-md-8">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">ログインするする</button>
</form>

<label for="email" class="col-sm-4 col-form-label">メールアドレス</label>

</div>

<label for="password" class="col-sm-4 col-form-label">パスワード</label>

</div>

<button type="submit" class="btn btn-primary">ログインするする</button>

</form>

(※)合わせて読みたい記事

Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

labelにあるcol-form-labelってなんでしょうか？必要なんですか？

ラベルの文字のレイアウトを少し調整してくれます。必須ではありませんが、あった方が良いでしょう。
Bootstrap4 のcol-form-label

フォーム部品を全て横並びにする form-inline

フォーム部品を全て横並びにする場合は、form要素にform-inlineクラスを追加します(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。)

■表示例
bootstrap4 form-inlineのCSS

■上記のソースコード

<form class="form-inline" action="index.html" method="post">
  <div class="form-group  mb-2">
    <input type="text" class="form-control" id="email" value="" placeholder="ログインID">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <input type="password" class="form-control" id="password" value="" placeholder="パスワード">
  </div>
  <button type="submit" class="btn btn-primary mb-2">ログイン</button>
</form>

</div>

</div>

</form>

■(参考)form-inlineクラス(form要素にdisplay:flexがかかり、中の子要素がフレックスアイテムになります。)
bootstrap4 form-inlineのCSS

合わせて読みたい記事

Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説

フォームサイズの設定 form-control-{sm | lg}

インプットフォームの大きさを設定するには、form-controlクラスに加えて、form-control-{sm | lg}を追記します。

クラス名	内容
form-control-sm	フォームエリアの大きさを通常より小さくする
form-control-lg	フォームエリアの大きさを通常より大きくする

■表示例
フォームの表示例

■上記のソースコード

<form>
  <div class="form-group">
    <label>小さいフォーム</label>
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
  </div>
  <div class="form-group">
    <label>通常のフォーム</label>
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group">
    <label>大きいフォーム</label>
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  </div>
  <button type="submit" class="btn btn-primary">登録する</button>
</form>

<form>

<label>小さいフォーム</label>

</div>

<label>通常のフォーム</label>

</div>

<label>大きいフォーム</label>

</div>

</form>

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

ここでは、チェックボックスとラジオボタンの使用例をご紹介します。input要素のtypeがcheckboxやradioの場合は、form-controlの代わりにform-check-inputを利用します。

チェックボックスの例

チェックボックスの使用例は下記の通りです。

■表示例
Bootstrap4 のチェックボックス

■上記のソースコード

<h3>チェックボックスの例</h3>
<form>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="lightcourse">
    <label class="form-check-label" for="lightcourse">
      ライト26時間コース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="standardcourse">
    <label class="form-check-label" for="standardcourse">
      スタンダード48時間コース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="professionalcourse">
    <label class="form-check-label" for="professionalcourse">
      プロフェッショナル80時間コース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="lesson" disabled>
    <label class="form-check-label" for="defaultCheck2">
      単発マンツーマンレッスン(現在休止中)
    </label>
  </div>
  <button type="submit" class="btn btn-primary">登録する</button>
</form>

<h3>チェックボックスの例</h3>

<form>

ライト26時間コース

</label>

</div>

スタンダード48時間コース

</label>

</div>

プロフェッショナル80時間コース

</label>

</div>

単発マンツーマンレッスン(現在休止中)

</label>

</div>

</form>

form-checkクラスとform-check-labelクラスについて

form-checkクラスとform-check-labelクラスも、レイアウトを微調整するために用意されているBootstrap4のクラスです。必要に応じて組み合わせて使いましょう。

bootstrap4 form-checkのcss

bootstrap4 form-check labelのCSS

ラジオボタンの例

ラジオボタンの使用例は下記の通りです。

■表示例
Bootstrap4 のチェックボックス

■上記のソースコード

<h3>ラジオボタンの例</h3>
<form>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="course" id="lightcourse" value="lightcourse" checked>
    <label class="form-check-label" for="lightcourse">
      ライトコース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="course" id="standardcourse" value="standardcourse">
    <label class="form-check-label" for="standardcourse">
      スタンダードコース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="course" id="professionalcourse" value="professionalcourse">
    <label class="form-check-label" for="professionalcourse">
      プロフェッショナルコース
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="course" id="lesson" value="lesson" disabled>
    <label class="form-check-label" for="lesson">
      単発マンツーマンレッスン(現在受け付け停止中)
    </label>
  </div>
  <button type="submit" class="btn btn-primary">登録する</button>
</form>

<h3>ラジオボタンの例</h3>

<form>

ライトコース

</label>

</div>

スタンダードコース

</label>

</div>

プロフェッショナルコース

</label>

</div>

単発マンツーマンレッスン(現在受け付け停止中)

</label>

</div>

</form>

チェックボックスやラジオボタンを横並びにする

form-checkクラスに加えてform-check-inlineクラスを追加すると、チェックボックスやラジオボタンを横並びにすることができます。

■表示例
Bootstrap4 form-check-inline

■上記のソースコード

<form  action="index.html" method="post">
  <div class="form-group">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="" id="lightcourse">
      <label class="form-check-label" for="lightcourse">
        ライト26時間コース
      </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="" id="standardcourse">
      <label class="form-check-label" for="standardcourse">
        スタンダード48時間コース
      </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="" id="professionalcourse">
      <label class="form-check-label" for="professionalcourse">
        プロフェッショナル80時間コース
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">登録する</button>
</form>

ライト26時間コース

</label>

</div>

スタンダード48時間コース

</label>

</div>

プロフェッショナル80時間コース

</label>

</div>

</form>

■参考)form-check-inlineクラスのCSS。display:flex-inlineが設定されます。
Bootstrap4 form-check-inlineのCSS

ここでは割愛しますが、このほかにも色々な使い方があります。詳しくは下記の公式サイトをご覧ください。
Forms | Bootstrap4.3

まとめ

いかがでしたでしょうか。

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のフォーム(form)の使い方の基本をご紹介しました。

使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。

Forms | Bootstrap4.3

合わせて読みたい記事

Bootstrap4の使い方ブートストラップの導入方法と基本を徹底解説！

今回は、以上になります。最後までご覧いただきありがとうございました。