Peristiwa Reset Formulir dan Pengelolaan Status
Tangani reset formulir dan lacak status bidang selama interaksi pengguna.
Peristiwa Reset Formulir dan Pengelolaan Status adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Peristiwa reset
Memanggil form.reset() atau mengeklik <button type="reset"> memicu peristiwa reset pada formulir. Setiap bidang kembali ke nilai awalnya (atribut value, atau kosong untuk bidang baru). Dengarkan peristiwa ini untuk merespons pengaturan ulang secara terprogram.
Nilai Bawaan
Status awal yang digunakan oleh pengaturan ulang adalah properti defaultValue, defaultChecked, atau defaultSelected—bukan nilai saat ini. Properti ini mencerminkan atribut value/checked/selected dalam HTML, yang ditetapkan saat penguraian dan tidak berubah karena interaksi pengguna.
Memperbarui Nilai Bawaan secara Terprogram
Untuk menjadikan nilai saat ini sebagai "bawaan" baru (agar pengaturan ulang berikutnya mengembalikan nilai tersebut), tetapkan input.defaultValue = input.value. Ini berguna setelah penyimpanan berhasil: pengaturan ulang berikutnya kembali ke status tersimpan, bukan ke formulir kosong semula.
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});Mendengarkan reset
Peristiwa reset dipicu sebelum nilai dikembalikan. Untuk memeriksa status setelah pengaturan ulang, tunda hingga tugas mikro berikutnya: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Ini adalah detail waktu peristiwa yang sering membingungkan.
Mencegah Pengaturan Ulang
Jika Anda memanggil e.preventDefault() dalam penangan peristiwa reset, pengaturan ulang dibatalkan—nilai tetap seperti sebelumnya. Ini berguna untuk konfirmasi "Apakah Anda yakin?" pada formulir yang berisi banyak masukan pengguna.
Melacak Status Perubahan
Bandingkan nilai saat ini dengan nilai bawaan untuk mengetahui apakah formulir telah berubah: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Gunakan ini untuk mengaktifkan atau menonaktifkan tombol simpan, atau menampilkan konfirmasi tentang perubahan yang belum disimpan.
Konfirmasi sebelum Meninggalkan Halaman
Untuk memperingatkan pengguna sebelum meninggalkan formulir yang telah berubah: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Peramban menampilkan pertanyaan umum "Apakah Anda ingin meninggalkan situs?"; pesan kustom tidak lagi didukung di peramban modern.
Tombol Pengaturan Ulang Biasanya Buruk untuk Pengalaman Pengguna
Tombol pengaturan ulang mengatur ulang setiap bidang hanya dengan satu klik yang tidak disengaja, dan akibatnya sering kali parah. Sebagian besar antarmuka modern menghilangkannya sepenuhnya atau menyembunyikannya di balik konfirmasi. Jika Anda memerlukan pengaturan ulang, letakkan tombol tersebut jauh dari tombol kirim dan pertimbangkan fitur pembatalan satu langkah.
Persistensi Status Formulir
Untuk formulir yang panjang, simpan status ke localStorage saat terjadi peristiwa pada bidang, lalu pulihkan saat halaman dimuat. Sertakan permintaan "Pulihkan draf?" agar pengguna tidak kehilangan pekerjaan karena tab tertutup secara tidak sengaja. Padukan dengan penangan pengaturan ulang dan pengiriman untuk menghapus status tersimpan saat sudah tidak diperlukan.
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});Komponen Kustom dan Pengaturan Ulang
Elemen formulir kustom (yang dibuat sebagai komponen web) berpartisipasi dalam pengaturan ulang formulir melalui ElementInternals: di dalam metode formResetCallback, pulihkan nilai bawaan. Ini diperlukan ketika elemen kustom membungkus bidang internal yang memerlukan pengaturan ulang secara eksplisit.
Elemen Kustom yang Terhubung ke Formulir
Mendeklarasikan static formAssociated = true pada kelas elemen kustom dan menggunakan this.attachInternals() menyediakan formResetCallback, formStateRestoreCallback, formDisabledCallback, dan formAssociatedCallback untuk mengintegrasikan elemen tersebut dengan siklus hidup formulir.
Pemeriksaan Pengetahuan
Ke nilai apa setiap bidang dikembalikan saat form.reset() dipanggil?
Ringkasan
Peristiwa reset dipicu saat form.reset() dijalankan; bidang kembali ke defaultValue/defaultChecked/defaultSelected. Perbarui nilai bawaan setelah penyimpanan agar nilai tersebut menjadi status pengaturan ulang yang baru. Lacak status perubahan dengan membandingkan nilai saat ini dengan nilai bawaan, simpan ke localStorage untuk formulir panjang, dan gunakan beforeunload untuk memperingatkan saat navigasi. Elemen kustom terintegrasi melalui formAssociated dan formResetCallback.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peristiwa Reset Formulir dan Pengelolaan Status” gratis?
Ya — teks lengkap “Peristiwa Reset Formulir dan Pengelolaan Status” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Peristiwa Reset Formulir dan Pengelolaan Status”?
Tangani reset formulir dan lacak status bidang selama interaksi pengguna. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Peristiwa Reset Formulir dan Pengelolaan Status” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- FormData API
- Constraint Validation API
- reportValidity dan setCustomValidity
- Peristiwa Reset Formulir dan Pengelolaan Status