[4] [CODE(HTMLe)@en[[[input]]]] [[要素]]と [CODE(HTMLe)@en[[[textarea]]]] [[要素]]の [DFN[[CODE(HTMLa)@en[[[pattern]]]] [[属性]]]]は、 [[値]]が[[一致]]しなければならない[[パターン]]を指定します。 [SRC@en[WF2 2.6]] [6] :[[要素型]]: [CODE(HTMLe)@en[[QN[[[input]]] [http://www.w3.org/1999/xhtml]]]], [CODE(HTMLe)@en[[QN[[[textarea]]] [http://www.w3.org/1999/xhtml]]]] :[CODE(DOMa)@en[[[type]]]]: [CODE(HTML)@en[[[text]]]], [CODE(HTML)@en[[[password]]]], [CODE(HTML)@en[[[url]]]], [CODE(HTML)@en[[[email]]]], [CODE(HTMLe)@en[[[textarea]]]] * 仕様書 [REFS[ - [28] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-12-29 06:24:12 +09:00]] 版) ]REFS] * 属性値 [5] [CODE(HTMLa)@en[[[pattern]]]] [[属性値]]は、 [[ECMA 262]] 第3版で規定されている[[正規表現]]です。 [SRC@en[WF2 2.6]] [10] ただし、[[利用者エージェント]]は、 [[値]]全体に対して[[一致]]するか検査[['''しなければなりません''']]。 つまり、最初に [CODE(JS)@en[[[^]][[(?:]]]] が、最後に [CODE(JS)@en[[[)]][[$]]]] があるものとして扱われます。 また、[[旗]] [CODE@en[[[global]]]], [CODE@en[[[ignoreCase]]]], [CODE@en[[[multiline]]]] はいずれも無効と[['''しなければなりません''']]。 [SRC@en[WF2 2.6]] ;; [11] 全体と[[一致]]するとしたのは、 ほとんどの場合[[著者]]はそうしたいであろうこと、 [[著者]]は一部とだけ[[一致]]を確認したいが[[利用者エージェント]]は全体と[[一致]]を試みるなら実際に試してみれば意図通りに動作しないことにすぐ気づくが、 逆に[[著者]]は全体と[[一致]]を確認したいが[[利用者エージェント]]は一部と[[一致]]を試みるとしたら実際に試してみても気づきにくいことからです。 [SRC@en[WF2 2.6]] ;; [12] [[旗]] [CODE@en[[[multiline]]]] が無効なので、 [CODE(JS)@en[[[.]][[*]]]] は[[改行]]と[[一致]]しません。 代わりに、 [CODE(JS)[[['''[''']][[\s]][[\S]][[''']''']][[*]]]] などを使えば[[改行]]も含めて[[一致]]させられます。 [SRC@en[WF2 2.6]] ;; [13] [[ECMAScript]] の[[ソース・コード]]に記述する場合とは異なり、 [CODE(char)[[[/]]]] は特別な意味を持ちません。 (>>14) [SRC@en[WF2 2.6]] [7] '''既定値''' この[[属性]]が与えられなければ、 [[パターン]]の制約はないものとされます。 [SRC@en[WF2 2.6]] [18] '''誤り処理''' [[属性値]]が[[妥当]]な[[正規表現]]でない場合、 [[値]]の[[妥当性検証]]に関しては、 [CODE(HTMLa)@en[[[pattern]]]] [[属性値]]が与えられなかったかのように処理します。 [SRC@en[WF2 2.6]] [32] [[利用者エージェント]]は、[[コンパイル]]に失敗した時は、 [[著者]]を助けるため[[開発者コンソール]]に報告する[RUBYB[べき]@en[encouraged]]です [SRC[>>28]]。 * 提出 [8] [[フォーム]]を[[提出]]するためには、 [CODE(HTMLa)@en[[[pattern]]]] [[属性]]で指定された[[パターン]]に[[欄]]の[[値]]が[[一致]][['''しなければなりません''']]。 [SRC@en[WF2 2.6]] [15] [CODE(HTML)@en[[[email]]]] と [CODE(HTML)@en[[[url]]]] では、 [CODE(HTMLa)@en[[[type]]]] の定義上の[[値]]の制約に加え、 [CODE(HTMLa)@en[[[pattern]]]] の制約にも[[一致]][['''しなければなりません''']]。 [SRC@en[WF2 2.6]] [17] [[利用者エージェント]]は、[[値]]が [CODE(HTMLa)@en[[[pattern]]]] と[[一致]]しない場合、 [[旗]] [CODE(DOM)@en[[[patternMismatch]]]] を設定[['''しなければなりません''']]。 [SRC@en[WF2 2.6]] ;; [CODE(HTMLa)@en[[[type]]]] による制約にも[[一致]]しない場合は、 [CODE(DOM)@en[[[typeMismatch]]]] も設定[['''しなければなりません''']]。 [19] なお、[[値が選択されていない]][[欄]]は、 [CODE(HTMLa)@en[[[pattern]]]] と[[一致]]する必要はありません。 [SRC@en[WF2 2.6]] [[#comment]] ** 安全性 [1] [[Web Forms 2.0]] では、[[利用者エージェント]]が、 [[安全性]]のために、[[著者]]が指定できる値の長さを制限することを勧めています。 例として、 [CODE(HTMLa)@en[[[pattern]]]] に指定した[[正規表現]]の[[評価]]に長くかかり過ぎるなら、 長さを制限すればよい、と述べています。 ;; [[#comment]] ** 関連 [20] [[著者]]は、 [CODE(HTMLa)@en[[[pattern]]]] [[属性]]の説明を [CODE(HTMLa)@en[[[title]]]] [[属性]]に含めるように[['''するべきです''']]。 [[利用者エージェント]]は、 [CODE(HTMLa)@en[[[pattern]]]] に[[一致]]しない時やその他適切な時に[[利用者]]に [CODE(HTMLa)@en[[[title]]]] [[属性]]の[[内容]]を通知[['''して構いません''']]。 [SRC@en[WF2 2.6]] [22] [CODE(HTMLa)@en[[[pattern]]]] [[属性]]と [CODE(HTMLa)@en[[[title]]]] [[属性]]の両方を使用する場合、 [CODE(HTMLa)@en[[[title]]]] [[属性]]は[[パターン]]を説明[['''しなければなりません''']]。 [[利用者]]がその[[欄]]に入力するに当たって有用ならば、 他の情報も含めることもできます。 [SRC@en[WF2 2.6]] ;; もし [CODE(HTMLa)@en[[[title]]]] が[[パターン]]の説明でなく、 単なる[[欄]]の名前にとどまっていると、 [Q[入力された内容は[[パターン]]に[[一致]]していません。誕生日。]] のようにおかしなことになります。 [SRC@en[WF2 2.6]] [23] [[利用者エージェント]]は、 [[tooltip]] その他の方法で、[[誤り]]がなくとも [CODE(HTMLa)@en[[[title]]]] を[[レンダリング]][['''して構いません''']]。 [[利用者]]は、[[誤り]]が起こったことを前提とする文言にしないように注意[['''するべきです''']]。 [SRC@en[WF2 2.6]] [[#comment]] ** 例 [2] [PRE(HTML example code)[ pattern="[\x00-\x7F]+" ]PRE] [CODE(HTML)@en[[[url]]]] や [CODE(HTML)@en[[[email]]]] で使うと、 [[IDN]] の ([[IDNA]] [[符号化]]されていない) [[ドメイン名]]の[[提出]]を阻止できます。 ;; [9] [PRE(HTML example code)[ ]PRE] [SRC@en[WF2 2.6]] [14] [PRE(HTML example code)[ pattern="/etc/.+" ]PRE] [PRE(HTML example code)[ pattern="\/etc\/.+" ]PRE] [[ECMAScript]] の[[ソース・コード]]中とは異なり、 [CODE(char)[[[/]]]] は特別な意味を持ちません (>>13)。 ですから、この2つの例はいずれも同じ意味になります。 [16] [SRC@en[WF2 2.6]] [PRE(HTML bad example code)[

This form could never be submitted, as the following required field can never be satisfied:

]PRE] この例では、[[値]]は [[IRI]] と[['''しなければなりません''']] ([CODE(HTMLa)@en[[[type]]]] [CODE(HTML)@en[[[url]]]]) し、 [CODE(char)[[[:]]]] が含まれないように[['''しなければなりません''']] ([CODE(HTMLa)@en[[[pattern]]]]) し、 [[値が選択されていない]]状態と[['''してはなりません''']] ([CODE(HTMLa)@en[[[required]]]])。 これらの条件をすべて満たすことは ([[IRI]] の構文の定義上) 不可能なので、この[[フォーム]]は[[提出]]できません。 ;; このように矛盾する制約が課されていても、 意味はありませんが、[[不適合]]とはなりません。 [SRC@en[WF2 2.6]] [21] [SRC@en[WF2 2.6]] [PRE(HTML example code)[ ]PRE] [[利用者エージェント]]は、[[利用者]]に次のような通知を表示することができます (>>20)。 [SRC@en[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]] で導入されました。 [REFS[ - [3] [[Web Forms 2.0]] -- [CSECTION@en[2.6. The [CODE(HTMLa)@en[[[pattern]]]] attribute]] ]REFS] [30] [[Opera]] が最初に実装しました。 [31] その後仕様書の統合により [[HTML5]] に移動しました。 * メモ [24] [CITE@en[Web Applications 1.0 r5738 Define as applying to each e-mail address, not to the whole list.]] ( ([TIME[2011-01-05 08:28:00 +09:00]] 版)) [25] [CITE@en[Bug 15291 – Allow textarea@pattern (input@pattern is specced already so why not)]] ( ([TIME[2013-10-05 12:53:16 +09:00]] 版)) [26] [CITE@en[Web Applications 1.0 r8833 Make pattern='' support Unicode properly.]] ( ([TIME[2014-10-11 05:40:00 +09:00]] 版)) [27] [CITE@en[Encourage logging pattern="" compilation failures · whatwg/html@d2a0cbd]] ([TIME[2016-01-02 11:09:12 +09:00]] 版) [33] [CITE@en[HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog]] ([TIME[2016-04-29 12:22:54 +09:00]] 版) [34] [CITE@en[Refine the inputmode attribute, and expose it on contenteditable]] ([[dtapuska]]著, [TIME[2017-12-15 03:35:19 +09:00]]) [35] [CITE@en[Digit input type · Issue #1626 · whatwg/html]] ([TIME[2017-12-17 22:53:09 +09:00]]) [36] [CITE@en[Add the enterkeyhint="" attribute]] ([[dtapuska]]著, [TIME[2018-09-13 05:53:59 +09:00]])