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

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

HTML DOM の Input Email value プロパティは、type="email" を持つ input 要素の value 属性（現在入力・設定されている値）を文字列として返します。また、このプロパティに新しい文字列を代入することで、JavaScript からメールアドレスの値を動的に設定することも可能です。

構文

value プロパティの基本的な構文は以下の通りです。

値を取得する場合

inputEmailObject.value

値を設定する場合

value 属性に任意の文字列を設定します。

inputEmailObject.value = 'String'

使用例

それでは、Input Email value プロパティの具体的な使用例を見てみましょう。このサンプルでは、ユーザー名に応じてメールアドレスを自動入力し、ログイン処理を行う簡単なフォームを実装しています。

<!DOCTYPE html>
<html>
<head>
<title>Input Email value</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-value</legend>
<label for="EmailSelect">Email Id:
<input type="email" id="EmailSelect">
<input type="button" onclick="getUserEmail('david')" value="David">
<input type="button" onclick="getUserEmail('shasha')" value="Shasha"><br>
<input type="button" onclick="login()" value="Login">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    function getUserEmail(userName) {
        if(userName === 'david')
            inputEmail.value = 'davidMiller@MNC.com';
        else
            inputEmail.value = 'shashaGreen@MNC.com';
    }
    function login() {
        if(inputEmail.value !== '')
            divDisplay.textContent = 'Successful Login. Hello '+inputEmail.value.split("@")[0];
        else
            divDisplay.textContent = 'Enter Email Id';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のように動作します。

1. メールアドレス欄が空の状態で「Login」ボタンをクリックした場合

未入力であるため、「Enter Email Id」というメッセージが表示されます。

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

2. 「David」ボタンをクリックした後

getUserEmail 関数によって、value プロパティ経由でメールアドレス「davidMiller@MNC.com」が自動的に設定されます。

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

3. メールアドレスが設定された状態で「Login」ボタンをクリックした後

value プロパティの値が空でないことが判定され、「Successful Login. Hello davidMiller」というように、@ より前のユーザー名を含んだログイン成功メッセージが表示されます。

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

まとめ

Input Email の value プロパティを使えば、メールアドレス入力欄の値を JavaScript から自由に読み書きできます。フォームの自動入力やバリデーション前の値チェックなど、実用的な場面で活用できる重要なプロパティです。

  1. HTML DOMのInput Email multipleプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Email multipleプロパティは、emailタイプの入力フィールドが複数のメールアドレスを受け付けるかどうかを取得・設定するためのプロパティです。このプロパティを活用することで、JavaScriptから動的にフォームの入力ルールを変更できます。構文（Syntax）multipleプロパティの構文は以下のとおりです。値を取得する場合inputEmailObject.multiple値を設定する場合inputEmailObject.multiple = boolValue設定できるブール値boolValueには以下のいずれかのブール値を指定します。boolea

  2. HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

    HTML DOM の Input Email maxLength プロパティは、メールアドレス用の入力フィールド（<input type="email">）に対して、ユーザーが入力できる最大文字数を示す maxLength 属性を取得または設定するためのプロパティです。maxLength 属性が HTML 側で定義されていない場合、このプロパティは「-1」を返します。 maxLength を活用することで、フォーム送信前の段階で入力文字数を制限でき、無効なデータの送信を防ぎやすくなります。さらに、JavaScript から動的に値を書き換えれば、状況に応じて入