例
唯一の3文字を（なし数字または特殊文字）を含むことができる入力フィールドを持つHTMLフォーム：
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
»それを自分で試してみてください 詳細以下の例「自分にそれを試してみてください」。
定義と使用法
pattern属性は、正規表現を指定<input>要素の値を比較して確認されています。
注意： pattern ：属性は、次の入力タイプで動作するtext, date, search, url, tel, email 、およびpassword 。
ヒント：グローバル使用titleユーザーを支援するためのパターンを記述するために属性を。
ヒント：詳細については、こちらをご覧ください正規表現私たちのJavaScriptチュートリアルで。
ブラウザのサポート
表中の数字は完全に属性をサポートする最初のブラウザのバージョンを指定します。
| 属性 | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | サポートされていません | 9.6 |
HTML 4.01とHTML5の違い
pattern属性はHTML5で新しく追加されました。
構文
<input pattern="regexp">
属性値
| 値 | 説明 |
|---|---|
| regexp | ことを正規表現で指定<input>要素の値を比較して確認されは、 |
その他の例
例
<input>を持つ要素type="password" 6文字以上を含める必要があります。
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
»それを自分で試してみてください 例
<input>を持つ要素type="password"は、少なくとも1の数である8文字以上、および1つの大文字と小文字を含める必要があります。
<form action="demo_form.asp">
Password: <input
type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain
at least one number and one uppercase and lowercase letter, and at least 8
or more characters">
<input type="submit">
</form>
»それを自分で試してみてください 例
<input>を持つ要素type="email"次の順序でなければなりません： 文字 @ 文字 。 @記号に続くドメイン （文字は、その後、複数の文字が続き、 "."
後"." 記号は、あなただけのAからZまでの2〜3文字を書き込むことができます。
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
»それを自分で試してみてください 例
<input>を持つ要素type="search"次の文字を含めることはできません： 'または"
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
»それを自分で試してみてください 例
<input>を持つ要素type="url"で開始する必要がありますhttp://またはhttps:// 、少なくとも1文字が続きます：
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
»それを自分で試してみてください