HTML5が登場する前は、メールアドレスを扱うには、Javascriptを使ってメールアドレスを検証する必要がありました。
Eメールの入力要素は、Eメールアドレスを扱い、検証するために特別に設計されています。 ブラウザによっては、入力された情報が正しくないことをユーザーに警告し、ユーザーが修正するまでフォームを送信しないようにします。
サンプルコード：
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">一般的な使用方法
以下のコードをテキスト文書に保存し、Webブラウザで開いてください。
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>このようなページになります:
一度に複数のアドレスを収集したい場合は、multiple属性を追加します。
<input type="email" multiple>ユーザーはカンマで区切られた1つまたは複数のアドレスを入力できるようになりました。
バリデーション
入力タイプ email をサポートするブラウザは、さまざまな方法でバリデーション サポートを提供しています。
最低限必要なのは、@と.の記号があることと、文字の間にスペースがないことです。 なお、提供されたアドレスが存在するかどうかを確認することはできませんのでご了承ください。 これは、サーバー側のスクリプトで処理される問題です。
Mozilla Firefox
ユーザーが入力を完了して別の要素に移動するとすぐに、Firefox は入力されたデータをチェックします。 
ユーザーが入力したメールアドレスを変更せずに送信ボタンをクリックすると、フォームは送信されず、入力時のエラーメッセージを示すツールチップが表示されます。
Google Chrome
Google Chromeでは、ユーザーが無効なデータを入力した場合、視覚的なサポートを提供しません。
しかしながら、送信時にはエラーメッセージが表示され、ユーザーが何を提供すべきかを示すヒントがツールチップで示されます。
ユーザーにカスタムのエラーメッセージを提供したい場合は、title属性を使用することができます。
<input type="email" title="Please Provide A Valid Email Address !">ブラウザのサポート
Eメールの入力タイプは、すべてのモダンブラウザで広くサポートされています。 サポートされている最小バージョンについては、以下の表を確認してください。 IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
ブラウザのサポートの詳細については、以下を参照してください。 Can I Use email input type
一般的に、使用しているブラウザのバージョンがこの入力タイプをサポートしていない場合、代わりに入力タイプのテキストが表示されます。
Android および IOS プラットフォームでは、入力タイプが email の場合、キーボードに @ キーと .キーが自動的に表示されます。
適用されるCSS
メールの入力フィールドにだけ特定のスタイルを適用するには、次のように属性セレクタを使用します。
input{ background-color:#ccc;}Demo
See Also
- HTML5で電話用の入力フィールドを作成する方法
- フォーム送信時にチェックボックスの値を取得する方法