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

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

HTML DOMのInput DatetimeLocalオブジェクトが持つformプロパティは、対象となるdatetime-local型の入力フィールドが属しているフォーム（<form>要素）への参照を取得するために使用されます。このプロパティは読み取り専用であり、入力フィールドがどのフォームに含まれているかをJavaScriptから確認したい場合に便利です。

formプロパティの構文

formプロパティでフォームオブジェクトへの参照を取得するには、以下のように記述します。

inputDatetimeLocalObject.form

戻り値として、該当する入力フィールドを囲んでいるフォームオブジェクトが返されます。もし入力フィールドがどのフォームにも属していない場合は、nullが返されます。

formプロパティの使用例

ここでは、Input DatetimeLocalのformプロパティを使った具体的なサンプルコードを紹介します。ボタンをクリックすると、datetime-local入力フィールドが属するフォームのIDを画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal 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="Mathematics">
<fieldset>
<legend>Datetime-Local-form</legend>
<label for="datetimeLocalSelect">Examination Time:
<input type="datetime-local" id="datetimeLocalSelect" value="2019-09-01T09:00">
</label>
<input type="button" onclick="showExamination()" value="Which exam is on this date? ">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function showExamination() {
        divDisplay.textContent = 'Exam: '+inputDatetimeLocal.form.id;
    }
</script>
</body>
</html>

コードの解説

このサンプルでは、IDが「Mathematics」のフォーム内にdatetime-local型の入力フィールドを配置しています。「Which exam is on this date?」というボタンがクリックされると、showExamination()関数が実行され、inputDatetimeLocal.form.idによって入力フィールドが属するフォームのID（この場合は「Mathematics」）を取得し、div要素に表示します。

実行結果

上記のコードを実行すると、次のような出力が得られます。

「Which exam is on this date?」ボタンをクリックする前：

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

「Which exam is on this date?」ボタンをクリックした後：

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

ボタンをクリックすると、「Exam: Mathematics」というテキストが表示され、datetime-local入力フィールドが「Mathematics」というIDを持つフォームに属していることが確認できます。

まとめ

Input DatetimeLocalのformプロパティを使用すると、JavaScriptから簡単に入力フィールドの所属フォームを参照できます。フォームのIDやその他の属性にアクセスしたり、動的な処理を行ったりする際に活用できる、実用的なDOMプロパティです。

  1. HTML DOM 入力パスワードのformプロパティとは？構文と使い方を実例で解説

    HTML DOM の Input Password（type=password の入力フィールド）における form プロパティは、そのパスワード入力フィールドを含むフォームへの参照を返すために使用されます。パスワード入力フィールドがフォームの外部に配置されている場合は、NULL が返されます。なお、このプロパティは読み取り専用です。 構文 Input Password の form プロパティの構文は次のとおりです。 passwordObject.form サンプルコード それでは、Input Password の form プロパティの具体的な使用例を見ていきましょう。 <!DOCT

  2. HTML DOM 入力検索フィールドの form プロパティの使い方とサンプルコード

    HTML DOM の Input Search form プロパティは、指定された入力検索フィールド（type=search）を含むフォームへの参照を返すために使用されます。検索フィールドがフォームの外に配置されている場合は、単純に NULL が返されます。なお、このプロパティは読み取り専用です。 構文 input search の form プロパティの構文は以下のとおりです。 searchObject.form サンプルコード HTML DOM Input search form プロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html&g