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

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

HTML DOM の Fieldset name プロパティは、<fieldset> 要素の name 属性値を取得または設定するために使用されます。name 属性は、フォーム送信後にデータを識別するだけでなく、JavaScript からフォーム要素を参照する場合にも役立ちます。

構文

Fieldset name プロパティを設定する場合の構文は以下の通りです。

fieldsetObject.name = name

ここで指定する「name」は、フィールドセットに付与したい名前です。値を取得したい場合は、代入を行わずに fieldsetObject.name を参照します。

サンプルコード

Fieldset name プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、fieldset 要素の name 属性値を取得して画面に表示するシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<script>
    function fieldName() {
        var field = document.getElementById("FieldSet1").name;
        document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="fieldName()">GET NAME</button>
<p id="Sample"></p>
</body>
</html>

実行結果

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

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

「GET NAME」ボタンをクリックすると、fieldset の name 属性値が取得され、次のように表示されます。

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

コードの解説

1. fieldset 要素の作成

まず、フォーム要素の中に、name 属性が「FS1」、id が「FieldSet1」である fieldset 要素を作成しています。fieldset 内には legend 要素でタイトルを付け、名前・住所・年齢の入力欄を配置しています。

<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>

2. ボタンの設置

次に、クリックされると fieldName() 関数を実行する「GET NAME」ボタンを作成しています。onclick イベントによって、ユーザーがボタンを押したタイミングで処理が開始されます。

<button onclick="fieldName()">GET NAME</button>

3. name 値の取得と表示

fieldName() 関数では、まず getElementById() メソッドを使って id が「FieldSet1」の fieldset 要素を取得し、その name 属性値を変数 field に格納します。その後、innerHTML プロパティを使って、id が「Sample」の段落に取得した値を含むテキストを表示しています。

function fieldName() {
    var field = document.getElementById("FieldSet1").name;
    document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}

このように、Fieldset name プロパティを使えば、JavaScript から簡単に fieldset 要素の名前を読み書きできます。フォームのグループ化やスクリプトによる動的な参照が必要な場面で活用してみてください。

  1. HTML DOM Textareaのnameプロパティとは？取得・設定方法を解説

    HTML DOM の Textarea name プロパティは、HTMLドキュメント内のテキストエリア（textarea）要素の name 属性の値を取得したり、新しい値を設定したりするために使用されます。フォーム送信時やJavaScriptでの要素参照において、name 属性は重要な役割を果たします。このプロパティを使えば、動的にその値を読み書きすることが可能です。構文Textarea name プロパティの基本的な構文は以下の通りです。1. name属性の値を取得する場合object.name2. name属性に値を設定する場合object.name = text使用例それでは、HTML

  2. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン