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

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

HTML DOMにおけるInput Resetオブジェクトのformプロパティは、指定されたリセットボタンが所属するフォーム（form要素）への参照を取得するために使用されます。リセットボタンがフォームの外に配置されている場合は、単にNULLが返されます。なお、このプロパティは読み取り専用です。

構文

Input Resetのformプロパティの基本構文は以下の通りです。

resetObject.form

使用例

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

<!DOCTYPE html>
<html>
<body>
<h1>Input reset form Property</h1>
<form id="FORM_1" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("RESET1").form.id;
        document.getElementById("Sample").innerHTML = "The id of the form containing the reset button is: "+P ;
    }
</script>
</body>
</html>

出力結果

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

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

続いて、「GET FORM」ボタンをクリックすると、以下のようにフォームのIDが表示されます。

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

コードの解説

上記の例では、以下のような処理を行っています。

まず、type="reset" および id="RESET1" を持つinput要素を作成しました。このボタンをクリックすると、フォーム内に入力されたデータがすべてリセットされます。このリセットボタンは、2つのテキストフィールドを含むフォームの内部に配置されており、フォーム自体にも緑色の枠線などのインラインスタイルが適用されています。

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

次に、「GET FORM」というボタンを作成し、ユーザーがクリックしたときにformId()関数が呼び出されるように設定しています。

<button type="button" onclick="formId()">GET FORM</button>

formId()関数内部では、getElementById()メソッドを使用してtype属性がresetの入力フィールドを取得し、そのリセットボタンを含むフォームオブジェクトのidプロパティの値を参照します。取得した値は変数Pに格納され、innerHTMLプロパティを通じてid「Sample」の段落に出力されます。

function formId() {
    var P=document.getElementById("RESET1").form.id;
    document.getElementById("Sample").innerHTML = "The id of the form containing the reset button is: "+P ;
}

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

    HTML DOMのInput Radioオブジェクトにおけるformプロパティは、指定されたラジオボタンが属するフォーム（form要素）への参照を返すために使用されます。もしラジオボタンがどのフォームにも含まれていない場合は、NULLを返します。このプロパティは読み取り専用です。 構文 Input Radioのformプロパティの構文は以下のとおりです。 radioObject.form 使用例 ここで、Input Radioのformプロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html> <body> <h1&g

  2. HTML DOM Input Range の form プロパティとは？使い方をわかりやすく解説

    HTML DOM の Input Range（type=range の入力フィールド）におけるform プロパティは、対象となるレンジスライダーを含むフォームへの参照を取得するために使用されます。もしレンジスライダーがどのフォームにも属していない場合には NULL が返されます。なお、このプロパティは読み取り専用であり、値を代入して変更することはできません。構文Input Range の form プロパティの構文は以下の通りです。rangeObject.formサンプルコードそれでは、Input Range の form プロパティを使った具体的な例を見ていきましょう。<!DOCTYP