“input”要素~“pattern”属性

“pattern”属性について

“pattern”属性は“input”要素で表される入力欄に入力可能な値の書式を定義します。

“pattern”属性は“type”属性に以下の値が指定されている場合に使用できます。

• “text”
• “search”
• “url”
• “tel”
• “email”
• “password”

“pattern”属性の値はJavaScriptの正規表現で記述します。

“pattern”属性で入力可能な入力値の書式を定義すると対応しているブラウザではフォームの送信時に入力値が定義されている書式を満たしているかを検証する妥当性のチェックが行われます。“pattern”属性で定義された書式を満たさない入力値は送信できなくなります。

“type”属性の値が“url”と“email”の場合は“pattern”属性が指定されていない場合でも入力値が妥当な形式であるかがブラウザによってチェックされます。“pattern”属性を指定した場合はブラウザがこれらの入力欄で許容する書式と“pattern”属性で定義した書式の両方を満たす入力値だけが送信できます。

“multiple”属性が指定されていて複数の入力値がある場合はそれぞれの入力値が“pattern”属性で定義されてた書式を満すかが検証されます。

“pattern”属性を指定した場合、“title”属性で書式についての説明を示すことが推奨されます。

指定できる値

属性値として指定された正規表現が処理される際には“^(?:”~“)$”に挟まれているように扱われます。

正規表現

正規表現とは？

“正規表現(Regular expression)”はさまざまな文字列をその法則性などから一つの表現で記述するための方法です。

例えば以下のような文字列があるとします。

cat
tabby
calico
tortoiseshell
spotted
pointed


これらの文字列はすべて以下の正規表現で表すことができます。

^[a-z]+$

正規表現は“メタ文字(Metacharacter)”と呼ばれる特別な意味を持った記号(“\”や“[”、“]”など)を組み合わせることで文字列の法則性を表現します。上の例では“a”から“z”のアルファベットを並べた文字列を表現しています。

多くの場合、正規表現はプログラムで同じ法則性を持った文字列を抽出したり、一括で同じ法則性を持った文字列に置換したりするために使用されます。

正規表現はさまざまなプログラム言語で定義されていますが、“pattern”属性の値として記述できる正規表現はJavascriptの仕様書で定義されています。

Javascriptの正規表現には部分一致もありますが、“pattern”属性に指定された正規表現の場合は部分一致は書式を満たしているとは扱われず、入力値全体が正規表現に一致した場合にだけ書式を満たしているとみなされます。

メタ文字

以下は正規表現で使用できる主なメタ文字です。

“pattern”属性に指定する正規表現の例

正規表現ではあらゆる書式が定義可能ですが、以下では入力値の書式としてよく使用されるものを取り上げています。

ひらがなのみ

[\u3042-\u309F\u30FC]+

カタカナのみ

以下の例では全角カタカナのみを入力可能にします。

[\u30A1-\u30FA\u30FC]+

以下の例では半角カタカナのみを入力可能にします。

[\uFF66-\uFF9D\uFF0D]+

英数字のみ

以下の例では半角の英数字のみを入力可能にします。

[0-9A-Za-z]+

以下の例では半角の英字のみを入力可能にします。

[A-Za-z]+

以下の例では半角で大文字の英字のみを入力可能にします。

[A-Z]+

以下の例では半角で小文字の英字のみを入力可能にします。

[a-z]+

入力文字数を制限

以下の例では文字数が8文字以上の入力値のみ許可します。

.{8,}

以下の例では文字数が1文字から8文字の入力値のみ許可します。

.{1,8}

以下の例では文字数が8文字の入力値のみ許可します。

.{8}

以下の例では文字数が10桁から11桁の数字のみ許可します。

\d{10,11}

郵便番号

以下の例では任意でハイフン(“-”)を含めた形式の郵便番号のみ入力値として許可します。

\d{3}-\d{4}

以下の例ではハイフン(“-”)が任意です。

\d{3}-?\d{4}

電話番号

“type”属性の値が“tel”の場合でも電話番号はさまざまな形式であるため通常はブラウザによる妥当性のチェックは行われません。

入力できる入力値を日本で一般的な形式の電話番号のみにしたい場合は“pattern”属性で制約することができます。

以下の例ではハイフン(“-”)を含めた形式の電話番号のみ入力値として許可します。

\d{2,4}-\d{2,4}-\d{3,4}

以下の例では任意でハイフン(“-”)が任意です。

\d{2,4}-?\d{2,4}-?\d{3,4}

メールアドレス

[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$

URL

http(|s)://[0-9a-zA-Z/#&?%\.\-\+_=]+

空白文字のみの入力値を拒否

\S*

“'”や“"”を含む入力値を拒否

[^\x22\x27]*

サンプルコード

<form method="post" action="sample-inputtag6.php" target="_blank">

<fieldset>

<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="cat-name" pattern="[\u3042-\u309F\u30FC]+" title="ひらがなで入力してください" required></label></p>
<p><label>年齢：<input type="text" name="cat-age" pattern="[\uFF10-\uFF19]+" title="全角数字で入力してください" required></label></p>
<p><label>体色：<input type="text" name="cat-color" pattern="[\u3042-\u309F\u30FC]+" title="ひらがなで入力してください" required></label></p>

</fieldset>
<fieldset>

<legend>あなたの情報</legend>
<p><label>名前：<input type="text" name="name" pattern="[\u30A1-\u30FA\u30FC]+" title="全角カタカナで入力してください" required></label></p>
<p><label>メールアドレス：<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="アットマーク（“@”）を含んだ形式で入力してください" required></label></p>
<p><label>電話番号：<input type="tel" name="tel" pattern="\d{2,4}-\d{3,4}-\d{3,4}" title="ハイフン（“-”）を含んだ形式で入力してください"></label></p>
<p><label>ウェブサイト：<input type="url" name="website" pattern="http(|s)://[0-9a-zA-Z/#&?%\.\-\+_=]+" title="“http://”もしくは“https://”ではじまるＵＲＬを入力してください"></label></p>
<p><label>使命：<input type="text" name="mission" pattern="\S*" title="空白文字だけでは送信できません。" required></label></p>

</fieldset>
<p>

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

</p>

</form>

あなたの猫の情報

名前：

年齢：

体色：

あなたの情報

名前：

メールアドレス：

電話番号：

ウェブサイト：

使命：

送信する

＊送信すると入力内容が表示されます。