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

HTML DOM Legendオブジェクトとは？作成方法とformプロパティの使い方を解説

HTML DOM Legendオブジェクトとは

HTML DOMのLegendオブジェクトは、HTMLの<legend>要素をJavaScriptから操作するためのインターフェースです。<legend>要素は、<fieldset>要素でグループ化したフォームコントロールにキャプション（見出し）を付けるために使用されます。

構文

構文は以下のとおりです。

<legend>要素を作成する場合

var legendObject = document.createElement("LEGEND");

プロパティ

LegendObjectで利用できる主なプロパティは以下のとおりです。

プロパティ説明
formlegend要素を含むフォーム（form要素）への参照を返します。

使用例

formプロパティの具体的な使用例を見てみましょう。この例では、ボタンをクリックすると、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プロパティの使い方を解説

ボタンをクリックすると、legend要素のformプロパティを通じて親フォームのID「Mid-Term」が取得され、画面に試験情報として表示されることが確認できます。

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

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

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注