🚀 HTML'de Form Sınırlarını Aşmak: Input Form Nitelikleri

Bir input elementini formun dışına taşımayı ve gönderim detaylarını (URL, metod vb.) buton seviyesinde özelleştirmeyi öğreniyoruz.

Selamlar, bugün HTML formlarının biraz 'asi' tarafına bakacağız. Genelde form elemanlarını hep <form> etiketinin içine hapsederiz, değil mi? Ancak bazen UI tasarımı öyle bir noktaya gelir ki, bir input veya butonun DOM ağacında formun çok uzağında durması gerekir.

Zamanında bizim OvidEscaper projesinin arayüzünü kurgularken, yan menüdeki bir butonu sayfanın ortasındaki bir formla ilişkilendirmemiz gerekmişti. İşte orada imdadımıza HTML5'in form niteliği yetişti. Bu nitelik sayesinde, eleman formun içinde olmasa bile hangi forma ait olduğunu id üzerinden söyleyebiliyorsunuz.

🚀 Sanal Kodlama Alanı Yükleniyor...

Kritik Nitelikler Neler?

Kod örneğinde de gördüğünüz gibi, standart form akışını değiştiren çok güçlü niteliklerimiz var:

  1. form: Inputu formun ID'sine bağlar. Layout (düzen) özgürlüğü sağlar.
  2. formaction: Diyelim ki bir formunuz var ama iki farklı butonu var. Biri "Taslağı Kaydet" diğeri "Yayına Al". İkisi farklı API uçlarına (endpoint) gitmeli. İşte o zaman butona özel formaction tanımlarsınız.
  3. formmethod: Formun genel metodu POST olsa bile, spesifik bir butonla bunu GET olarak gönderebilirsiniz.
  4. formnovalidate: Formda required gibi validasyonlar olsa bile, bu niteliğe sahip buton (genelde 'İptal' veya 'Taslak' butonu) validasyonu görmezden gelerek formu gönderir.

Bu teknikler, özellikle React veya modern frameworkler kullanmadan, saf HTML/JS ile büyük dashboardlar geliştirirken kodun okunabilirliğini çok artırıyor. Projenin mimarisini kurarken bazen en basit HTML niteliği, onlarca satır JS kodundan daha temiz bir çözüm sunabiliyor.

— Ovid Game Teknik Ekibi