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

HTMLのonresetイベント属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのonresetイベント属性は、フォームがリセットされたときに発生するイベント属性です。ユーザーが「リセット」ボタンをクリックして入力内容を初期化するタイミングで、あらかじめ指定しておいたJavaScriptの処理を実行できます。

基本構文

onresetイベント属性の書き方は以下のとおりです。

<tagname onreset="script"></tagname>

サンプルコード

続いて、onresetイベント属性を使った具体的なデモを見てみましょう。この例では、フォームがリセットされるとページの背景のグラデーションが切り替わり、「Form was reset」というメッセージが画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    textarea {
        border: 2px solid #fff;
        background: transparent;
        font-size: 1rem;
    }
    ::placeholder {
        color: #000;
        font-size: 1rem;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>HTML onreset Event Attribute Demo</h1>
<form onreset="resetFn()">
<textarea placeholder="Enter your message here" onreset="resetFn()" rows='8' cols="50"></textarea>
<input type="reset" value="Reset" class="btn">
</form>
<div class="show"></div>
<script>
    function resetFn() {
        document.body.style.background = 'linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat';
        document.querySelector('.show').innerHTML = "Form was reset";
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、最初は次のように表示されます。

HTMLのonresetイベント属性とは？使い方とサンプルコードをわかりやすく解説

ここで「Reset」ボタンをクリックしてみてください。onresetイベントが発火し、背景がオレンジ系から青系のグラデーションへと変化するとともに、メッセージが表示されます。

HTMLのonresetイベント属性とは？使い方とサンプルコードをわかりやすく解説

onresetイベント属性のポイント

  • 主に<form>要素に対して指定して使用します。
  • type="reset" のボタンがクリックされたときだけでなく、JavaScriptの form.reset() メソッドが呼び出された場合にもイベントは発生します。
  • フォームの初期化時に確認メッセージを表示したり、操作ログを記録したりといった用途に活用できます。

まとめ

onresetイベント属性を使えば、フォームがリセットされた瞬間に任意のJavaScript処理を実行できます。入力内容の初期化に合わせてUIを変化させたい場合などに便利な属性なので、ぜひ実際のコードで試してみてください。

  1. HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragleaveイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップターゲット（ドロップ先）から離れた瞬間に発生するイベントです。ドラッグ＆ドロップ操作では、要素がドロップゾーンに入ったときに発生するondragenterと対になるイベントであり、両者を組み合わせることで、ユーザーにとって分かりやすい視覚的フィードバックを実現できます。 構文 ondragleaveイベント属性の基本的な構文は以下のとおりです。 <tagname ondragleave=”script”></tagname>

  2. HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値