Form Sıfırlama Olayları ve Durum Yönetimi

form.reset() çağrılması veya <button type="reset"> düğmesine tıklanması, form üzerinde bir reset olayı tetikler. Her alan başlangıç değerine ( value özniteliğine veya yeni girdiler için boş değere) döner. Olayı programatik olarak işlemek için dinleyin.

Sıfırlama sırasında kullanılan başlangıç durumu, geçerli değer değil, defaultValue, defaultChecked veya defaultSelected özelliğidir. Bunlar HTML'de ayrıştırma sırasında belirlenen ve kullanıcı etkileşimiyle değişmeyen value/checked/selected özniteliklerini yansıtır.

Geçerli bir değeri yeni “varsayılan” yapmak (böylece sonraki sıfırlamalarda bu değere dönülmesini sağlamak) için input.defaultValue = input.value atamasını yapın. Başarılı bir kaydetme işleminden sonra kullanışlıdır: sonraki sıfırlamalar başlangıçtaki boş form yerine kaydedilen duruma döner.

reset olayı, değerler geri dönmeden önce tetiklenir. Sıfırlama sonrası durumu incelemek için işlemi bir sonraki mikro göreve erteleyin: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Olay zamanlamasının sıkça kafa karıştıran bir ayrıntısıdır.

Bir reset olay işleyicisinde e.preventDefault() çağırırsanız sıfırlama iptal edilir ve değerler olduğu gibi kalır. Önemli kullanıcı girdileri içeren formlarda “emin misiniz?” onayları için kullanışlıdır.

Formda değişiklik olup olmadığını anlamak için geçerli değerleri varsayılanlarla karşılaştırın: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Bunu bir kaydet düğmesini etkinleştirmek veya devre dışı bırakmak ya da kaydedilmemiş değişiklikler için onay göstermek amacıyla kullanın.

Değişiklik içeren bir formdan ayrılırken kullanıcıyı uyarmak için: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Tarayıcılar genel bir “siteden ayrılmak istiyor musunuz?” istemi gösterir; modern tarayıcılarda özel mesajlar artık desteklenmez.

Sıfırlama düğmeleri, tek bir yanlış tıklamayla her alanı sıfırlar ve çoğu zaman ciddi sonuçlara yol açar. Modern kullanıcı arayüzlerinin çoğu bu düğmeleri tamamen kaldırır veya bir onayın arkasına gizler. Sıfırlamaya ihtiyacınız varsa düğmeyi gönder düğmesinden uzağa yerleştirin ve tek adımlı bir geri alma seçeneği düşünün.

Uzun formlarda durumu girdi olaylarında localStorage'a kaydedin ve yükleme sırasında geri yükleyin. Kullanıcıların sekmelerin yanlışlıkla kapanması nedeniyle çalışmalarını kaybetmemesi için bunu “Taslak geri yüklensin mi?” istemiyle birlikte kullanın. Artık gerekmediğinde kaydedilen durumu temizlemek için sıfırlama ve gönderim işleyicileriyle birleştirin.

Özel form öğeleri (web bileşenleri olarak oluşturulanlar), ElementInternals aracılığıyla form sıfırlamasına katılır: formResetCallback yönteminizde varsayılan değeri geri yükleyin. Bu, açıkça sıfırlanması gereken dahili bir girdiyi saran özel öğeler için gereklidir.

Özel bir öğe sınıfında static formAssociated = true bildirimini yapmak ve this.attachInternals() kullanmak, form yaşam döngüsüyle bütünleşmek için formResetCallback, formStateRestoreCallback, formDisabledCallback ve formAssociatedCallback işlevlerini kullanıma sunar.

reset olayı, form.reset() çalıştığında tetiklenir; alanlar defaultValue/defaultChecked/defaultSelected değerlerine döner. Kaydetme işleminden sonra varsayılanları güncelleyerek bunları yeni sıfırlama durumu yapın. Geçerli değerleri varsayılan değerlerle karşılaştırarak değişiklik durumunu izleyin, uzun formlar için localStorage'a kaydedin ve gezinme uyarıları için beforeunload kullanın. Özel öğeler formAssociated ve formResetCallback aracılığıyla bütünleşir.