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

HTML DOM Input Email の name プロパティの使い方を徹底解説

HTML DOM の Input Email name プロパティは、type="email" の input 要素に設定された name 属性の値を文字列として返すプロパティです。取得だけでなく、新しい文字列を代入して値を変更することも可能です。

name 属性は、フォーム送信時にフィールドを識別するために使われる重要な属性であり、JavaScript から動的に読み書きできることで、より柔軟なフォーム操作が実現できます。

構文

基本的な構文は以下の通りです。

値を取得する場合

inputEmailObject.name

name 属性に文字列値を設定する場合

inputEmailObject.name = '文字列'

サンプルコード

それでは、Input Email の name プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、入力されたメールアドレスに応じて name プロパティの値を表示するシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<title>Input Email name</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-name</legend>
<label for="EmailSelect">Employee Email:
<input type="email" id="EmailSelect" value="x.agent@secret.com" name="Shasha-Miller">
</label>
<input type="button" onclick="getName()" value="Who's Email ID is this? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    function getName() {
        if(inputEmail.value === 'x.agent@secret.com')
            divDisplay.textContent = 'Above Email belongs to '+inputEmail.name;
        else
            divDisplay.textContent = 'Above Email belongs to no one!';
    }
</script>
</body>
</html>

実行結果

このコードをブラウザで実行すると、以下のように表示されます。

「Who's Email ID is this?」ボタンをクリックする前

HTML DOM Input Email の name プロパティの使い方を徹底解説

「Who's Email ID is this?」ボタンをクリックした後

HTML DOM Input Email の name プロパティの使い方を徹底解説

メールアドレスが一致した場合、name プロパティに格納されている「Shasha-Miller」という値が画面に表示されます。このように、name プロパティを活用すれば、フォーム要素に関連付いた情報を簡単に取得・表示できます。

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

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

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

    HTML DOM の Input Email value プロパティは、type=email を持つ input 要素の value 属性（現在入力・設定されている値）を文字列として返します。また、このプロパティに新しい文字列を代入することで、JavaScript からメールアドレスの値を動的に設定することも可能です。 構文 value プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputEmailObject.value 値を設定する場合 value 属性に任意の文字列を設定します。 inputEmailObject.value = String 使用例 それでは、Inp