HTML講座 / required・文字数・範囲で入力値を検証する

HTMLの入力検証は、未入力、文字数、数値範囲、一部の形式をブラウザーで確認する仕組みです。requiredやminlength、maxなどで利用者の入力を助けられますが、サーバー側の検証を置き換えるものではありません。

必須と文字数は別の条件

次のフォームでは必須入力と2〜20文字の条件を組み合わせます。requiredは値の有無、minlengthは利用者が入力した文字列の長さを確認します。一方を指定しただけでもう一方の条件まで満たすわけではありません。

<form method="get">
  <label for="nickname">Nickname (2–20 characters)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Check</button>
</form>

空欄、1文字、2文字の順に入力して送信を比較してください。ブラウザーやOS、言語でエラーの文章は異なるので、入力前から条件も表示します。maxlengthは通常上限を超える入力を制限しますが、長さはUTF-16コード単位で数え、絵文字などで見た目の文字数と一致しない場合があります。スクリプトから設定した値も使うなら別に試します。MDNのmaxlengthに定義があります。

数値範囲と基本的な形式を確認する

minとmaxは範囲、stepは刻みを指定します。次のフォームを文書のbodyへ入れ、参加人数を手入力と増減ボタンの両方で操作します。

<form method="get">
  <label for="people">Participants (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Check</button>
</form>

0、11、2.5などが欄に表示できても、有効な送信値とは限りません。メールにはname@example.comなどのテスト値を使います。type="email"は基本的な形式の確認であり、アドレスの実在を確認しません。この例のGETは現在の文書へ送る練習で、保存するサーバーは含みません。型の選択はinputの型で扱います。

直し方が分かる案内を付ける

赤色だけで誤りを示さず、「1〜10の整数を入力してください」のように修正条件を伝えます。重要な説明は入力中も見えるようにし、必要ならaria-describedbyを使う案内文で欄と対応させます。この属性だけで検証処理が作られるわけではありません。

独自のエラー表示を作る場合は、状態変化やフォーカスも実装して確認します。novalidateは送信時の標準の対話的な検証を省く指定なので、問題を見えなくするためだけに加えません。開発者ツールや直接要求でブラウザーの検証を回避できるため、重要な値はサーバー側でも検証します。MDNの制約検証に仕組みがまとめられています。

境界値と失敗条件を比べる

メール欄を正しいテスト形式に保ち、他の欄のエラーが比較を邪魔しない条件で試します。この表は失敗の種類を示し、特定のエラーメッセージを保証するものではありません。参加人数が有効でも、別の欄が無効ならフォーム全体は送信できません。

実際の入力と操作を試す

必須欄を一つずつ空にし、各上限と下限のすぐ内側・外側を入力します。Tabで欄へ移動し、エラーを読んで戻り、修正して再送信できるか確認してください。比較したら再読み込みして初期状態へ戻します。独自のエラーUIを追加したときも、フォーカスとキーボードの確認を繰り返します。