HTML5でメールアドレスを検証する方法

ニュースレターや通知など、電子メールアドレスをキャプチャするHTMLフォームを設定するより簡単なことは何ですか? そのフォームで電子メールアドレスを間違えて入力してから、すべてのサインアップフォームの間違ったアドレスをブラウザに記憶させるようにしてください。

フォームに入力した電子メールアドレスを検証したいが複雑な手間やスクリプトを避けたい場合、HTML5を使用すると、ブラウザを使わずに、JavaScriptを使わずに、ブラウザに依存することができます。

HTML5による電子メールアドレスの検証

ユーザーのブラウザがHTML Webフォームに入力したメールアドレスを検証するようにするには:

type = "email"を認識しないブラウザは、入力フィールドを通常のtype = "text"フィールドのように扱うべきです(そして、すべてのことがわかるように)。

HTML5電子メールアドレス検証の警告

HTML電子メールアドレスの検証は、HTML5をサポートしているフォームの要素入力を検証するブラウザでのみ機能します。 他のブラウザとバックアップでは、 PHPなどを使用して電子メールアドレスの検証を行うことができます。

HTML5電子メールアドレス検証をサポートするブラウザには、Safari 5+、Google Chrome 6+、Mozilla Firefox 4+、Opera 10+などがあります。 Safari 5とGoogle Chrome 6-8は無効なメールアドレス入力を受け付けませんが、他のブラウザとは異なり、ユーザーがエラーを修正するのに役立ちません。

HTML5電子メールアドレス検証の例

HTML5でユーザーのブラウザで電子メールアドレスの検証を行うには、次のコードを使用します。