HTML 属性: pattern
pattern
属性は、フォームコントロールの値が一致すべき正規表現を指定します。null
以外の値が pattern
値によって設定された制約に適合しない場合、ValidityState
オブジェクトの読み取り専用の patternMismatch
プロパティが真になります。
試してみましょう
概要
pattern
属性は text, tel, email, url, password, search の入力型の属性です。
pattern
属性は、制約検証を通過させるために、入力の value
が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 RegExp
型で使用されたり、正規表現ガイドで説明されているものと同じものです。正規表現をコンパイルする際に 'u'
フラグが指定されるので、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。
パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。
メモ: title
属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼ってはいけません。ユーザービリティについての詳細は以下を参照してください。
pattern 属性に対応している入力型の中には、特に email および url 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 ValidityState
オブジェクトの読み取り専用の typeMismatch
プロパティが true になります。
ユーザービリティ
pattern
を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する title
属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。
制約検証
入力の値が空文字列でなく、正規表現全体に一致しない場合、ValidityState
オブジェクトの patternMismatch
プロパティが true
になって報告される制約違反が存在することになります。。
パターンの正規表現は、値に対して照合されるとき、その始まりが文字列の始まりに、その終わりが文字列の終わりに固定されます。これは、JavaScript の正規表現と少し異なります。pattern 属性の場合、値のどこか一部ではなく値全体に対して照合され、まるでパターンの先頭に ^(?:
が、末尾に )$
があるかのようになります。
メモ: pattern
属性が値なしで指定された場合、その値は暗黙的に空文字列となります。したがって、空でない入力欄の value
は制約に違反することになります。
例
電話番号の照合
以下のものを考えてみてください。
html
<p>
<label>
Enter your phone number in the format (123) - 456 - 7890 (<input
name="tel1"
type="tel"
pattern="[0-9]{3}"
placeholder="###"
aria-label="3-digit area code"
size="2" />) -
<input
name="tel2"
type="tel"
pattern="[0-9]{3}"
placeholder="###"
aria-label="3-digit prefix"
size="2" />
-
<input
name="tel3"
type="tel"
pattern="[0-9]{4}"
placeholder="####"
aria-label="4-digit number"
size="3" />
</label>
</p>
ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で pattern
属性によってそれぞれ設定されています。
値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 true
の場合、要素は CSS の :invalid
擬似クラスに一致します。
css
input:invalid {
border: red solid 3px;
}
代わりに minlength
と maxlength
属性を用いた場合、 validityState.tooLong
または validityState.tooShort
が true になります。
パターンの指定
pattern
属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます(正規表現を使用して入力を検証する簡単な集中講座は、正規表現での検証を参照してください)。
以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。
html
<form>
<div>
<label for="uname">Choose a username: </label>
<input
type="text"
id="uname"
name="name"
required
size="45"
pattern="[a-z]{4,8}"
title="4 to 8 lowercase letters" />
<span class="validity"></span>
<p>Usernames must be lowercase and 4-8 characters in length.</p>
</div>
<div>
<button>Submit</button>
</div>
</form>
This renders like so:
アクセシビリティの考慮
コントロールに pattern
属性がある場合、 title
属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために title
属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。
一部のブラウザーでは title
を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。
仕様書
Specification |
---|
HTML Standard # attr-input-pattern |
ブラウザーの互換性
BCD tables only load in the browser