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” 付きキーボードが表示され、入力が楽になります。
- 検証（バリデーション）
- フォーム送信時に「@ が無い」「ドメインが欠けている」などの初歩的ミスを自動検出します。
- アクセシビリティ
- スクリーンリーダーが「ここはメールアドレス欄」と認識して案内します。
- セキュリティ
- フロントエンドでミスを弾くことで、サーバ側の負荷や攻撃面を小さくできます。
name属性は入力欄に名前を付ける属性ですが、form要素でデータが送信される際、name属性で指定した名前と、入力された値が一組になって送信されます。
size属性と maxlength属性はそれぞれ、メールアドレス入力欄の表示サイズと、入力できる最大文字数を指定します。
ユーザーは空文字を入力することができます。入力必須にする場合には、required属性を併用してください。
multiple属性を指定すると、ユーザーが複数のメールアドレスを選択・入力できるようにすることができます。この場合、送信される値は半角カンマ（ , ）区切りのリストとなります。
value属性を指定する場合には、その値には妥当なメールアドレス（もし、multiple属性を指定している場合には、半角カンマ（ , ）区切りの妥当なメールアドレスのリスト）を指定する必要があります。
基本構文と最小例
<label for="userEmail">メールアドレス:</label>
<input id="userEmail" name="email" type="email" required autocomplete="email">
type="email" でブラウザがメール形式を自動判定required で未入力をブロックautocomplete="email" で端末の候補を活用
type="email" の場合に指定可能な属性
- name属性
- フォーム部品に名前をつける。
- value属性
- 送信される値を指定する。（type="email"の場合には、妥当な絶対URLを指定する必要がある）
- size属性
- 表示文字数を指定。（1以上の正の整数）
- maxlength属性
- 入力できる最大文字数を指定する。
- autocomplete属性
- 入力候補を提示して入力内容を自動補完する。（on・off・default）（初期値はdefault）
- multiple属性
- 複数の値を入力・選択できるようにする。
- pattern属性
- 正規表現で入力値のパターンを指定する。
- placeholder属性
- 入力欄に初期表示する内容を指定する。
- readonly属性
- ユーザーによるテキスト編集を不可にして読み取り専用にする。（readonly）
- required属性
- 入力必須にする。