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>
```


```
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```


This renders like so:

### アクセシビリティの考慮

コントロールに `pattern` 属性がある場合、 `title` 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために `title` 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。

一部のブラウザーでは `title` を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-input-pattern |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 制約検証
* フォーム: データフォーム検証
* 正規表現