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

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

HTML DOMのInput Radioオブジェクトにおけるformプロパティは、指定されたラジオボタンが属するフォーム（form要素）への参照を返すために使用されます。もしラジオボタンがどのフォームにも含まれていない場合は、NULLを返します。このプロパティは読み取り専用です。

構文

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

radioObject.form

使用例

ここで、Input Radioのformプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input radio form Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>下のボタンをクリックするとフォームIDを取得できます</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("Mango").form.id;
        document.getElementById("Sample").innerHTML = "The id of the form containing the radio button is: "+P ;
    }
</script>
</body>
</html>

実行結果

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

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

続いて、「GET FORM」ボタンをクリックすると、以下のようにフォームのIDが表示されます。

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

コードの解説

上記の例では、まずフォームの中に type="radio"、name="fruits"、id="Mango" を持つinput要素を作成しています。このフォームには、id属性として「FORM1」が設定されています。

<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

次に、ユーザーがクリックすると formId() メソッドを実行する「GET FORM」ボタンを配置しています。

<button type="button" onclick="formId()">GET FORM</button>

formId() メソッドでは、getElementById() メソッドを使って対象のラジオボタンを取得し、そのラジオボタンを含むフォームオブジェクトの id プロパティにアクセスしています。取得した値は変数Pに格納され、innerHTML プロパティを通じてid「Sample」の段落内に出力されます。

function formId() {
    var P=document.getElementById("Mango").form.id;
    document.getElementById("Sample").innerHTML = "The id of the form containing the password field is: "+P ;
}

まとめ

formプロパティを活用することで、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 ラジオボタンのvalueプロパティとは？取得・設定方法を解説

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t