email入力は「メールアドレス専用の“賢いテキスト入力欄”」
type="email" の入力欄は、 「ユーザーにメールアドレスを入力してもらうための、ちょっと賢いテキスト入力」 です。
見た目はほぼ type="text" と同じですが、 ブラウザが「これはメールアドレスだな」と理解してくれることで、
- 入力チェック（
@がないなど）を少し手伝ってくれる - スマホでメール用キーボードが出てきやすくなる
- オートコンプリート（自動入力）が効きやすくなる
というメリットがあります。
email入力の基本形と「textとの違い」
いちばんシンプルな書き方
<input type="email" name="email">
フォームに入れるとこうなります。
<form action="/contact" method="post">
<p>メールアドレス：</p>
<input type="email" name="email">
<button type="submit">送信</button>
</form>
type="text" と見た目はほぼ同じですが、 ブラウザは「これはメールアドレス用だ」と認識しています。
ブラウザが軽く“メールアドレスっぽさ”をチェックしてくれる
required を付けて送信しようとすると、 メールアドレスの形式がおかしい場合にブラウザが警告してくれます。
<input
type="email"
name="email"
required
placeholder="example@example.com"
>
例えば、
abc→ 「メールアドレスを入力してください」と怒られるabc@→ まだおかしいabc@example.com→ OK
という感じで、「最低限の形」だけは見てくれます。
ここが type="text" との大きな違いです。 text は何でも通すけど、email は“メールアドレスっぽくないもの”を止めてくれる。
name・placeholder・value：メール入力欄の“性格”を決める
name は「送信されるときのキー名」
<input type="email" name="email">
ここでの name="email" が、 サーバー側で受け取るときのキーになります。
ユーザーが mono@example.com と入力して送信すると、 だいたい email = "mono@example.com" という形で届きます。
name を付け忘れると、 メール欄があっても送信データに含まれません。
placeholder は「入力前に出るヒント」
<input
type="email"
name="email"
placeholder="example@example.com"
>
「こういう形で入れてね」というヒントを出せます。 メールアドレスは形式が決まっているので、 placeholder で例を見せてあげると親切です。
value は「実際の中身（初期値もここ）」
<input
type="email"
name="email"
value="mono@example.com"
>
value は「今その入力欄に入っている値」です。 HTML に書いておけば初期値になりますし、 JavaScript から書き換えれば現在値が変わります。
email入力を使った“よくあるフォーム”をイメージする
お問い合わせフォームのメール欄
<form action="/contact" method="post">
<p>お名前：</p>
<input type="text" name="username" required>
<p>メールアドレス：</p>
<input
type="email"
name="email"
required
placeholder="example@example.com"
>
<p>お問い合わせ内容：</p>
<textarea name="message" required></textarea>
<button type="submit">送信</button>
</form>
ここで email入力が担っている役割は、
- 「連絡先として使うメールアドレス」を受け取る
- 空だったり、明らかに変な形式だったらブラウザが止める
という 2 点です。
「連絡を返すためのアドレス」を扱うので、 必須入力（required）にすることがほとんどです。
JavaScript と email入力：値を読む・チェックする
値を読む（ユーザーが入力したメールアドレスを取り出す）
HTML：
<input
type="email"
id="email"
name="email"
placeholder="example@example.com"
>
<button type="button" id="check">チェック</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#email");
const button = document.querySelector("#check");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = input.value; // ← メールアドレスの文字列
result.textContent = `入力されたメールアドレス：${value}`;
});
input.value が「今その email入力に入っている文字」です。 text入力と同じように扱えます。
簡単なチェックを JS で追加する
ブラウザのチェックだけだと心もとないので、 自分でも軽くチェックすることが多いです。
button.addEventListener("click", () => {
const value = input.value.trim();
if (value === "") {
result.textContent = "メールアドレスを入力してください。";
return;
}
if (!value.includes("@")) {
result.textContent = "@ を含む正しいメールアドレスを入力してください。";
return;
}
result.textContent = `OK：${value}`;
});
ここでは、
- 空かどうか
@が含まれているか
だけを見ています。
本格的なチェックは正規表現を使ったりしますが、 まずは「明らかにおかしいもの」を弾くだけでも十分です。
HTML側のバリデーション属性と組み合わせる
required で「必須入力」にする
<input
type="email"
name="email"
required
>
空のまま送信しようとすると、 ブラウザが「メールアドレスを入力してください」と止めてくれます。
multiple で「複数のメールアドレス」を許可する
実は email入力には multiple という属性があります。
<input
type="email"
name="emails"
multiple
placeholder="a@example.com, b@example.com"
>
カンマ区切りで複数のメールアドレスを入れられるようになります。
a@example.com→ OKa@example.com, b@example.com→ OKa@example.com, 変な文字列→ ブラウザが警告
という感じで、 「複数のメールアドレスを扱いたい場面」に使えます。
email入力と autocomplete：ユーザーの“楽さ”を上げる
ブラウザの自動入力を活かす
メールアドレスは、 ユーザーが何度も同じものを入力することが多い項目です。
ブラウザはそれを覚えていて、 入力欄をタップすると候補を出してくれたりします。
それを助けるのが autocomplete 属性です。
<input
type="email"
name="email"
autocomplete="email"
>
autocomplete="email" と書くことで、 ブラウザに「これはユーザーのメールアドレス欄ですよ」と伝えられます。
ユーザーにとっては、
- 何度も同じアドレスを打たなくてよくなる
- 入力ミスが減る
というメリットがあります。
email入力を使うか迷ったときの判断基準
「ここは“メールアドレス”を入れてもらう場所か？」
自分にこう聞いてみてください。
「この欄に入れてもらいたいのは、 普通の文字列じゃなくて“メールアドレス”か？」
YES → type="email" NO → type="text" や他の type
連絡先 ログイン ID（メールアドレスを使う場合） 通知先メールアドレス
こういったものは、 email入力にするのが自然です。
逆に、 「ただの文字列（名前・タイトル・検索キーワード）」なら text入力で十分です。
初心者として「email入力」で絶対に掴んでほしいこと
type="email" の input は、 「メールアドレス専用の、ちょっと賢いテキスト入力欄」 です。
見た目は text とほぼ同じ ブラウザが「メールアドレスっぽさ」を軽くチェックしてくれる name が送信時のキー名になる required や multiple、autocomplete="email" などと組み合わせると UX が上がる JavaScript では input.value で普通の文字列として扱える
あなたが email入力を書くときに、 「この欄は“連絡に使うメールアドレス”を受け取る場所で、ブラウザのサポートも活かしたい」 という意識を持てていたら、 もう email入力を“なんとなくの入力欄”ではなく、 “ユーザーのミスを減らしつつ、アプリとユーザーをつなぐ重要な窓口”として扱えている状態です。