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

HTML DOM パスワード入力フィールドのnameプロパティとは？使い方を徹底解説

HTML DOM の Input Password name プロパティは、パスワード入力フィールド（<input type="password">）の name 属性を設定または取得するために使用されるプロパティです。

name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。また、JavaScript 側でも name 属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。

構文（Syntax）

name プロパティの基本的な構文は以下のとおりです。

name プロパティを設定する場合

passwordObject.name = name

ここで指定する name は、パスワードフィールドに付与したい名前です。

サンプルコード（Example）

それでは、パスワードの name プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Password name Property</h1>
Password: <input type="password" id="PASS" name="passW">
<p>下のボタンをクリックすると、パスワードフィールドの名前が変更されます</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("PASS").name = "NEW_PASS";
        document.getElementById("Sample").innerHTML = "Password field name is now NEW_PASS";
    }
</script>
</body>
</html>

実行結果（Output）

このコードを実行すると、次のような画面が表示されます。

HTML DOM パスワード入力フィールドのnameプロパティとは？使い方を徹底解説

続いて、「CHANGE NAME」ボタンをクリックすると以下のように変化します。

HTML DOM パスワード入力フィールドのnameプロパティとは？使い方を徹底解説

コードの解説

上記のサンプルコードでは、以下のような処理が行われています。

1. パスワード入力フィールドの作成

まず、id に「PASS」を持ち、name 属性の値が「passW」に設定されたパスワード入力フィールドを作成しています。

Password: <input type="password" id="PASS" name="passW">

2. ボタンの設置

次に、ユーザーがクリックすると changeName() 関数を実行する「CHANGE NAME」ボタンを作成しています。

<button type="button" onclick="changeName()">CHANGE NAME</button>

3. changeName() 関数による処理

changeName() 関数内では、getElementById() メソッドを使って対象のパスワード入力フィールドを取得し、その name プロパティを「NEW_PASS」に変更しています。さらに、innerHTML プロパティを利用して、id が「Sample」の段落に変更完了のメッセージを表示することで、変更内容をユーザーに伝えています。

function changeName() {
    document.getElementById("PASS").name = "NEW_PASS";
    document.getElementById("Sample").innerHTML = "Password field name is now NEW_PASS";
}

まとめ

Input Password の name プロパティを使えば、JavaScript からパスワードフィールドの name 属性を自由に読み書きできます。フォーム送信時のデータ識別や、動的なフォーム操作が必要な場面で活用できるので、ぜひ覚えておきましょう。

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

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン

  2. HTML DOM 入力テキストの name プロパティとは？設定・取得方法を解説

    HTML DOM の Input Text（テキスト入力フィールド）の name プロパティは、name 属性の値を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後、そのデータを識別するために重要な役割を果たします。 構文 name プロパティの構文は以下のとおりです。 name プロパティを設定する場合 textObject.name = name ここでの name には、テキストフィールドに付ける名前を指定します。 name プロパティを取得する場合 textObject.name サンプルコード それでは、Input Text の name