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

HTML DOM フォームの reset() メソッドとは？使い方とサンプルコードを解説

HTML DOM の Form reset() メソッドは、フォーム内のすべての入力値を初期化し、各フォーム要素の value 属性で指定されたデフォルト値を再表示するためのメソッドです。いわば「リセットボタン」として機能し、フォームに入力されたデータを一括でクリアできます。なお、このメソッドは引数（パラメータ）を一切受け取りません。

構文

Form オブジェクトの reset() メソッドの基本的な構文は以下のとおりです。

formObject.reset()

使用例

ここでは、reset() メソッドを使った具体的なサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ResetForm() {
      document.getElementById("FORM1").reset();
      document.getElementById("Sample").innerHTML="Form has been reset";
   }
</script>
</head>
<body>
<h1>Form reset() method example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>
<p id="Sample"></p>
</body>
</html>

実行結果

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

HTML DOM フォームの reset() メソッドとは？使い方とサンプルコードを解説

RESET ボタンをクリックすると、以下のようにフォームが初期化されます。

HTML DOM フォームの reset() メソッドとは？使い方とサンプルコードを解説

コードの解説

このサンプルでは、まず id="FORM1"、method="post"、action="/sample_page.php" を持つフォームを作成しています。フォームの中には、テキスト型の入力フィールドが 2 つと、送信ボタン、そしてリセット用のボタンが配置されています。

<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>

RESET ボタンがクリックされると、ResetForm() 関数が呼び出されます。

<input type="button" onclick="ResetForm()" value="RESET">

ResetForm() 関数の内部では、document オブジェクトの getElementById() メソッドを使って <form> 要素を取得し、その要素に対して reset() メソッドを実行します。これにより、フォーム内のすべての入力データがクリアされます。最後に、innerHTML プロパティを使用して、id="Sample" の段落要素に変更内容を示すテキストを表示しています。

function ResetForm() {
   document.getElementById("FORM1").reset();
   document.getElementById("Sample").innerHTML="Form has been reset";
}

このように、reset() メソッドを活用すれば、JavaScript から簡単にフォームの内容を初期状態に戻すことができ、ユーザーが入力をやり直したい場合などに便利です。

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

    HTML DOMにおけるInput Resetオブジェクトのformプロパティは、指定されたリセットボタンが所属するフォーム（form要素）への参照を取得するために使用されます。リセットボタンがフォームの外に配置されている場合は、単にNULLが返されます。なお、このプロパティは読み取り専用です。 構文 Input Resetのformプロパティの基本構文は以下の通りです。 resetObject.form 使用例 それでは、Input Resetのformプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body>

  2. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ