pattern属性とは？
pattern 属性は、HTMLの <input> 要素で、テキスト (text), 電話番号 (tel), メール (email), URL (url), パスワード (password), 検索 (search) タイプの入力を特定のパターンに制限するために使われます。正規表現を活用して入力内容をチェックし、指定の形式に合わない場合は title 属性でカスタマイズしたエラーメッセージを表示できます。郵便番号や電話番号など、決まった形式の入力に最適です。
基本的な使い方
pattern 属性は下記の様にHTML の <input> 要素に設定し、制限したい正規表現を属性値として指定します。指定パターンに一致しない入力があると、フォーム送信がブロックされ、エラーメッセージが表示されるのですがtitle 属性も使用することで入力ガイドやエラーメッセージをカスタマイズできるので、ユーザーに明確な指示を伝えることができます。
<input type="text" pattern="正規表現" title="エラーメッセージ">実装例
郵便番号の入力
下記は、郵便番号を「123-4567」の形式で入力するよう pattern 属性で指定し、パターンに一致しない場合に title 属性でエラーメッセージを表示する例です。
<form>
<label for="zipcode">郵便番号 (例: 123-4567):</label>
<input
type="text"
id="zipcode"
name="zipcode"
pattern="^\d{3}-\d{4}$"
title="郵便番号は 123-4567 の形式で入力してください"
required
>
<button type="submit">送信</button>
</form>
電話番号の入力
下記は「080-1234-5678」の形式で日本の携帯電話番号を入力させる場合の例です。
<form>
<label for="phone">電話番号 (例: 080-1234-5678):</label>
<input
type="tel"
id="phone"
name="phone"
pattern="^\d{2,4}-\d{2,4}-\d{4}$"
title="電話番号は 080-1234-5678 の形式で入力してください"
required
>
<button type="submit">送信</button>
</form>メリットと注意点
メリット
簡単なバリデーション
pattern属性により、JavaScriptを使用せずともHTMLだけで簡単に入力内容を制限できます。
ユーザーエクスペリエンスの向上
title属性と併用することで、適切なエラーメッセージを表示してユーザーにエラー内容を知らせることができます。
CSSでのカスタマイズ
:invalid疑似クラスを使用することでエラーの際のデザインを変更することができます。
注意点
正規表現の理解が必要
pattern 属性は正規表現を使用する為、入力パターンを正確に設定するには正規表現の知識が必要です。
まとめ
pattern属性は、HTML フォームで簡単に入力内容を制限できる便利な属性です。正規表現を利用して、特定の形式に合わせた入力制御が可能になり、title属性を使用することでユーザーに対してエラー内容をわかりやすく提供できます。ただし、複雑な検証が必要な場合は JavaScript の併用も検討しましょう。
参考文献
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
HTML 属性: pattern – HTML: ハイパーテキストマークアップ言語 | MDN
