<input type="email"> メールアドレス入力欄を作成する

catnose · 2020/02/02 に最終更新

Webページにメールアドレスの入力欄を設置するときには<input type="text">ではなく<input type="email">を使うのがおすすめです。

<form>
  <label for="email">メールアドレスを入力</label>
  <input type="email" id="email" >
  <button type="submit">送信</button>
</form>

見た目は<input type="text">と変わらないのですが、バリデーション（エラーチェック）が利くというメリットがあります。

input type="email"の注意点

上で紹介したバリデーションはあくまでもブラウザによるブラウザ上だけのチェックです。必ずしも誤った形式のメールアドレスをすべて弾いてくれるとは限りません。

多少のHTMLの知識がある人からすると、バリデーションを回避してサーバーにメールアドレス以外の文字列を送ることは簡単です。サーバー側でも正しい形式かどうかチェックするようにしましょう。

ブラウザによってエラーメッセージの文言やスタイルは異なります。細かな指定をしたい場合は、JavaScriptでバリデーションを作るのが良いでしょう。
ただし、CSSの:invalidを使えば、エラーが検知された入力欄のスタイルを変えることができます。

基本的にtype="text"と同じ属性を使うことができます。

<input
  type="email"
  name="フィールドの名前"
  placeholder="プレースホルダー"
  value="初期値"
  size="40"
  required
  >

よく使う属性は以下です。それぞれの詳しい解説はtype="text"のページをご覧ください。

複数のメールアドレスをカンマ区切りで入力できるようになるmultipleという属性もあるのですが、ユーザー体験があまり良くないのでここでは説明を省略します。

その他の種類（電話番号や数字、パスワードなど）のテキストフィールドの使い方はこちらのページをご覧ください。