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

HTML DOM Input Emailオブジェクトとは？主な属性と実装例をわかりやすく解説

HTML DOMのInput Emailオブジェクトは、type="email"が指定されたHTMLの<input>要素をJavaScriptから操作するためのオブジェクトです。このオブジェクトを使うことで、メールアドレス入力欄の値の取得・変更、各種属性の動的な制御が可能になります。

構文（Syntax）

Input Emailオブジェクトを作成する基本的な構文は以下の通りです。

type="email"の<input>要素を生成する場合：

var emailObject = document.createElement("input");
emailObject.type = "email";

主な属性一覧

Input Emailオブジェクトでは、以下の属性を使用できます。

属性説明
autocomplete「ON」に設定すると、過去に入力した内容に基づいた候補を表示します。
autofocustrueに設定すると、ページ読み込み時にメール入力欄へ自動的にフォーカスされます。
defaultValueメール入力欄のデフォルト値を設定・取得します。
disabledメール入力欄の無効化／有効化を設定します。
formメール入力欄を含む親フォームへの参照を返します。
maxLengthメール入力欄のmaxLength属性（最大文字数）の値を取得・設定します。
multiple複数のメールアドレスの入力を許可するかどうかを取得・設定します。
nameメール入力欄のname属性の値を定義します。
patternメール入力欄のpattern属性（正規表現による入力パターン）の値を取得・設定します。
placeholderユーザーに入力形式のヒントを示すプレースホルダー文字列を設定・取得します。
readOnlyメール入力欄が編集可能かどうかを設定します。
requiredフォーム送信時にメール入力欄の記入が必須かどうかを設定します。
sizeメール入力欄のsize属性（表示幅）の値を定義します。
typeメール入力欄のフォーム要素の種類を返します。
valueメール入力欄のvalue属性（入力値）を定義します。

サンプルコード：multipleプロパティの例

ここでは、Input Email multipleプロパティを使った具体例を見てみましょう。ボタンをクリックすると、複数のメールアドレス入力が有効になります。

<!DOCTYPE html>
<html>
<head>
<title>Input Email multiple</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-multiple</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" placeholder="jkl@qwerty.com">
</label>
<input type="button" onclick="changeToMultiple()" value="Enable Multiple Emails">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
    function changeToMultiple() {
        inputEmail.multiple = true;
        divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

ボタンをクリックする前： multipleプロパティの初期値である「false」が画面に表示されます。

HTML DOM Input Emailオブジェクトとは？主な属性と実装例をわかりやすく解説

「Enable Multiple Emails」ボタンをクリックした後： multipleプロパティがtrueに変更され、複数のメールアドレス入力が許可された状態が表示されます。

HTML DOM Input Emailオブジェクトとは？主な属性と実装例をわかりやすく解説

このように、DOM操作によってtype="email"の入力欄に対して柔軟にプロパティを制御できることが分かります。フォームバリデーションやユーザビリティの向上にぜひ活用してください。

  1. HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

    HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意

  2. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input