pattern

pattern 属性 (HTML)

[4] input 要素textarea 要素pattern 属性は、 一致しなければならないパターンを指定します。 WF2 2.6

[6]

要素型
input, textarea
type
text, password, url, email, textarea

仕様書

属性値

[5] pattern 属性値は、 ECMA 262 第3版で規定されている正規表現です。 WF2 2.6

[10] ただし、利用者エージェントは、 全体に対して一致するか検査しなければなりません。 つまり、最初に ^(?: が、最後に )$ があるものとして扱われます。 また、 global, ignoreCase, multiline はいずれも無効としなければなりませんWF2 2.6

[11] 全体と一致するとしたのは、 ほとんどの場合著者はそうしたいであろうこと、 著者は一部とだけ一致を確認したいが利用者エージェントは全体と一致を試みるなら実際に試してみれば意図通りに動作しないことにすぐ気づくが、 逆に著者は全体と一致を確認したいが利用者エージェントは一部と一致を試みるとしたら実際に試してみても気づきにくいことからです。 WF2 2.6
[12] multiline が無効なので、 .*改行一致しません。 代わりに、 [\s\S]* などを使えば改行も含めて一致させられます。 WF2 2.6
[13] ECMAScriptソース・コードに記述する場合とは異なり、 / は特別な意味を持ちません。 (>>14) WF2 2.6

[7] 既定値

この属性が与えられなければ、 パターンの制約はないものとされます。 WF2 2.6

[18] 誤り処理

属性値妥当正規表現でない場合、 妥当性検証に関しては、 pattern 属性値が与えられなかったかのように処理します。 WF2 2.6

[32] 利用者エージェントは、コンパイルに失敗した時は、 著者を助けるため開発者コンソールに報告するべき (encouraged) です >>28

提出

[8] フォーム提出するためには、 pattern 属性で指定されたパターン一致しなければなりませんWF2 2.6

[15] emailurl では、 type の定義上のの制約に加え、 pattern の制約にも一致しなければなりませんWF2 2.6

[17] 利用者エージェントは、pattern一致しない場合、 patternMismatch を設定しなければなりませんWF2 2.6

type による制約にも一致しない場合は、 typeMismatch も設定しなければなりません

[19] なお、値が選択されていないは、 pattern一致する必要はありません。 WF2 2.6

安全性

[1] Web Forms 2.0 では、利用者エージェントが、 安全性のために、著者が指定できる値の長さを制限することを勧めています。 例として、 pattern に指定した正規表現評価に長くかかり過ぎるなら、 長さを制限すればよい、と述べています。

関連

[20] 著者は、 pattern 属性の説明を title 属性に含めるようにするべきです利用者エージェントは、 pattern一致しない時やその他適切な時に利用者title 属性内容を通知して構いませんWF2 2.6

[22] pattern 属性title 属性の両方を使用する場合、 title 属性パターンを説明しなければなりません利用者がそのに入力するに当たって有用ならば、 他の情報も含めることもできます。 WF2 2.6

もし titleパターンの説明でなく、 単なるの名前にとどまっていると、 入力された内容はパターン一致していません。誕生日。 のようにおかしなことになります。 WF2 2.6

[23] 利用者エージェントは、 tooltip その他の方法で、誤りがなくとも titleレンダリングして構いません利用者は、誤りが起こったことを前提とする文言にしないように注意するべきですWF2 2.6

[2]

pattern="[\x00-\x7F]+"

urlemail で使うと、 IDN の (IDNA 符号化されていない) ドメイン名提出を阻止できます。

[9]

<label> Credit Card Number:
 <input type="text" pattern="[0-9]{13-16}" name="cc" />
</label>

WF2 2.6

[14]

pattern="/etc/.+"

pattern="\/etc\/.+"

ECMAScriptソース・コード中とは異なり、 / は特別な意味を持ちません (>>13)。 ですから、この2つの例はいずれも同じ意味になります。

[16] WF2 2.6

<form>
 <p>
  This form could never be submitted, as the following required field
  can never be satisfied:
  <input type="url" pattern="[^:]+" required="required" name="test"/>
 </p>
</form>

この例では、IRIしなければなりません (type url) し、 : が含まれないようにしなければなりません (pattern) し、 値が選択されていない状態としてはなりません (required)。 これらの条件をすべて満たすことは (IRI の構文の定義上) 不可能なので、このフォーム提出できません。

このように矛盾する制約が課されていても、 意味はありませんが、不適合とはなりません。 WF2 2.6

[21] WF2 2.6

<label> Part number:
 <input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/>
</label>

利用者エージェントは、利用者に次のような通知を表示することができます (>>20)。 WF2 2.6

A part number is a digit followed by three uppercase letters.

You cannot complete this form until the field is correct.

歴史

Web Forms 2.0

[29] WF2 で導入されました。

[30] Opera が最初に実装しました。

[31] その後仕様書の統合により HTML5 に移動しました。

メモ

[24] Web Applications 1.0 r5738 Define <input type=email multiple pattern='...'> as applying to each e-mail address, not to the whole list. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5737&to=5738

[25] Bug 15291 – Allow textarea@pattern (input@pattern is specced already so why not) ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=15291

[26] Web Applications 1.0 r8833 Make pattern= support Unicode properly.]] ( ( 版)) https://html5.org/r/8833

[27] Encourage logging pattern="" compilation failures · whatwg/html@d2a0cbd ( 版) https://github.com/whatwg/html/commit/d2a0cbdec345ffe5cc803683b30971b5786a5188

[33] HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog ( 版) http://developer.hatenastaff.com/entry/2016/04/28/172005

[34] Refine the inputmode attribute, and expose it on contenteditable (dtapuska著, ) https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1

[35] Digit input type · Issue #1626 · whatwg/html () https://github.com/whatwg/html/issues/1626

[36] Add the enterkeyhint="" attribute (dtapuska著, ) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93