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

HTML DOM 入力チェックボックスの form プロパティとは？使い方とサンプルコードを解説

HTML DOM の Input Checkbox（チェックボックス） の form プロパティは、そのチェックボックスが属しているフォーム（form 要素）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からチェックボックスを含む親フォームの情報（id や name など）に簡単にアクセスできます。

構文

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

チェックボックスが含まれる form オブジェクトへの参照を返します。

inputCheckboxObject.form

サンプルコード

ここでは、HTML DOM の Input Checkbox form プロパティを使った具体的な例を見てみましょう。チェックボックスにチェックを入れてボタンをクリックすると、そのチェックボックスを含むフォームの ID が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<title>学生情報フォーム</title>
</head>
<body>
<form id="Student-Form">
<div>
<input type="text" name="fullName" placeholder="例：山田 太郎">
フォームIDを表示： <input id="formID" type="checkbox" name="formID">
</div>
</form>
<button onclick="getFormID()">チェックボックスを含むフォームのIDを取得</button>
<div id="showResult"></div>
<script>
    function getFormID(){
        var checkboxFilter = document.getElementById("formID");
        var showResultDiv = document.getElementById("showResult");
        if(checkboxFilter.checked == true){
            showResultDiv.textContent = 'フォームID: ' + checkboxFilter.form.id;
        } else {
            showResultDiv.textContent = 'チェックボックスにチェックを入れてください';
        }
    }
</script>
</body>
</html>

実行結果

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

「フォームIDを表示」のチェックボックスにチェックを入れる前

チェックボックスが未選択の状態でボタンをクリックすると、「チェックボックスにチェックを入れてください」というメッセージが表示されます。

「フォームIDを表示」のチェックボックスにチェックを入れた後

チェックボックスを選択した状態でボタンをクリックすると、checkboxFilter.form.id によって親フォームの ID である「Student-Form」が取得され、「フォームID: Student-Form」と表示されます。

ポイントまとめ

  • form プロパティは読み取り専用で、チェックボックスが属する form 要素への参照を返します。
  • チェックボックスがどのフォームにも属していない場合は null が返されます。
  • フォームの送信処理や動的なバリデーションなど、親フォームの情報が必要な場面で活用できます。
  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