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

HTML DOM input hidden の form プロパティの使い方を解説

HTML DOM の input hidden（type="hidden"） 要素が持つ form プロパティは、HTMLドキュメント内で非表示入力フィールド（hidden input field）を含んでいるフォームへの参照を返します。このプロパティを使うことで、ある非表示フィールドがどのフォームに属しているのかをプログラムから簡単に特定できます。

構文（Syntax）

form プロパティの構文は以下のとおりです。

object.form

サンプルコード（Example）

それでは、HTML DOM input hidden の form プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#363946;
        color:#fff;
    }
    form{
        margin:2.5rem auto;
    }
    button{
        background-color:#db133a;
        border:none;
        cursor:pointer;
        padding:8px 16px;
        color:#fff;
        border-radius:5px;
        font-size:1.05rem;
    }
    .show{
        font-weight:bold;
        font-size:1.4rem;
    }
</style>
</head>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
    <legend>Form 1</legend>
    Here is hidden input field: <input type="hidden" class="hiddenField">
</fieldset>
</form>
<button onclick="identify()">Identify Hidden Input Field</button>
<p class="show"></p>
<script>
    function identify() {
        var formId = document.querySelector(".hiddenField").form.id;
        document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
    }
</script>
</body>
</html>

実行結果（Output）

上記のコードを実行すると、ブラウザには次のような出力が表示されます。

HTML DOM input hidden の form プロパティの使い方を解説

画面上の「Identify Hidden Input Field」ボタンをクリックしてみましょう。すると、JavaScript の identify() 関数が実行され、非表示入力フィールドがどのフォームに属しているかが判明します。

この例では、document.querySelector(".hiddenField").form.id によって、クラス名「hiddenField」を持つ hidden 入力要素が所属するフォームの id を取得し、その結果を画面に表示しています。

HTML DOM input hidden の form プロパティの使い方を解説

まとめ

form プロパティは、hidden 入力フィールドに限らず、テキストボックスやチェックボックスなどあらゆるフォーム部品から親フォームを参照できる便利な機能です。特に動的にフォームを操作する JavaScript の処理において、要素とフォームの関連付けを確認したい場合に活用できます。

  1. HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説

    HTML DOM の Input Range（type=range の入力フィールド）におけるform プロパティは、対象となるレンジスライダーを含むフォームへの参照を取得するために使用されます。もしレンジスライダーがどのフォームにも属していない場合には NULL が返されます。なお、このプロパティは読み取り専用であり、値を代入して変更することはできません。構文Input Range の form プロパティの構文は以下の通りです。rangeObject.formサンプルコードそれでは、Input Range の form プロパティを使った具体的な例を見ていきましょう。<!DOCTYP

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

    HTML DOMにおけるInput Resetオブジェクトのformプロパティは、指定されたリセットボタンが所属するフォーム（form要素）への参照を取得するために使用されます。リセットボタンがフォームの外に配置されている場合は、単にNULLが返されます。なお、このプロパティは読み取り専用です。 構文 Input Resetのformプロパティの基本構文は以下の通りです。 resetObject.form 使用例 それでは、Input Resetのformプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body>