<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="text">の使い方 - HTML

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

input type="email"の注意点

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

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

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

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

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

関連するページを読む

CSSの:invalidで入力エラーのあるフィールドを装飾する

input type="email"の属性

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

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

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

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

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

関連するページを読む

inputタグ・コンプリートガイド - HTML