[4]

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

属性値

[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] email と url では、 type の定義上の値の制約に加え、 pattern の制約にも一致しなければなりません。 WF2 2.6

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

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

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

安全性

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

IW:WF2:"#security"

例

[2]

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

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

IW:WF2:"#IDN"

[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.

メモ

[24] Web Applications 1.0 r5738 Define <input type=email multiple pattern='...'> as applying to each e-mail address, not to the whole list. ( (2011-01-05 08:28:00 +09:00 版)) 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) ( (2013-10-05 12:53:16 +09:00 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=15291

[26] Web Applications 1.0 r8833 Make pattern= support Unicode properly.]] ( (2014-10-11 05:40:00 +09:00 版)) https://html5.org/r/8833

[27] Encourage logging pattern="" compilation failures · whatwg/html@d2a0cbd (2016-01-02 11:09:12 +09:00 版) https://github.com/whatwg/html/commit/d2a0cbdec345ffe5cc803683b30971b5786a5188

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

[34] Refine the inputmode attribute, and expose it on contenteditable (dtapuska著, 2017-12-15 03:35:19 +09:00) https://github.com/whatwg/html/commit/d430f275f4e253956a5965c8b90885d3ac4e90c1

[35] Digit input type · Issue #1626 · whatwg/html (2017-12-17 22:53:09 +09:00) https://github.com/whatwg/html/issues/1626

[36] Add the enterkeyhint="" attribute (dtapuska著, 2018-09-13 05:53:59 +09:00) https://github.com/whatwg/html/commit/a5422d984d9b7b8a4e0ad7a0ad237b07f190cc93

仕様書

属性値

提出

安全性

関連

例

歴史

Web Forms 2.0

メモ