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

HTML DOM 入力日付（Input Date）の form プロパティとは？使い方を解説

HTML DOM の Input Date オブジェクトが持つ form プロパティは、日付入力フィールド（<input type="date">）を囲んでいるフォームへの参照を返します。このプロパティを利用することで、JavaScript から日付入力要素が属するフォームの id や name などの情報に簡単にアクセスできるようになります。

なお、日付入力フィールドがどのフォームにも含まれていない場合は、null が返される点に注意してください。

構文

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

  • form オブジェクトへの参照を取得する場合
inputDateObject.form

例

それでは、Input Date の form プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Form</title>
</head>
<body>
<form id="formForDateInput">
Date Select: <input type="date" id="Date" >
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
    function getFormID() {
        var inputDate = document.getElementById("Date");
        var divDisplay = document.getElementById("divDisplay");
        divDisplay.textContent = 'Form ID for date input: '+inputDate.form.id;
    }
</script>
</body>
</html>

出力

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

「Get Form ID」ボタンをクリックする前 −

HTML DOM 入力日付（Input Date）の form プロパティとは？使い方を解説

「Get Form ID」ボタンをクリックした後 −

HTML DOM 入力日付（Input Date）の form プロパティとは？使い方を解説

ボタンをクリックすると、日付入力フィールドが所属するフォームの ID「formForDateInput」が画面に表示され、form プロパティによって正しくフォームへの参照が取得できていることが確認できます。

  1. HTML DOM Input URL formプロパティの使い方を解説

    HTML DOM の Input URL form プロパティは、URL入力フィールド（<input type=url>）を囲んでいるフォームへの参照を返します。このプロパティを利用すると、JavaScriptから特定の入力要素がどのフォームに属しているかを簡単に取得できます。 構文 構文は以下の通りです − フォームオブジェクトへの参照を返す場合： inputURLObject.form 使用例 Input URL form プロパティの具体的な使用例を見てみましょう。以下のサンプルでは、URL入力フィールドが含まれるフォームのIDを取得して画面に表示します − <!DOC

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

    HTML DOM Input Week form プロパティとはHTML DOM の Input Week form プロパティは、<input type=week> 要素が含まれている親フォーム（enclosing form）への参照を返します。このプロパティを使うことで、JavaScript から入力フィールドがどのフォームに属しているかを取得し、フォームの ID やその他のプロパティにアクセスすることができます。構文（シンタックス）form オブジェクトへの参照を返す場合の構文は以下の通りです。inputWeekObject.form使用例それでは、Input Week fo