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

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

HTML DOM の Fieldset form プロパティは、<fieldset> 要素が属しているフォームへの参照を Form オブジェクトとして返します。このプロパティは読み取り専用であり、指定された fieldset 要素がどのフォームにも属していない場合は null を返します。

構文（Syntax）

Fieldset の form プロパティを使用する際の基本構文は以下の通りです。

fieldsetObject.form

サンプルコード（Example）

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

<!DOCTYPE html>
<html>
<head>
<script>
    function formId() {
        var field = document.getElementById("FieldSet1").form.id;
        document.getElementById("Sample").innerHTML = "fieldset要素が属するフォームのidは "+field+" です";
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>ユーザー情報：</legend>
名前：<input type="text"><br>
住所：<input type="text"><br>
年齢：<input type="text">
</fieldset>
</form>
<br>
<button onclick="formId()">GET ID</button>
<p id="Sample"></p>
</body>
</html>

実行結果（Output）

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

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

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

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

コードの解説

それでは、上記のサンプルコードの仕組みを順番に見ていきましょう。

まず、id「FORM1」を持つ <form> 要素を作成し、その中に id「FieldSet1」を持つ <fieldset> 要素を配置しています。

<form id="FORM1">
<fieldset id="FieldSet1">
<legend>ユーザー情報：</legend>
名前：<input type="text"><br>
住所：<input type="text"><br>
年齢：<input type="text">
</fieldset>
</form>

次に、「GET ID」というボタンを作成しています。ユーザーがこのボタンをクリックすると、formId() 関数が呼び出されます。

<button onclick="formId()">GET ID</button>

formId() 関数では、まず getElementById() メソッドを使って fieldset 要素を取得し、続いてその form.id プロパティを参照します。これにより、該当する fieldset 要素が含まれているフォームの id が取得されます。取得した値は変数 field に代入され、最後に innerHTML プロパティを使って、id「Sample」が付与された段落要素にテキストとして表示されます。

function formId() {
    var field = document.getElementById("FieldSet1").form.id;
    document.getElementById("Sample").innerHTML = "fieldset要素が属するフォームのidは "+field+" です";
}

このように、fieldset の form プロパティを活用すれば、JavaScript から簡単に親フォームの情報へアクセスできます。フォームのバリデーションや動的な UI 制御など、さまざまな場面で役立つ便利なプロパティです。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

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

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要