JavaScriptをリセットする方法

JavaScript は、フォーム検証やインタラクティブ効果の実現など、Web フロントエンド開発やインタラクション デザインによく使用されるスクリプト言語です。 Web ページの開発中に、フォーム データをリセットする必要が生じる場合があります。では、JavaScript はどのようにしてフォームをリセットするのでしょうか?

フォームリセットとは何ですか?

フォームのリセットとは、フォームに入力されたデータをクリアし、フォームが初期化されたときの状態に戻すことを意味します。ユーザーが情報を入力してフォームを送信した後、再度入力する必要がある場合は、フォームをリセットするのが簡単な方法です。

JavaScript を使用してフォームをリセットする

JavaScript では、reset() メソッドを使用してフォームをリセットできます。このメソッドは、すべてのフォーム要素およびフォーム コントロール タイプで機能します。 JavaScript を使用してフォームをリセットするサンプル コードを次に示します。

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age"><br><br>
  <input type="button" value="Reset" onclick="resetForm()">
  <input type="submit" value="Submit">
</form>

<script>
function resetForm() {
  document.getElementById("myForm").reset();
}
</script>

このサンプル コードでは、resetForm() 関数を使用してフォームがリセットされます。この関数は、getElementById() メソッドを使用してフォーム要素を取得し、reset() メソッドを呼び出してそれをリセットします。 HTML コードでは、この関数の実行はボタンの onclick イベントによってトリガーできます。

フォームをリセットした後の影響

フォームをリセットすると、フォーム内のすべてのデータがクリアされます。入力されていないフォームフィールドは、input 要素の value 属性や checked 属性など、デフォルト値または空の値にリセットされます。フォームをリセットしても選択したオプションはクリアされず、select 要素の選択はデフォルトのオプションに戻ります。

JavaScript リセット フォームではページが更新またはリロードされないことに注意してください。ページの他の部分に影響を与えることなく、フォーム内のデータをデフォルト値または null 値に復元するだけです。

概要

JavaScript は、フォームのリセットやフォーム データのクリアに使用できる非常に強力なスクリプト言語です。 JavaScript を使用してフォームをリセットすると、ユーザーはフォームを簡単に補充できるため、毎回手動でフォーム データをクリアする必要がなくなります。ただし、フォームをリセットしてもページは更新されず、フォーム データがデフォルト値または空の値に復元されるだけであることに注意してください。

以上がJavaScriptをリセットする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。