Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】email属性値の使い方

email属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

emailプロパティは、HTMLの<input>要素のtype属性に指定することで、ユーザーからメールアドレス形式の入力を受け付けるための値を保持するプロパティです。このプロパティを使用すると、入力フィールドにメールアドレスを入力することが期待されていることをブラウザに伝えます。

具体的には、Webフォームなどでユーザーのメールアドレスを入力させる際、<input type="email">と記述します。これにより、ブラウザは入力フィールドがメールアドレス専用であることを認識し、スマートフォンなどのデバイスではメールアドレス入力に適したソフトウェアキーボードを表示するなど、ユーザーが入力しやすいようにインターフェースを最適化することがあります。

さらに、このemailタイプを指定することで、ブラウザは入力された値が基本的なメールアドレスの形式(例えば、@記号を含んでいるかなど)に沿っているかを、フォーム送信前に自動的にチェックするクライアントサイドバリデーションを提供します。この機能は、ユーザーが誤った形式のメールアドレスを入力した場合に、即座にフィードバックを返し、入力エラーを防ぐ助けとなります。また、multiple属性を追加することで、複数のメールアドレスをカンマ区切りで入力することも可能になります。ただし、ブラウザによるバリデーションはあくまで補助的なものであり、セキュリティとデータの一貫性を確保するためには、サーバーサイドでの厳密なバリデーションも併せて実装することが重要です。このプロパティは、ユーザビリティとデータ整合性を高めるために利用されます。

公式リファレンス: <input type="email">

構文(syntax)

1<input type="email">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ