Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<input> — HTML5バリデーション属性

<input> — HTML5バリデーション属性

HTML5では、JavaScriptを使わずにブラウザ側で入力値を検証できるバリデーション属性が追加されました。数値の範囲・文字数・正規表現パターンなどをHTML属性だけで指定できます。

構文

<!-- 数値の範囲を制限 -->
<input type="number" name="age" min="0" max="120" step="1">

<!-- 文字数を制限 -->
<input type="text" name="name" minlength="2" maxlength="50">

<!-- 正規表現パターンで検証 -->
<input type="text" name="zip" pattern="[0-9]{3}-[0-9]{4}"
  placeholder="123-4567">

<!-- メールを複数入力可能に -->
<input type="email" name="cc" multiple>

属性一覧

属性	概要
min	入力できる最小値を指定します。数値・日付タイプで有効です。
max	入力できる最大値を指定します。数値・日付タイプで有効です。
step	増減の刻み幅を指定します。数値スライダーの矢印クリック時の変化量にもなります。
minlength	入力できる最小文字数を指定します。テキスト系タイプで有効です。
maxlength	入力できる最大文字数を指定します。この文字数を超えて入力できなくなります。
pattern	入力値を検証する正規表現パターンを指定します。テキスト系タイプで有効です。
multiple	emailタイプでカンマ区切りの複数アドレス入力、fileタイプで複数ファイル選択を可能にします。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>バリデーション属性</title>
</head>
<body>

  <form>
    <!-- 文字数制限 -->
    <p>
      <label for="uname">ユーザー名（2〜20文字）：</label>
      <input type="text" id="uname" name="username"
        minlength="2" maxlength="20" required>
    </p>

    <!-- 郵便番号のパターン検証 -->
    <p>
      <label for="zip">郵便番号（例：123-4567）：</label>
      <input type="text" id="zip" name="zipcode"
        pattern="[0-9]{3}-[0-9]{4}"
        placeholder="123-4567"
        title="ハイフンを含む7桁の数字で入力してください">
    </p>

    <!-- 数値の範囲とステップ -->
    <p>
      <label for="score">スコア（0〜100、5刻み）：</label>
      <input type="number" id="score" name="score"
        min="0" max="100" step="5" value="50">
    </p>

    <!-- 複数のメールアドレス -->
    <p>
      <label for="cc">CC（複数可、カンマ区切り）：</label>
      <input type="email" id="cc" name="cc"
        multiple placeholder="a@mail.com, b@mail.com">
    </p>

    <p><button type="submit">送信する</button></p>
  </form>

</body>
</html>

実行結果

各入力欄に無効な値を入力して「送信する」を押すと、ブラウザのバリデーションエラーが表示されます。例えば郵便番号欄に「1234567」（ハイフンなし）を入力すると「123-4567 の形式で入力してください」というメッセージが表示されます。

<!-- バリデーションエラー表示例 -->
郵便番号：[ 1234567 ] ← 送信ボタンを押すと...
           ↓
「ハイフンを含む7桁の数字で入力してください」
           （title属性の内容が表示される）

概要

HTML5バリデーション属性を使うと、JavaScriptなしでブラウザが自動的に入力値を検証してくれます。エラーが発生した場合はフォームの送信がブロックされ、ユーザーにエラーメッセージが表示されます。『pattern』属性と合わせて『title』属性にエラー時のヒントメッセージを書いておくと、ユーザーにわかりやすい案内ができます。

ただし、ブラウザのバリデーションは開発者ツールやcurlで容易に回避できます。セキュリティ上重要な検証（文字数・形式・不正データなど）は必ずサーバー側でも行ってください。HTML5バリデーションはあくまでユーザーへのフィードバックを素早く返す「利便性の向上」として活用するものです。

数値の範囲制限（min/max）は『input type="number" / type="range"』と組み合わせて使うことが多いです。日付タイプの制限については『input type="date" 系』のページも参照してください。