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

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

HTML DOM の Legend form プロパティは、<legend> 要素を囲んでいる <form> 要素への参照を返します。このプロパティを使うことで、JavaScript から legend 要素が属するフォームの情報（id や name など）に簡単にアクセスできます。

なお、legend 要素がどのフォームにも含まれていない場合は null が返されます。

構文

form オブジェクトへの参照を取得するには、以下のように記述します。

legendObject.form

戻り値

  • legend 要素を含む親フォーム（<form> 要素）への参照を返します。
  • 親フォームが存在しない場合は null を返します。

サンプルコード

ここでは、Legend form プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、legend 要素が属するフォームの id を画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Legend form</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Mid-Term">
<fieldset>
<legend id="legendForm">Legend-form</legend>
<label for="WeekSelect">Examination Week:
<input type="week" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="What exams are in this week? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var legendForm = document.getElementById("legendForm");
   function showExamination() {
      divDisplay.textContent = 'Examinations: '+legendForm.form.id;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような出力が得られます。

「What exams are in this week?」ボタンをクリックする前：

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

「What exams are in this week?」ボタンをクリックした後：

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

ボタンをクリックすると、legendForm.form.id によって legend 要素を囲むフォームの id「Mid-Term」が取得され、画面に表示されていることが確認できます。


  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> 要