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

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 form プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>週-フォーム</legend>
<label for="WeekSelect">試験週：
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="この週の試験は何ですか？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function showExamination() {
        divDisplay.textContent = '試験： '+inputWeek.form.id;
    }
</script>
</body>
</html>

出力結果

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

ボタンをクリックする前

「この週の試験は何ですか？」ボタンをクリックする前の画面表示は以下の通りです。

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

ボタンをクリックした後

「この週の試験は何ですか？」ボタンをクリックすると、inputWeek.form.id によって親フォームの ID（この例では「Mid-Term」）が取得され、画面に表示されます。

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

まとめ

Input Week の form プロパティは、読み取り専用のプロパティであり、該当する input 要素がフォーム内に存在しない場合は null を返します。フォームと連動した動的な処理を実装したい場合に便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM Input Week の type プロパティとは？使い方を解説

    はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した

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

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