Bootstrap 5 のフォームの基本：入力・バリデーション・エラーメッセージ設計

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

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

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

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

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

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. バリデーションとは？入力チェックの基本

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風にきれいに出そう

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. 入力が正しいときに緑色で表示する方法

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. 入力・バリデーション・エラー表示の基本をまとめたサンプル

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 5でフォームを作るには、formタグの中にinputタグやtextareaタグを記述し、それぞれにform-controlなどのBootstrapクラスを付けることで、整ったデザインの入力フォームを簡単に作れます。

フォームとは何ですか？Webサイトでどう使いますか？

フォームとは、名前やメールアドレスなどの情報をユーザーに入力してもらうための欄のことです。お問い合わせページや登録フォームなど、情報を集める場面でよく使われます。