HTML pattern属性の書き方を完全ガイド！正規表現バリデーションの基本を初心者向けに解説

HTML pattern属性の書き方｜正規表現バリデーションの基本

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

生徒

「HTMLのpattern属性って何をするものなんですか？」

先生

「pattern属性は、フォームに入力された文字が決められたルール通りかどうかをチェックするための機能です。」

生徒

「ルールってどうやって決めるんですか？」

先生

「正規表現という特別な書き方で決めます。少し難しく聞こえますが、順番に見ていけば大丈夫ですよ。」

1. HTMLのpattern属性とは何か

HTMLのpattern属性とは、HTMLフォームバリデーションのひとつで、inputタグに入力された文字列が指定した形式と一致しているかを確認するための属性です。フォーム入力チェックを自動で行えるため、JavaScriptを書かなくても基本的な入力制限ができます。

バリデーションとは、入力内容が正しいかどうかを確認する仕組みのことです。たとえば電話番号は数字だけ、郵便番号は七桁など、入力ルールを決めたい場面でpattern属性が活躍します。Web制作やHTML入門で必ず登場する重要な基礎知識です。

2. 正規表現とは何かをやさしく理解する

pattern属性では正規表現を使います。正規表現とは、文字の並び方のルールを表現する特別な書き方です。たとえば数字だけにしたい場合は〇から九までという意味の書き方をします。

少し例えで考えてみましょう。入場券に赤い服の人だけ入れますと書いてあれば、その条件に合う人だけが通れます。正規表現はこの条件を書いた看板のようなものです。入力された文字がその条件に合っているかどうかをチェックします。

数字のみ、英字のみ、何文字以上など、細かい指定ができるのが正規表現の特徴です。HTMLフォームバリデーションと組み合わせることで、安全で使いやすいフォームを作れます。

3. pattern属性の基本的な書き方

pattern属性はinputタグの中に書きます。type属性と一緒に使うことが多く、textやpasswordなどと組み合わせます。基本構文はとてもシンプルです。


<form>
  <label for="code">数字4桁</label>
  <input type="text" id="code" pattern="[0-9]{4}" required>
  <button type="submit">送信</button>
</form>

ブラウザ表示

上の例では、数字を四桁入力しないと送信できません。〇から九までを意味する書き方と、四回繰り返すという指定を組み合わせています。required属性も一緒に使うことで未入力も防げます。

4. 英字のみを許可する入力チェック

次は英字のみを入力できるフォーム例です。ユーザー名を英語だけにしたい場合などに使います。HTMLフォームバリデーションとpattern属性の代表的な使い方です。


<form>
  <label for="username">英字のみのユーザー名</label>
  <input type="text" id="username" pattern="[A-Za-z]+" required>
  <button type="submit">登録</button>
</form>

ブラウザ表示

大文字と小文字の英字を許可し、一文字以上入力するという意味になります。プラス記号は一回以上続くという意味です。フォーム入力制限の基本パターンとして覚えておきましょう。

5. 郵便番号形式をチェックする方法

日本の郵便番号は三桁ハイフン四桁です。この形式チェックもpattern属性で実現できます。実務でもよく使われるHTMLバリデーション例です。


<form>
  <label for="zip">郵便番号</label>
  <input type="text" id="zip" pattern="[0-9]{3}-[0-9]{4}" placeholder="123-4567" required>
  <button type="submit">確認</button>
</form>

ブラウザ表示

三桁の数字、ハイフン、四桁の数字という順番を指定しています。入力形式を固定することで、データのばらつきを防ぎ、サーバー側処理も安定します。

6. 桁数を制限するパスワード入力例

パスワードを八文字以上十六文字以内に制限したい場合もpattern属性で対応できます。HTMLフォーム作成ではセキュリティ面でも重要です。


<form>
  <label for="pass">パスワード</label>
  <input type="password" id="pass" pattern=".{8,16}" required>
  <button type="submit">ログイン</button>
</form>

ブラウザ表示

ドットは任意の文字を意味します。八文字以上十六文字以内という範囲指定をしています。文字数制限の基本として覚えておくと便利です。

7. pattern属性を使うときの注意点

pattern属性はとても便利ですが、ブラウザのHTML5仕様に基づいて動作します。古いブラウザでは正しく動かない可能性があります。また、クライアント側だけでなくサーバー側でも必ず入力チェックを行うことが大切です。

正規表現が複雑になりすぎると、管理や修正が難しくなります。初心者のうちは、数字のみ、英字のみ、桁数指定など基本的なパターンから練習するのがおすすめです。HTMLフォームバリデーションの基礎を理解することで、安全で使いやすいWebフォームを作成できるようになります。

まとめ

今回はHTMLのpattern属性の書き方について、正規表現バリデーションの基本から具体的なフォーム入力チェックの方法までを順番に整理しました。pattern属性はHTMLフォームバリデーションの中でも特に柔軟性が高く、数字のみ入力可能にする制限、英字のみ許可する入力チェック、郵便番号形式の固定、パスワードの文字数制限など、さまざまな入力ルールを実現できます。JavaScriptを使わなくても、inputタグにpattern属性を追加するだけでブラウザが自動的に入力内容を検証してくれるため、初心者でも比較的簡単に実装できる点が大きな特徴です。

正規表現という言葉に難しさを感じるかもしれませんが、実際に使う場面はある程度決まっています。数字の範囲指定、文字数の繰り返し指定、英大文字と英小文字の組み合わせ指定など、基本パターンを覚えることでHTMLフォーム作成の幅が一気に広がります。特にWeb制作やフロントエンド開発の現場では、入力ミスを防ぐフォーム設計がとても重要です。入力制限を適切に設定することで、データの統一性が保たれ、サーバー側処理も安定します。

また、required属性とpattern属性を組み合わせることで、未入力の防止と入力形式のチェックを同時に行えます。これはHTML5バリデーションの基本的な考え方です。フォーム入力チェックはユーザー体験にも直結します。曖昧なエラーメッセージではなく、あらかじめ入力形式を制限しておくことで、利用者にとって分かりやすいフォームになります。

さらに、郵便番号や電話番号のように形式が決まっているデータは、pattern属性で厳密に指定することで入力ゆれを防止できます。英字のみユーザー名、数字四桁の認証コード、八文字以上十六文字以内のパスワードなど、よくある入力項目は繰り返し練習することで自然に理解できるようになります。正規表現バリデーションは最初は戸惑いますが、基本構文を繰り返し書くことが習得への近道です。

HTMLフォームバリデーションはクライアント側での第一チェックとして機能します。ただし、安全性を高めるためにはサーバー側でも同じように入力検証を行うことが大切です。pattern属性はあくまでユーザーの入力補助と入力ミス防止の役割と考えましょう。Webアプリケーション開発では多層的な入力チェックが基本です。

これからHTML入門を進めていく人は、まずは数字のみ、英字のみ、桁数指定という三つの基本パターンを確実に理解してください。そして少しずつ正規表現の表現方法を広げていけば、より高度な入力制御も可能になります。フォーム作成の質が上がることで、使いやすく信頼性の高いWebページを作ることができます。

サンプルプログラムで復習する

最後に、数字四桁、英字のみ、郵便番号形式を一つのフォームにまとめた復習用サンプルを確認しましょう。inputタグとpattern属性の組み合わせを見比べることで理解が深まります。


<form>
  <div>
    <label for="code2">数字四桁の認証コード</label>
    <input type="text" id="code2" class="form-control" pattern="[0-9]{4}" required>
  </div>

  <div>
    <label for="user2">英字のみユーザー名</label>
    <input type="text" id="user2" class="form-control" pattern="[A-Za-z]+" required>
  </div>

  <div>
    <label for="zip2">郵便番号</label>
    <input type="text" id="zip2" class="form-control" pattern="[0-9]{3}-[0-9]{4}" placeholder="123-4567" required>
  </div>

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

ブラウザ表示

このようにpattern属性を適切に設定することで、入力形式の統一、データ品質の向上、ユーザーの入力ミス防止が実現できます。HTMLフォーム設計の基礎として何度も書いて練習することが大切です。

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

生徒

pattern属性は入力内容を正規表現でチェックするための機能だと分かりました。数字のみや英字のみなどの入力制限ができるのですね。

先生

その通りです。HTMLフォームバリデーションの基本としてとても重要です。required属性と組み合わせることで、未入力と形式エラーの両方を防げます。

生徒

郵便番号のように決まった形式があるものは、pattern属性で細かく指定するとデータがきれいにそろうのですね。

先生

はい。入力チェックを丁寧に行うことは、使いやすいフォーム作成の第一歩です。正規表現の基本パターンを覚えて、繰り返し練習していきましょう。

2026年最新スキルアップ・実践セミナー