From 36470cb1e1100425541284ec9d0de65c817d9ef7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 11 Feb 2022 01:11:53 +0900 Subject: を移行準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/input/email/index.html | 220 +++++++++++------------ 1 file changed, 110 insertions(+), 110 deletions(-) (limited to 'files') diff --git a/files/ja/web/html/element/input/email/index.html b/files/ja/web/html/element/input/email/index.html index 9caad81df6..67d32a2062 100644 --- a/files/ja/web/html/element/input/email/index.html +++ b/files/ja/web/html/element/input/email/index.html @@ -3,29 +3,29 @@ title: slug: Web/HTML/Element/input/email tags: - Email - - Forms + - フォーム - HTML - - HTML forms - - Input Type - - Reference + - HTML フォーム + - 入力型 + - リファレンス translation_of: Web/HTML/Element/input/email --- -
{{HTMLRef("Input_types")}}
+{{HTMLRef("Input_types")}} -

{{HTMLElement("input")}} 要素の email 型は、ユーザーに一つのメールアドレス、または、 multiple 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。

+{{HTMLElement("input")}} 要素の `email` 型は、ユーザーに一つのメールアドレス、または、 `[multiple](/ja/docs/Web/HTML/Attributes/multiple)` 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。 -
{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}} - + -

入力値はフォームの送信前に自動的に検証され、空欄または正しい形式のメールアドレス (またはメールアドレスのリスト) のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。

+入力値はフォームの送信前に自動的に検証され、空欄または正しい形式のメールアドレス (またはメールアドレスのリスト) のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。 -

email 型に対応していないブラウザーでは、 email 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。

+`email` 型に対応していないブラウザーでは、 `email` 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。 - + @@ -38,7 +38,7 @@ translation_of: Web/HTML/Element/input/email - + @@ -47,21 +47,21 @@ translation_of: Web/HTML/Element/input/email
{{anch("Value", "値")}}{{anch("値")}} メールアドレスを表す {{domxref("DOMString")}}、または空欄
IDL 属性list および value`list` および `value`
メソッド
-

値

+## 値 -

{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には {{domxref("DOMString")}} が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には3種類があります。

+{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には {{domxref("DOMString")}} が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には3種類があります。
  1. 空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。
    2. -
  2. 単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 username@domain または username@domain.tld の形です。もちろんそれ以上のものもあります。{{anch("Validation", "検証")}}の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("regular expression", "正規表現")}}について参照してください。
    3. +
  3. 単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 `username@domain` または `username@domain.tld` の形です。もちろんそれ以上のものもあります。{{anch("検証")}}の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("regular expression", "正規表現")}}について参照してください。
  4. {{htmlattrxref("multiple", "input")}} 属性が指定されたとき (のみ)、値はカンマ区切りで複数の正しい形式のメールアドレスを入れることができます。それぞれのメールアドレスの前後にある空白は除去されます。
-

{{anch("Validation", "検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。

+{{anch("検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。

追加属性

-

型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 email 型の入力欄は次の属性にも対応しています。

+型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 `email` 型の入力欄は次の属性にも対応しています。 @@ -72,35 +72,35 @@ translation_of: Web/HTML/Element/input/email - + - + - + - + - + - + - + - + @@ -110,134 +110,134 @@ translation_of: Web/HTML/Element/input/email

{{htmlattrdef("maxlength")}}

-

ユーザーが email 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 maxlength が指定されていないか、無効な値が指定されていると、 email 入力欄には最大文字数が設定されません。この値は minlength の値以上である必要もあります。

+ユーザーが `email` 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、 `email` 入力欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。 -

フィールドのメールアドレスの長さが UTF-16 コード単位で maxlength の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

+フィールドのメールアドレスの長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

{{htmlattrdef("minlength")}}

-

ユーザーが email 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 maxlength で指定された値以下である必要があります。 minlength が指定されていないか、無効な値が指定されていると、 email 入力欄には最小文字数が設定されません。

+ユーザーが `email` 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、 `email` 入力欄には最小文字数が設定されません。 -

入力欄のメールアドレスの長さが UTF-16 コード単位で minlength の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

+入力欄のメールアドレスの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

{{htmlattrdef("multiple")}}

-

論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは{{anch("Allowing multiple e-mail addresses", "複数のメールアドレスの許可")}}または HTML 属性: multiple を参照してください。

+論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは{{anch("Allowing multiple e-mail addresses", "複数のメールアドレスの許可")}}または [HTML 属性: multiple](/ja/docs/Web/HTML/Attributes/multiple) を参照してください。
-

注: 通常、 {{htmlattrxref("required", "input")}} 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 multiple 属性を追加すると、ゼロ個のメールアドレス (空文字列、またはホワイトスペースのみの文字列) が妥当な値になります。言い換えれば、 multiple が指定されていると、 required の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。

+注: 通常、 {{htmlattrxref("required", "input")}} 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 `multiple` 属性を追加すると、ゼロ個のメールアドレス (空文字列、またはホワイトスペースのみの文字列) が妥当な値になります。言い換えれば、 `multiple` が指定されていると、 `required` の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。

{{htmlattrdef("pattern")}}

-

{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}

+{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}} -

詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。

+詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。 -

{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}

+{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} -

{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}

+{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -

{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}

+{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}

email 入力欄の使用

-

メールアドレスはウェブで最も頻繁に入力される文字列データです。ウェブサイトにログインするときに使われたり、情報をリクエストしたり、注文の確認をできるようにしたり、ウェブメールでつかったりなどです。そのような場合、 email 入力型は、ユーザーインターフェイスやメールアドレスの処理の構築作業を簡略化することができるので、ウェブ開発者の仕事をはるかに楽にすることができます。メールアドレスの入力欄を、 type の値を正しく email にして作成すれば、入力された文字列が少なくとも合法のメールアドレスである可能性がある但し書式であることを自動的に検証してくれます。これにより、ユーザーがアドレスを打ち間違えたり、無効なアドレスを入力したりすることを防ぐのに役立ちます。

+メールアドレスはウェブで最も頻繁に入力される文字列データです。ウェブサイトにログインするときに使われたり、情報をリクエストしたり、注文の確認をできるようにしたり、ウェブメールでつかったりなどです。そのような場合、 `email` 入力型は、ユーザーインターフェイスやメールアドレスの処理の構築作業を簡略化することができるので、ウェブ開発者の仕事をはるかに楽にすることができます。メールアドレスの入力欄を、 `type` の値を正しく `email` にして作成すれば、入力された文字列が少なくとも合法のメールアドレスである可能性がある但し書式であることを自動的に検証してくれます。これにより、ユーザーがアドレスを打ち間違えたり、無効なアドレスを入力したりすることを防ぐのに役立ちます。 -

しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。

+しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。
-

注: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用してはいけません。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う必要があります。

+注: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用してはいけません。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う必要があります。

単純な email 型の入力欄

-

現在、この要素を実装しているすべてのブラウザーが、これを基本的な検証機能がついた標準のテキスト入力欄として実装しています。しかし、仕様書ではブラウザーに自由度を許容しています。例えば、この要素はユーザーの端末に内蔵されたアドレス帳と統合され、メールアドレスをリストから選ぶことができるようにすることも可能です。多くの基本的なフォームでは、 email 入力欄は次のように実装されています。

+現在、この要素を実装しているすべてのブラウザーが、これを基本的な検証機能がついた標準のテキスト入力欄として実装しています。しかし、仕様書ではブラウザーに自由度を許容しています。例えば、この要素はユーザーの端末に内蔵されたアドレス帳と統合され、メールアドレスをリストから選ぶことができるようにすることも可能です。多くの基本的なフォームでは、 `email` 入力欄は次のように実装されています。 
<input id="emailAddress" type="email">
-

{{ EmbedLiveSample('A_simple_email_input', 600, 40) }}

+{{ EmbedLiveSample('A_simple_email_input', 600, 40) }} -

なお、妥当と判断されるのは空欄の場合と、単一の妥当な書式のメールアドレスが入力されている場合で、それ以外は妥当であるとは判断されません。 {{htmlattrxref("required", "input")}} 属性を追加することで、妥当な書式のメールアドレスのみが許容されるようになり、空欄の場合は妥当であるとは判断されなくなります。

+なお、妥当と判断されるのは空欄の場合と、単一の妥当な書式のメールアドレスが入力されている場合で、それ以外は妥当であるとは判断されません。 {{htmlattrxref("required", "input")}} 属性を追加することで、妥当な書式のメールアドレスのみが許容されるようになり、空欄の場合は妥当であるとは判断されなくなります。

複数のメールアドレスの許可

-

multiple 論理属性を追加することで、入力欄に複数のメールアドレスを受け付けるよう構成することができます。

+`[multiple](/ja/docs/Web/HTML/Attributes/multiple)` 論理属性を追加することで、入力欄に複数のメールアドレスを受け付けるよう構成することができます。 
<input id="emailAddress" type="email" multiple>
-

{{ EmbedLiveSample('Allowing_multiple_e-mail_addresses', 600, 40) }}

+{{ EmbedLiveSample('Allowing_multiple_e-mail_addresses', 600, 40) }} -

入力欄は単一のメールアドレスが入力された時や、任意の数のメールアドレスをカンマ区切りで入力した場合、その中にホワイトスペース文字がある場合も有効として扱われるようになります。

+入力欄は単一のメールアドレスが入力された時や、任意の数のメールアドレスをカンマ区切りで入力した場合、その中にホワイトスペース文字がある場合も有効として扱われるようになります。
-

注: multiple が使用されると、値を空欄にすることが許可されます。

+注: `multiple` が使用されると、値を空欄にすることが許可されます。
-

multiple が指定された場合に有効な文字列の例をいくつか示します。

+`multiple` が指定された場合に有効な文字列の例をいくつか示します。 -

無効な文字列の例をいくつか示します。

+無効な文字列の例をいくつか示します。

プレイスホルダー

-

フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここでプレイスホルダーが登場します。プレイスホルダーは、入力される value が取るべき値の形式を、有効な値の例を示すことで表現する値であり、 value が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。

+フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここでプレイスホルダーが登場します。プレイスホルダーは、入力される `value` が取るべき値の形式を、有効な値の例を示すことで表現する値であり、 `value` が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。 -

ここで、 email 入力欄に sophie@example.com というプレイスホルダーを設定します。なお、入力欄の中身を操作すると、プレイスホルダーが非表示になったり再表示されたりします。

+ここで、 `email` 入力欄に `sophie@example.com` というプレイスホルダーを設定します。なお、入力欄の中身を操作すると、プレイスホルダーが非表示になったり再表示されたりします。 
<input type="email" placeholder="sophie@example.com">
-

{{ EmbedLiveSample('Placeholders', 600, 40) }}

+{{ EmbedLiveSample('Placeholders', 600, 40) }}

入力欄の寸法の制御

-

入力ボックスの物理的な長さだけでなく、入力された文字列自身の許容される最小長および最大長も制御することができます。

+入力ボックスの物理的な長さだけでなく、入力された文字列自身の許容される最小長および最大長も制御することができます。

物理的な入力欄の寸法

-

入力ボックスの物理的な寸法は、入力ボックスの {{htmlattrxref("size", "input")}} 属性を使用して制御することができます。これにより、入力ボックスが同時に表示することができる文字数を指定することができます。この例では email 入力ボックスは15文字分の幅になります。

+入力ボックスの物理的な寸法は、入力ボックスの {{htmlattrxref("size", "input")}} 属性を使用して制御することができます。これにより、入力ボックスが同時に表示することができる文字数を指定することができます。この例では `email` 入力ボックスは15文字分の幅になります。 
<input type="email" size="15">
-

{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}

+{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}

要素の値の長さ

-

size は入力されたメールアドレスの長さ制限からは独立しており、フィールドを小さい空間に収めることができますが、より長いメールアドレス文字列が入力できます。入力されたメールアドレスの最小文字数は {{htmlattrxref("minlength", "input")}} 属性を使用して、同様に入力されたメールアドレスの最大文字数は {{htmlattrxref("maxlength", "input")}} を使用して設定することができます。

+`size` は入力されたメールアドレスの長さ制限からは独立しており、フィールドを小さい空間に収めることができますが、より長いメールアドレス文字列が入力できます。入力されたメールアドレスの最小文字数は {{htmlattrxref("minlength", "input")}} 属性を使用して、同様に入力されたメールアドレスの最大文字数は {{htmlattrxref("maxlength", "input")}} を使用して設定することができます。 -

以下の例は32文字の幅で、内容は3文字より短くなったり、64文字より長くなったりしないようにする必要があるメールアドレス入力ボックスを生成します。

+以下の例は32文字の幅で、内容は3文字より短くなったり、64文字より長くなったりしないようにする必要があるメールアドレス入力ボックスを生成します。 
<input type="email" size="32" minlength="3" maxlength="64">
-

{{EmbedLiveSample("Element_value_length", 600, 40) }}

+{{EmbedLiveSample("Element_value_length", 600, 40) }}

既定のオプションの提供

-

これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで email 入力欄に既定値を指定することができます。

+これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで `email` 入力欄に既定値を指定することができます。 
<input type="email" value="default@example.com">
-

{{EmbedLiveSample("Default_value", 600, 40)}}

+{{EmbedLiveSample("Default_value", 600, 40)}}

サジェスト値の提供

-

Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used e-mail addresses more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The list attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each option's value is the corresponding suggested value for the email entry box.

+Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used e-mail addresses more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The `list` attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each `option`'s `value` is the corresponding suggested value for the email entry box. 
<input type="email" size="40" list="defaultEmails">
 
@@ -249,41 +249,41 @@ translation_of: Web/HTML/Element/input/email
   <option value="hulk@grrrrrrrr.arg">
 </datalist>
-

{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}

+{{EmbedLiveSample("Offering_suggested_values", 600, 40)}} -

With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested e-mail addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.

+With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested e-mail addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value. -

Animation: Using keyboard entry to filter the list of suggested e-mail addresses

+Animation: Using keyboard entry to filter the list of suggested e-mail addresses

検証

-

There are two levels of content validation available for email inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid e-mail address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.

+There are two levels of content validation available for `email` inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid e-mail address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.
-

重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

+重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

基本的な検証

-

Browsers that support the email input type automatically provide validation to ensure that only text that matches the standard format for Internet e-mail addresses is entered into the input box. Browsers that implement the specification should be using an algorithm equivalent to the following regular expression:

+Browsers that support the `email` input type automatically provide validation to ensure that only text that matches the standard format for Internet e-mail addresses is entered into the input box. Browsers that implement the specification should be using an algorithm equivalent to the following regular expression: 
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
   [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-

To learn more about how form validation works and how to take advantage of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid, see Form data validation.

+To learn more about how form validation works and how to take advantage of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid, see [Form data validation](/ja/docs/Learn/HTML/Forms/Form_validation).
-

Note: There are known specification issues related to international domain names and the validation of e-mail addresses in HTML. See W3C bug 15489 for details.

+Note: There are known specification issues related to international domain names and the validation of e-mail addresses in HTML. See [W3C bug 15489](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489) for details.

パターンによる値検証

-

If you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for it to be valid. If the {{htmlattrxref("multiple", "input")}} attribute is specified, each individual item in the comma-delineated list of values must match the {{Glossary("regular expression")}}.

+If you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for it to be valid. If the {{htmlattrxref("multiple", "input")}} attribute is specified, each individual item in the comma-delineated list of values must match the {{Glossary("regular expression")}}. -

For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their e-mail address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address.

+For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their e-mail address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. -

Since inputs of type email validate against both the standard e-mail address validation and the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:

+Since inputs of type `email` validate against both the standard e-mail address validation and the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:
{{anch("list")}}`{{anch("list")}}` The id of the <datalist> element that contains the optional pre-defined autocomplete options
{{anch("maxlength")}}`{{anch("maxlength")}}` 入力欄が受け付ける最大文字数
{{anch("minlength")}}`{{anch("minlength")}}` 入力欄が取りうる、妥当と判断される最小文字列長
{{anch("multiple")}}`{{anch("multiple")}}` 複数のメールアドレスをカンマ区切りで入力することを受け付けるかどうか
{{anch("pattern")}}`{{anch("pattern")}}` 妥当と判断されるために、入力欄の内容が一致する必要がある正規表現
{{anch("placeholder")}}`{{anch("placeholder")}}` 空欄の時に入力欄に表示される入力例の値
{{anch("readonly")}}`{{anch("readonly")}}` 入力欄の内容を読み取り専用にするかどうかを示す論理属性
{{anch("size")}}`{{anch("size")}}` 入力欄の長さを何文字分にするかを表す数値
@@ -387,28 +387,28 @@ label::after {
-

ブラウザーの互換性

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

{{Compat("html.elements.input.input-email")}}

+{{Compat("html.elements.input.input-email")}} -

関連情報

+## 関連情報 -- cgit v1.2.3-54-g00ecf