HTML <input> pattern属性

HTML <input> タグ

定義と使用法

pattern 属性は正規表現を定義し、フォームを送信する際に<input>要素の値をその正規表現でチェックします。

注意：pattern 属性は以下の入力タイプに適用されます：

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

ヒント：を使用して 全体的なtitle属性 このパターンを説明して、ユーザーが理解しやすくするために

ヒント：私たちの JavaScript 教程 正規表現に関するより多くの知識を学ぶために

例

例1

以下は、3文字（数字や特殊文字は含まない）の入力フィールドを含むHTMLフォームです：

<form action="/action_page.php">
  <label for="country_code">国家コード：</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="3文字の国コード"><br><br>
  <input type="submit">
</form>

実際に試してみてください

例 2

以下は、属性が "password" の <input> 要素です。少なくとも8文字を含む必要があります：

<form action="/action_page.php">
  <label for="pwd">パスワード：</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="8文字以上の文字">
  <input type="submit">
</form>

実際に試してみてください

例 3

以下は、属性が "password" の <input> 要素です。少なくとも8文字を含み、数字、大文字、小文字を含む必要があります：

<form action="/action_page.php">
  <label for="pwd">パスワード：</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="少なくとも8文字で、数字、大文字、小文字を含む必要があります">
  <input type="submit">
</form>

実際に試してみてください

例 4

以下は、属性が "email" の <input> 要素です。以下の順序で入力する必要があります：characters@characters.domain。

文字と @ 符号で構成され、さらに文字が続きます。その後、 "." 符号が来ます。 "." 符号の後ろには、少なくとも2文字の aからzのアルファベットを追加してください：

<form action="/action_page.php">
  <label for="email">電子メール：</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

実際に試してみてください

例 5

以下は、属性が "search" の <input> 要素です。以下の文字は含まれないようにしてください： ' または " 。

<form action="/action_page.php">
  <label for="search">検索：</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="無効な入力">
  <input type="submit">
</form>

実際に試してみてください

例 6

以下は、属性が "url" の <input> 要素です。必ず http:// または https:// で始まり、少なくとも1文字が続きます：

<form action="/action_page.php">
  <label for="website">ホームページ:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="http:// を含む">
  <input type="submit">
</form>

実際に試してみてください

文法

<input pattern="regexp">

属性値

値 説明
regexp <input> 要素の値を確認する正規表現を指定します。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

注釈：pattern 属性は HTML5 で新しい属性です。

HTML <input> タグ