HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでメールアドレス入力欄（input type="email"）を使う方法を解説

email入力タイプとは

HTMLでは、<input type="email"> を使うことで、メールアドレス専用の入力フィールドを簡単に作成できます。この入力タイプを指定すると、ユーザーはフォームにメールアドレスを入力できるようになります。

対応しているブラウザでは、入力された内容が自動的に検証されるのも大きな特徴です。たとえば「@」や「.（ドット）」が含まれていない不正な形式のメールアドレスを入力すると、フォームは送信されず、「有効なメールアドレスを入力してください」といったエラーメッセージが表示されます。これにより、JavaScriptなどを書かなくても基本的な入力チェックが実現できます。

HTMLでメールアドレス入力欄（input type= email ）を使う方法を解説

複数のメールアドレス入力を許可する

1つのフィールドに複数のメールアドレスを入力できるようにしたい場合は、論理属性である multiple 属性を指定します。<input type="email" multiple> のように記述すると、カンマ区切りで複数のアドレスを入力・検証できるようになります。

注意： type="email" は Internet Explorer 9 以前ではサポートされていません。古いブラウザへの対応が必要な場合は、サーバーサイドでのバリデーションと組み合わせることをおすすめします。また、placeholder 属性で入力例を表示したり、required 属性で必須項目にしたりすることも可能です。

サンプルコード

以下のコードを実行して、HTMLでのemail入力タイプの使い方を実際に確認してみましょう。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input email</title>
    </head>

    <body>
        <form action = "" method = "get">
            Details:<br><br>
            Student Name<br><input type = "name" name = "sname"><br>
            Student E-mail<br><input type = "email" name = "email"><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>
  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTML DOM Input Email typeプロパティとは？構文と使用例を解説

    HTML DOMのInput Email typeプロパティは、<input type=email>要素のtype属性の値を取得または設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に入力フィールドの種類を確認したり、必要に応じて変更したりすることが可能になります。 構文 以下に基本的な構文を示します。 文字列値を返す場合（取得） inputEmailObject.type typeに文字列値を設定する場合（設定） inputEmailObject.type = stringValue 指定できる文字列値 「stringValue」に