Bootstrap5のフォームを理解する【図解たっぷりBootstrap5入門】

吉田先生

Bootstrapを使えば、フォームを簡単に組み込むことができます。
フォームタグを書くだけでは味気ないデザインですが、Bootstrapで書くととてもきれいでバリエーションも豊富ですよ。

• Bootstrapのformを知る
• 公式ドキュメントの確認
• フォームの基本構造（HTML）
• BootStrap5のCSSクラス
• フォームのカスタマイズ
• 入力欄のクラス・サイズ変更
• フォームのレイアウト
• 【実習】フォームを作成しよう

Bootstrapのformを知る

前レッスンで使用したNavbarテンプレートコードにも、formタグは使われていました。
form（フォーム）は、ナビゲーション以外の部分でも使用できます。

では、フォームについて詳しく見ていきましょう。

公式ドキュメントの確認

Bootstrap5のドキュメントで、フォーム関連の機能は「Forms」のグループでまとめられています。
まずは、Overview（概要）を開いてみましょう。

URL：https://getbootstrap.jp/docs/5.3/forms/overview/#%E6%A6%82%E8%A6%81

“フォームスタイルの簡単な例です。 ”として、見本とコードが載っていますね。
このコードを見ていきましょう。

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</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">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

フォームの基本構造（HTML）

Bootstrap5を使う場合も、フォームの基本構造を作るHTMLは変わりません。

1.入力フォーム部分全体を<form>タグで囲う
2.<label>タグで各入力フォームの説明を記述する
3.<input>タグを使用して入力欄やボタンを作る

なお、aria-describedby属性はスクリーンリーダー（読み上げソフト）利用者に説明するためのものです。

bootstrapのテンプレートコードの場合は、inputタグの下にテキストがありますよね。
これを、inputタグで作ったメールアドレス入力欄の補足説明として使ってね、という指示をしています。

参照する要素がない場合は、aria-describedby="〇〇"の部分は削除して構いません。

BootStrap5のCSSクラス

フォームのテンプレートコードで、Bootstapが活躍しているのは クラス属性（class="〇〇"）の部分です。
labelタグにはform-label、inputタグにはform-controlと、それぞれCSSクラスが指定されています。

なかでも重要なのが、inputタグに指定されているform-controlクラス。
このクラスを使うことで、入力フォームのデザインが適用されます。

フォームの一番下では、buttonタグで送信ボタンを作成しています。
Bootstarpが用意しているボタンのデザイン・配色についてのCSSクラスは、次のボタンのレッスンで詳しく紹介します。

フォームのカスタマイズ

フォームに関しても、様々なカスタマイズが可能です。

入力欄のクラス・サイズ変更

まず、先程重要とお伝えしたinputタグのform-controlクラス。

このクラスは、入力箇所を綺麗にスタイリングしてくれます。
幅が親要素の100％になってlabelと縦並びになったり、入力欄しようとした時にハイライト表示されたりと、見やすく・使いやすくするための設定をBootstrapがしてくれています。

そして、この入力フォームのサイズはBootstrapのクラスで変更ができます。
以下コードの、CSSクラス部分にハイライト表示しているクラス名を追加すると大きさが変わります。

• form-control：標準サイズ（デフォルト）
• + form-control-sm：高さを標準より小さくする
• + form-control-lg：高さを標準より大きくする

フォームのレイアウト

最初に紹介した基本的なフォームは、全ての要素が縦並びになっていました。
横並びに要素をレイアウトしたい場合は、通常のグリッドシステムと全く同じ方法でできます。

1. 横並びにしたい要素全体をrowクラスを指定したdivで囲います。
2. 配置する要素１つ１つはカラム（colなど）で囲っていきます。

親要素が画面幅そのものですと、前回紹介したようにrowクラスで横にはみ出してしまいます。
丁度よく収まるように、formタグにcontainerもしくはcontainer-fluidクラスを適用しておくと良いです。

また、inputタグに「placeholder」という属性を適用してフォームを作ります。
この属性を適用し、値の部分にテキストを入れると、そのテキストが入力フォーム内に表示されます。

【実習】フォームを作成しよう

実際にBootstrapを使って、フォームのコードを書いてみましょう。
新しいファイル（form.htmlなど）を作成して、以下の完成イメージのようなフォームを作成してください。

【完成イメージ】

横並び、入力部分のサイズ変更など、このレッスンで紹介した内容が盛り込まれています。
フォームとしてはちょっと変ですが、復習として作成してみて下さい。

なお、添付されている見本とは異なる構造でコーディングされていても問題ありません。