先生と生徒の会話形式で理解しよう

生徒

「ホームページに名前やメールアドレスを入力してもらうフォームって、どうやって作るんですか？」

先生

「Bootstrap 5を使えば、誰でも簡単に入力フォームを作れますよ。入力チェックやエラー表示も簡単にできます。」

生徒

「間違った入力をしたときのエラーの出し方も知りたいです！」

先生

「それでは、Bootstrap 5 のフォームの基本からバリデーション（入力チェック）、エラーメッセージの表示方法まで見ていきましょう！」

1. フォームとは？入力欄を作るためのしくみ

フォームとは、名前やメールアドレスなどの情報を入力するための欄（らん）です。たとえば、お問い合わせページなどにある「名前」「メールアドレス」「メッセージを入力」などがフォームです。

Bootstrap 5では、<form>タグの中に<input>や<textarea>などのタグを使い、そこにクラス（class）を指定することで、きれいで見やすいフォームを簡単に作れます。

2. Bootstrap 5で基本のフォームを作ってみよう

まずは、名前とメールアドレスを入力する簡単なフォームを作ってみましょう。Bootstrapではform-controlというクラスを使うことで、入力欄のデザインが整います。


<form>
  <div class="mb-3">
    <label for="name" class="form-label">お名前</label>
    <input type="text" class="form-control" id="name" placeholder="例：山田 太郎">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="email" placeholder="例：taro@example.com">
  </div>
</form>

ブラウザ表示

3. バリデーションとは？入力チェックの基本

バリデーションとは、フォームに入力された値が正しいかどうかをチェックするしくみのことです。たとえば、メールアドレスが空欄のままだったり、変な文字が入っていた場合に、それを「エラー」として教えてくれます。

Bootstrap 5では、HTMLの属性（たとえばrequiredやtype="email"）を使うだけで、簡単にバリデーションができます。


<form>
  <div class="mb-3">
    <label for="emailCheck" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="emailCheck" required>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

ブラウザ表示

4. エラーメッセージを表示するには？Bootstrap風にきれいに出そう

ユーザーが間違った入力をしたときに、「この項目は必須です」などのエラーメッセージが出ると親切ですよね。Bootstrapではis-invalidクラスとinvalid-feedbackクラスを使うことで、きれいなエラーメッセージを表示できます。


<form>
  <div class="mb-3">
    <label for="username" class="form-label">ユーザー名</label>
    <input type="text" class="form-control is-invalid" id="username" required>
    <div class="invalid-feedback">
      ユーザー名を入力してください。
    </div>
  </div>
</form>

ブラウザ表示

5. 入力が正しいときに緑色で表示する方法

正しい入力をしたときには、入力欄が緑色になるとユーザーも安心します。Bootstrap 5では、is-validというクラスを使えば、正しい入力のときに緑の枠を表示できます。


<form>
  <div class="mb-3">
    <label for="emailValid" class="form-label">メールアドレス</label>
    <input type="email" class="form-control is-valid" id="emailValid" value="test@example.com">
    <div class="valid-feedback">
      有効なメールアドレスです。
    </div>
  </div>
</form>

ブラウザ表示

6. 入力・バリデーション・エラー表示の基本をまとめたサンプル

ここまで紹介した内容を、ひとつのフォームにまとめたサンプルを紹介します。Bootstrapの基本的なクラスを組み合わせることで、初心者でも実用的なフォームを作れるようになります。


<form>
  <div class="mb-3">
    <label for="fullName" class="form-label">お名前</label>
    <input type="text" class="form-control is-invalid" id="fullName" required>
    <div class="invalid-feedback">
      お名前は必須項目です。
    </div>
  </div>

  <div class="mb-3">
    <label for="userEmail" class="form-label">メールアドレス</label>
    <input type="email" class="form-control is-valid" id="userEmail" value="abc@example.com">
    <div class="valid-feedback">
      正しい形式です。
    </div>
  </div>

  <div class="mb-3">
    <label for="message" class="form-label">メッセージ</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-success">送信する</button>
</form>

ブラウザ表示

まとめ

Bootstrap 5 フォーム設計の基本を振り返る

ここまで、Bootstrap 5を使ったフォームの基本構造から、入力欄の作成方法、バリデーションの考え方、そしてエラーメッセージや正しい入力時の表示方法まで、段階的に学んできました。フォームは、ユーザーとWebサイトをつなぐ非常に重要な役割を持っています。名前やメールアドレス、お問い合わせ内容など、ユーザーが安心して入力できる設計でなければ、途中で入力をやめてしまう原因にもなります。

Bootstrap 5のフォームでは、form-controlやform-labelといったクラスを使うだけで、見た目が整った入力欄を簡単に作成できます。デザインを一から考えなくても、統一感のあるフォームを作れる点は、初心者にとっても大きなメリットです。また、余白を調整するmb-3などのクラスを使うことで、入力欄同士の間隔も自然になり、読みやすく操作しやすいフォームになります。

バリデーションとエラーメッセージの重要性

フォーム入力において欠かせないのがバリデーションです。必須項目が未入力だったり、メールアドレスの形式が正しくない場合に、何も表示されなければユーザーは原因が分からず困ってしまいます。 Bootstrap 5では、required属性やinputのtype指定と組み合わせることで、基本的な入力チェックを簡単に行えます。

さらに、is-invalidクラスとinvalid-feedbackクラスを使うことで、エラー時に分かりやすいメッセージを表示できます。エラー内容を具体的に伝えることで、ユーザーはどこを修正すればよいのかをすぐに理解できます。一方で、正しい入力がされた場合にはis-validクラスとvalid-feedbackを使い、緑色の枠やメッセージを表示することで安心感を与えることができます。このような細かな配慮が、使いやすいフォーム設計につながります。

まとめとしてのフォームサンプル

最後に、入力、バリデーション、エラーメッセージ表示を意識したシンプルなフォーム例を確認します。実際のWebサイトでもそのまま応用できる構成です。


<form>
  <div class="mb-3">
    <label for="contactName" class="form-label">お名前</label>
    <input type="text" class="form-control is-invalid" id="contactName" required>
    <div class="invalid-feedback">
      お名前を入力してください。
    </div>
  </div>

  <div class="mb-3">
    <label for="contactEmail" class="form-label">メールアドレス</label>
    <input type="email" class="form-control is-valid" id="contactEmail" value="sample@example.com">
    <div class="valid-feedback">
      正しい形式のメールアドレスです。
    </div>
  </div>

  <button type="submit" class="btn btn-primary">送信</button>
</form>

ブラウザ表示

このように、Bootstrap 5のフォーム関連クラスを組み合わせることで、見た目が整い、ユーザーにとって分かりやすい入力フォームを作成できます。初心者の方は、まず基本の形をしっかり理解し、少しずつ項目を増やしたり、デザインを調整したりしていくと良いでしょう。

先生と生徒の振り返り会話

生徒

「フォームって難しそうだと思っていましたが、 Bootstrap 5を使うと入力欄やエラー表示がとても分かりやすく作れるんですね。」

先生

「その通りです。フォームはユーザーとの接点なので、使いやすさがとても大切です。 Bootstrapのクラスを使えば、その基本を簡単に実現できます。」

生徒

「エラーの出し方や、正しい入力のときの表示が分かると、実際のWebサイトでも安心して使えそうです。」

先生

「良い理解ですね。今回学んだフォームの基本を押さえておけば、お問い合わせフォームや会員登録画面など、さまざまな場面で応用できます。ぜひ実際に手を動かして、フォーム設計に慣れていきましょう。」