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

HTMLのonreset属性でフォームのリセットボタン押下時にスクリプトを実行する方法

フォームがリセットされると、onreset属性に設定したスクリプトがトリガーされます。<form>タグにこの属性を追加することで、ユーザーがリセットボタンをクリックしたタイミングで任意のJavaScript関数を呼び出すことができます。

サンプルコード

以下のコードは、onreset属性を実装した例です。リセットボタンがクリックされると、アラートが表示されます。

<!DOCTYPE html>
<html>
   <body>
      <form onreset = "display()">
         学生名：<br>
         <input type = "text" name = "sname">
         <br>
         科目：<br>
         <input type = "text" name = "ssubject">
         <br>
         <input type = "reset" value = "リセット">
      </form>
      <script>
         function display() {
            alert("フォームが正常にリセットされました！");
         }
      </script>
   </body>
</html>

コードの解説

<form>要素にonreset="display()"を指定することで、リセット操作が行われた際にdisplay()関数が実行されます。関数内では、フォームのリセットが完了したことを知らせるアラートを表示しています。

addEventListenerを使った方法

HTML属性を使用せず、JavaScript側でイベントリスナーを登録する方法もあります。HTML構造とスクリプト処理を分離できるため、より保守性の高いコードになります。

document.querySelector("form").addEventListener("reset", function() {
  alert("フォームが正常にリセットされました！");
});

このように、onreset属性またはresetイベントを利用すれば、リセット時の確認ダイアログの表示や入力内容のログ記録など、さまざまな処理を柔軟に追加できます。

  1. HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法

    HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文

  2. HTMLのbutton要素におけるform属性の使い方を徹底解説

    <button>要素のform属性は、そのボタンがどのフォームに属するかを指定するための属性です。通常、送信ボタンは<form>タグの中に配置する必要がありますが、form属性を使えば、フォームの外側に置いたボタンでも特定のフォームと関連付けることが可能になります。 form属性の基本構文 form属性の書き方は以下の通りです。 <button form="id"> ここで指定する「id」は、ボタンを関連付けたいフォームのIDです。<form>要素に設定されたid属性の値と一致させる必要があります。 form属性の使用例 それ