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

HTML DOM 入力パスワードのformプロパティとは？構文と使い方を実例で解説

HTML DOM の Input Password（type="password" の入力フィールド）における form プロパティは、そのパスワード入力フィールドを含むフォームへの参照を返すために使用されます。パスワード入力フィールドがフォームの外部に配置されている場合は、NULL が返されます。なお、このプロパティは読み取り専用です。

構文

Input Password の form プロパティの構文は次のとおりです。

passwordObject.form

サンプルコード

それでは、Input Password の form プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Password form プロパティ</h1>
<form id="NEW_FORM">
パスワード： <input type="password" id="PASS">
</form>
<p>下のボタンをクリックするとフォームのidを取得できます</p>
<button type="button" onclick="formId()">FORMを取得</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P=document.getElementById("PASS").form.id;
      document.getElementById("Sample").innerHTML = "パスワードフィールドを含むフォームのidは： "+P ;
   }
</script>
</body>
</html>

出力結果

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

HTML DOM 入力パスワードのformプロパティとは？構文と使い方を実例で解説

「FORMを取得」ボタンをクリックすると、次のように表示されます。

HTML DOM 入力パスワードのformプロパティとは？構文と使い方を実例で解説

コードの解説

この例では、まず id「PASS」を持つパスワード入力フィールドを作成し、id「NEW_FORM」を持つ <form> 要素の中に配置しています。

<form id="NEW_FORM">
パスワード： <input type="password" id="PASS">
</form>

次に、ユーザーがクリックすると formId() メソッドが実行される「FORMを取得」ボタンを作成しています。

<button type="button" onclick="formId()">FORMを取得</button>

formId() メソッドでは、getElementById() メソッドを使って type が password の入力フィールドを取得し、そのパスワードフィールドを含むフォームオブジェクトの id プロパティの値を取得します。取得した値は変数 P に代入され、innerHTML プロパティを通じて id「Sample」の段落内に表示されます。

function formId() {
   var P=document.getElementById("PASS").form.id;
   document.getElementById("Sample").innerHTML = "パスワードフィールドを含むフォームのidは： "+P ;
}

まとめ

form プロパティを利用することで、JavaScript から特定の入力フィールドがどのフォームに属しているかを簡単に確認できます。動的にフォームを操作するスクリプトを記述する際に役立つ便利なプロパティです。ただし、要素がフォーム内に存在しない場合は NULL が返されるため、実務では null チェックを組み合わせてエラーを防ぐことが推奨されます。

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

    HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ

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

    HTML DOM Input Password のvalueプロパティとはHTML DOMのInput Passwordにおけるvalueプロパティは、type属性が「password」に設定されたinput要素に関連付けられたプロパティです。このプロパティを使用することで、パスワードフィールドのデフォルト値を指定したり、ユーザーが入力した値を取得・変更したりすることができます。構文valueプロパティを設定する場合の構文は以下の通りです。passwordObject.value = text;ここでの「text」には、パスワードフィールドに設定したい値を指定します。サンプルコードinput