HTML

A form input that lets the browser validate email syntax automatically and pops up an email‑optimized keyboard on mobile devices.

<input type="email">

<input> 要素の type 属性に email を指定すると、ブラウザは「メールアドレス専用」の入力欄として扱います。

この指定だけで――

ユーザー体験（UX）
スマートフォンでは “@” や “.com” 付きキーボードが表示され、入力が楽になります。
検証（バリデーション）
フォーム送信時に「@ が無い」「ドメインが欠けている」などの初歩的ミスを自動検出します。
アクセシビリティ
スクリーンリーダーが「ここはメールアドレス欄」と認識して案内します。
セキュリティ
フロントエンドでミスを弾くことで、サーバ側の負荷や攻撃面を小さくできます。
将来の互換性
ブラウザの新機能（例: WebOTP API など）と連携が期待できる。

基本構文と最小例

HTML

<label for="userEmail">メールアドレス:</label>
<input id="userEmail" name="email" type="email" required autocomplete="email">

主要属性とその実践的活用法

required
入力を必須にする。ブラウザの組み込みバリデーションで空欄送信をブロックできる。
Tips : invalid イベントでカスタムメッセージを設定し、ユーザーに具体的な入力指示を出すと UX が向上する。
multiple
カンマ区切りで複数アドレスを入力可能にする。
実装ポイント : サーバー側で分割し、MXチェックや重複排除を行う。
pattern
正規表現で追加の書式制限を掛ける。例：特定ドメインのみ許可したい場合に pattern=".+@example\.com"。
落とし穴 : RFC に準拠しない厳しすぎる表現は国際化メールを弾いてしまう恐れがある。
minlength / maxlength
文字数の下限・上限を指定し、入力ミス（短すぎる・長すぎる）を防ぐ。
実務例: 上限は Gmail が採用する 254 文字を目安にすると安全。
inputmode
モバイル端末のソフトキーボード種別をヒントとして指定。
inputmode="email" で @ や . 付きレイアウトが出現し、入力効率が向上。
autocomplete
ブラウザやパスワードマネージャーによる自動入力を制御。
一般的には autocomplete="email" とし、同一フォームで username／email を正しく組み合わせると多段フォームでも入力がスムーズになる。
list
<datalist> と組み合わせ、定型メールアドレス候補をプルダウン表示。
注意 : アクセシビリティ上、候補リストはキーボード操作で選択できるか確認する。
name
name属性は入力欄に名前を付ける属性ですが、form要素でデータが送信される際、name属性で指定した名前と、入力された値が一組になって送信されます。
value
value属性を指定する場合には、その値には妥当なメールアドレス（もし、multiple属性を指定している場合には、半角カンマ（ , ）区切りの妥当なメールアドレスのリスト）を指定する必要があります。
size
入力欄を「半角文字数」でおおよその横幅指定をするレガシー属性。
活用シーン : 外部 CSS を読み込めないメールテンプレートや小規模 HTML で手早く幅を決めたい場合。
注意 : レスポンシブに弱いため、通常は CSS（例：width: 30ch; や clamp()）で置き換えることを推奨。
placeholder
入力欄に初期表示する内容を指定する。
readonly
ユーザーによるテキスト編集を不可にして読み取り専用にする。（readonly）

バリデーションの仕組みを深掘り

ブラウザ側チェック
形式不一致 → ValidityState.typeMismatch が true
イベント invalid で任意の処理をフック
カスタムメッセージ

JavaScript

const emailInput = document.querySelector('#userEmail');
emailInput.addEventListener('invalid', e => {
	e.target.setCustomValidity('正しいメールアドレスを入力してください。');
});
emailInput.addEventListener('input', e => {
	e.target.setCustomValidity('');
});
サーバサイド検証は必須
クライアント検証を迂回できることを前提に、正規表現＋DNS/MXレコードチェックを追加する。