(Sample)
この記事では、数値入力フォームに「最小値」と「最大値」の制限を設ける方法について、新人エンジニア向けに解説していきます。
目指すフォームのイメージ
ユーザーが「1〜10」の間で数値を入力できるフォームを作ります。
使い道の例：
- アンケートで「満足度を1〜10で答えてください」
- 数字による簡単な評価入力
- テストや診断の点数入力 など
コアとなるHTMLコードの説明
まず、以下が数値入力欄のHTMLです。
<input
type="number"
class="form-control"
id="numberInput"
name="numberInput"
min="1"
max="10"
required
/>
ここには、5つの重要なポイントがあります。順番に説明していきましょう。
type="number"：数値だけ入力可能にする
<input>タグのtype属性にnumberを指定すると、入力欄は数値専用になります。これにより、キーボードでは数字だけを入力できるようになり、スマホでは数字パッドが自動で表示されることもあります。
例え：
「数字しか書けない白紙の用紙」だと思ってください。
min="1"とmax="10"：入力できる値の下限と上限を設定
これらの属性は、ユーザーが入力できる数値の範囲を制限します。
min="1"：1未満は入力できません。max="10"：10を超える数値も入力できません。
数式で表すと：
- 記号形式：
1 ≤ x ≤ 10 - 日本語表現：「1以上かつ10以下」
required：必須入力にする
この属性は「この項目を必ず入力してから送信してください」という意味になります。
なぜ必要？
→ フォームの送信ボタンを押す前に、空欄のままだと警告が出て入力を促すことができます。
class="form-control"：Bootstrapで見た目を整える
Bootstrapとは、Webデザインを簡単にきれいにしてくれるCSSフレームワークです。
このクラスを指定するだけで、入力欄にスタイル（余白や境界線）が付き、ユーザーが使いやすいUIになります。
invalid-feedbackでエラーメッセージを表示
<div class="invalid-feedback">
1から10の範囲で数値を入力してください。
</div>
この部分はエラーメッセージの表示に使われます。invalid-feedbackはBootstrapに用意されているクラスで、バリデーションに失敗したときにこのメッセージが表示されます。
ただし、そのままでは自動的には表示されません。以下のようにJavaScriptでバリデーション判定を連動させる処理を追加すると動きが出ます。
見た目を整えるレイアウト設定
.container {
margin-top: 50px;
max-width: 400px;
}
ここでは、フォーム全体を中央に寄せつつ、上に50pxの余白を持たせ、幅を最大400pxに制限しています。
例え：
フォームが画面の端から端までベローンと広がってしまうのを防ぐための「枠」をつけるイメージです。
よくある間違い・注意点
| よくあるミス | 解説 |
|---|---|
min と max を type="text" に設定している | 効きません！数値制限は type="number" でなければ無効です |
required を忘れる | ユーザーが空欄のまま送信できてしまい、意図しない不完全なデータになる可能性があります |
| 入力値をサーバー側でチェックしない | HTMLの制限はブラウザ側のみ。悪意のあるユーザーは制限を回避できるため、サーバーでも必ずバリデーションしましょう |
拡張アイデア
スライダーにしてみる
<input type="range" min="1" max="10" />
こうすれば、より直感的な操作ができます。ただし、数値の表示やラベル付けが必要になることがあります。
バリデーションをJavaScriptで強化する
入力値に応じて背景色を変える、エラー時に送信を止めるなど、より丁寧なUI/UXが実現できます。
今後の学習の指針
このフォームの例は、HTMLの入力制限とBootstrapによるUI設計の基礎が詰まっています。次のステップとして、以下を学んでみましょう。
- JavaScriptによる入力チェック（
addEventListener,checkValidityなど） - フォームの送信先設定（
actionとmethod） - 入力値の取得と処理（
valueプロパティ） - バックエンド（PHP, Node.jsなど）との連携