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

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"の表示例

これはChromeでの<input type="email">の表示例です。<form>内で使用すると、間違った形式のメールアドレスの送信を弾いてくれるようになります。

なお、このように誤りのある送信を防ぐためには<form>の中に<input>と送信ボタンを入れる必要があります。

input type="email"の注意点

サーバーでのチェックも忘れずに

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

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

スタイルや文言を変えるなら

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

input type="email"の属性

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

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

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

  • name:フィールドの名前を指定
  • required:入力必須にする
  • placeholder:プレースホルダーを指定
  • size:入力欄の幅を指定(デフォルトは20)
  • autofocus:ページ読み込み時にフォーカスをあてる
  • spellcheck:スペルチェックを有効にするかどうか。spellcheck="false"でオフにできる

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


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

ブラウザ対応状況

主要ブラウザ全てで使用できます 🎉

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    5〜
  • Safariのアイコン
    Safari
    5〜
  • Firefoxのアイコン
    Firefox
    4〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    10〜

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    108〜
  • iOS Safariのアイコン
    iOS Safari
    3.2〜

caniuse.comで詳しく見る