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

JavaScriptでフォームをリセット・クリアする方法｜reset()メソッドの使い方を解説

JavaScriptを使ってフォームをリセットまたはクリアしたい場合は、reset()メソッドを使用します。このメソッドは、フォームに用意された「リセットボタン」をクリックしたときとまったく同じように動作し、フォーム内のすべての入力要素（テキストボックス、パスワード欄、チェックボックス、ラジオボタンなど）の値を初期状態に戻します。

reset()メソッドの基本

reset()メソッドは、対象のform要素に対して呼び出すだけで使えます。なお、リセットとは「空にする」ことではなく、HTMLのvalue属性などで指定された初期値（デフォルト値）に戻すという点に注意してください。初期値が設定されていない要素は空白になります。

サンプルコード

以下のコードを実行すると、ボタンをクリックしただけでJavaScriptからフォームをリセットできることが確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTMLフォームのリセット</title>
   </head>
   <body>
      <form id="newForm">
         学生名<br><input type="text" name="sname"><br>
         科目<br><input type="password" name="ssubject"><br>
         <input type="button" onclick="newFunction()" value="リセット">
      </form>
      <script>
         function newFunction() {
            document.getElementById("newForm").reset();
         }
      </script>
   </body>
</html>

コードのポイント

  • document.getElementById()で対象のフォーム要素を取得します。
  • 取得したフォームに対してreset()を呼び出すことで、すべての入力内容が一括で初期化されます。
  • type属性が「button」のinput要素は送信されないため、リセット専用ボタンとして安全に利用できます。

このように、reset()メソッドを使えば数行のコードでフォームの初期化が実現でき、入力内容のやり直し機能などを簡単に追加できます。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptのmap()メソッドで配列を変換する方法を解説

    JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。 以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&