HTML

この記事では、メールアドレスを入力する<input type="email">の基本と、ブラウザの入力チェックやスマートフォン向けキーボードを活用する方法を説明します。

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">

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レコードチェックを追加する。