Form verisinde disabled ile readonly arasındaki fark nedir?

disabled bir form kontrolünü kullanılamaz hâle getirir; kullanıcı kontrolü odaklayamaz, değiştiremez ve form gönderildiğinde bu kontrolün değeri gönderilmez. readonly ise kontrolün değerinin kullanıcı tarafından değiştirilmesini engeller; kontrol genellikle odaklanabilir ve form gönderildiğinde mevcut değeri gönderilir.

Bu nedenle kullanıcıya yalnızca bilgi göstermek istiyor ancak değerin form verisine dahil edilmesini istiyorsanız readonly kullanın. Kontrol o işlem için geçerli değilse ve sunucuya hiç gönderilmemesi gerekiyorsa disabled kullanın.

Somut HTML örneği​

Aşağıdaki örneği bir .html dosyasına kaydedip tarayıcıda açabilirsiniz. Formun normal tarayıcı gönderiminde ilk alanın değeri gönderilir, ikinci alanın değeri gönderilmez. Gönderilen değerde geçerli bir name bulunması ve kontrolün örneğin üst fieldset üzerinden de devre dışı olmaması gerekir.


Bu örnekte tarayıcının oluşturacağı form verisi mantıksal olarak şöyledir:


campaign_code alanı form verisine dahil edilmez. action adresi çalışır durumda değilse gönderim sonrası sunucu yanıtı alınamaması normaldir; farkı görmek için tarayıcının geliştirici araçlarında ağ isteğinin form verisini inceleyebilir veya gerçek bir form uç noktası kullanabilirsiniz.

Davranış farklarını karşılaştırma​

Aşağıdaki tablo, seçim yaparken önemli olan farkları özetler:


Bu fark özellikle hesaplanan veya önceden doldurulan alanlarda önemlidir. Örneğin sipariş toplamını kullanıcı değiştiremesin fakat sunucuya gönderilsin istiyorsanız readonly kullanabilirsiniz. Ancak sunucu, tarayıcıdan gelen readonly değerine güvenmemelidir; kullanıcı HTML'yi değiştirerek farklı bir değer gönderebilir. Toplam, fiyat veya yetki gibi kritik bilgiler sunucuda yeniden hesaplanmalı ve doğrulanmalıdır.

readonly, textarea ve desteklenen metin/tarih/sayı input türleri içindir; checkbox, radio, range, file ve select üzerinde standart salt okunur davranış sağlamaz. Her iki öznitelik Boolean niteliktir: disabled="false" yazmak devre dışı olmayı kaldırmaz; niteliği kaldırmak veya JavaScript özelliğini false yapmak gerekir. aria-disabled ise tek başına odak veya form gönderim kurallarını değiştirmez.

Doğru niteliği seçme adımları​

1. Alan değerinin form gönderiminde sunucuya ulaşmasının gerekip gerekmediğini belirleyin.
2. Değer gönderilecek fakat kullanıcı tarafından değiştirilemeyecekse elemana readonly ekleyin.
3. Alan bu form işlemi için geçerli değilse veya geçici olarak kullanılmaması gerekiyorsa disabled ekleyin.
4. Form gönderildikten sonra sunucunun alanı yeniden doğrulamasını veya yeniden hesaplamasını sağlayın. readonly güvenlik mekanizması değildir.
5. Devre dışı bırakılmış bir alanın değerine de ihtiyaç varsa değeri ayrı bir gizli alanla göndermeyi düşünün; aynı bilginin istemciden gelmesinin güvenilir kanıt olmadığını unutmayın.

Sık yapılan hatalar​

disabled alanın değerini beklemek: Bir input'a disabled ekleyip sunucuda aynı alanın gelmesini beklemek hatalıdır. Gönderilmesi gerekiyorsa readonly kullanın veya sunucunun ihtiyaç duyduğu değeri kendi kaynağından elde etmesini sağlayın.

select için readonly kullanmak: readonly özelliği her form kontrolünde aynı şekilde çalışmaz. Özellikle select için standart bir readonly davranışı yoktur. Seçimin değişmesini istemiyorsanız arayüz davranışını ayrıca tasarlayın; gönderilecek değer için de sunucu tarafı doğrulamayı koruyun.

CSS ile disabled davranışı taklit etmek: Bir alanı yalnızca soluk göstermek veya tıklanamaz yapmak, form gönderim kurallarını otomatik olarak değiştirmez. Görünüm için CSS, veri gönderme ve etkileşim için doğru HTML niteliğini kullanın.

Kaynaklar​

• MDN: disabled
• MDN: readonly

Sık sorulan sorular​

readonly alanın değeri JavaScript ile değiştirilebilir mi?​

Evet. readonly kullanıcı arayüzündeki doğrudan düzenlemeyi sınırlar; JavaScript veya geliştirici araçlarıyla değer değiştirilebilir. Bu yüzden sunucu gelen değeri mutlaka doğrulamalıdır.

Bir alan hem disabled hem readonly olabilir mi?​

Teknik olarak ikisini birlikte yazabilirsiniz ancak anlamlı bir fayda sağlamaz. disabled zaten alanı kullanılamaz ve gönderilmez hâle getirdiği için bu durumda genellikle yalnızca disabled yeterlidir.