フォームリセットイベントと状態管理
フォームのリセットを処理し、ユーザー操作全体でフィールドの状態を追跡します
「フォームリセットイベントと状態管理」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
resetイベント
form.reset()を呼び出すか、<button type="reset">をクリックすると、フォームでresetイベントが発生します。各フィールドは初期値（value属性の値、または新しい入力項目の場合は空）に戻ります。プログラムでリセットに反応するには、このイベントを監視します。
デフォルト値
リセットで使用される初期状態は、現在の値ではなく、defaultValue、defaultChecked、defaultSelectedプロパティです。これらはHTMLのvalue、checked、selected属性を反映します。属性は解析時に設定され、ユーザーが操作しても変わりません。
プログラムによるデフォルト値の更新
現在の値を新しい「デフォルト」にして、その後のリセットでそこに戻すには、input.defaultValue = input.valueを設定します。保存が成功した後などに便利です。以降のリセットで、最初の空のフォームではなく保存済みの状態に戻せます。
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});resetの監視
resetイベントは、値が元に戻る前に発生します。リセット後の状態を調べるには、次のマイクロタスクまで処理を遅延させます。form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... }))のように記述します。これはイベントのタイミングでよく混乱しやすい点です。
リセットの防止
resetイベントハンドラー内でe.preventDefault()を呼び出すと、リセットがキャンセルされ、値はそのまま残ります。ユーザーが重要な入力を行ったフォームで「本当に実行しますか？」という確認を表示する場合に便利です。
変更状態の追跡
現在の値とデフォルト値を比較すると、フォームが変更済みかどうかを確認できます。const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue)のように記述します。保存ボタンの有効化・無効化や、未保存の変更に関する確認表示に利用できます。
beforeunloadによる確認
変更済みのフォームから移動する前に警告するには、window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } })のように記述します。ブラウザーは「サイトを離れますか？」という汎用的な確認を表示します。最新のブラウザーでは独自のメッセージはサポートされていません。
リセットボタンは通常UXを損なう
リセットボタンは、誤って1回クリックしただけですべてのフィールドをリセットしてしまい、深刻な結果を招くことがあります。現在のUIでは、リセットボタンを完全に省略するか、確認操作の背後に隠すことが一般的です。リセットが必要な場合は送信ボタンから十分に離して配置し、1ステップで取り消せるようにすることも検討してください。
フォーム状態の永続化
長いフォームでは、inputイベントの発生時に状態をlocalStorageへ保存し、読み込み時に復元します。「下書きを復元しますか？」という確認と組み合わせると、タブを誤って閉じても入力内容を失わずに済みます。不要になった保存済み状態は、resetやsubmitのハンドラーと組み合わせて消去します。
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});独自コンポーネントとreset
独自フォーム要素（web componentとして構築した要素）は、ElementInternalsを通じてフォームのリセットに参加できます。formResetCallbackメソッドでデフォルト値を復元します。内部の入力項目をラップしている独自要素では、明示的なリセットが必要です。
フォーム関連付けされた独自要素
独自要素のクラスでstatic formAssociated = trueを宣言し、this.attachInternals()を使うと、フォームのライフサイクルに統合するためのformResetCallback、formStateRestoreCallback、formDisabledCallback、formAssociatedCallbackが公開されます。
理解度チェック
form.reset()が呼び出されたとき、各フィールドはどの値に戻りますか。
まとめ
form.reset()が実行されるとresetイベントが発生し、フィールドはdefaultValue、defaultChecked、defaultSelectedに戻ります。保存後にデフォルト値を更新すると、それらを新しいリセット状態にできます。現在の値とデフォルト値を比較して変更状態を追跡し、長いフォームではlocalStorageに保存します。移動前の警告にはbeforeunloadを使用します。独自要素はformAssociatedとformResetCallbackを通じて統合できます。
よくある質問
「フォームリセットイベントと状態管理」レッスンは無料ですか？
はい。「フォームリセットイベントと状態管理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「フォームリセットイベントと状態管理」で何を学びますか？
フォームのリセットを処理し、ユーザー操作全体でフィールドの状態を追跡します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「フォームリセットイベントと状態管理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。