🚀 HTML Form Kontrolü ve Sunucu İletişimi

Formların sunucuyla nasıl konuştuğunu, verinin nasıl paketlendiğini ve tarayıcı davranışlarını kontrol eden kritik form nitelikleri.

Selamlar, ben Ovid Game'den. Bugün formların sadece birer 'input kutusu' olmadığını, arka planda birer haberleşme protokolü gibi nasıl çalıştıklarını inceleyeceğiz. Bir formu sadece görsel olarak tasarlamak yetmez; verinin nereye, nasıl ve hangi kurallarla gideceğini belirlemek, uygulamanızın güvenliği ve kullanıcı deneyimi için kritiktir.

1. action ve method İkilisi

Bu iki nitelik formun kalbidir.

  • action: Form gönderildiğinde verilerin hangi URL'ye gideceğini belirtir. Eğer boş bırakılırsa sayfa kendi kendine post edilir. Biz genellikle API uç noktalarımızı buraya tanımlarız.
  • method: Verinin taşınma şeklidir.
    • GET: Verileri URL'nin sonuna ekler (?isim=ovid). Arama kutuları için idealdir ama şifre gibi hassas veriler için asla kullanılmamalıdır. Limitlidir (URL boyutu kadar).
    • POST: Veriyi HTTP isteğinin gövdesinde (body) gönderir. Boyut sınırı yoktur ve daha güvenlidir.

2. target ve autocomplete

  • target: Form sonucunun nerede açılacağını belirler. _blank derseniz, form gönderildikten sonra gelen yanıt yeni sekmede açılır.
  • autocomplete: Tarayıcının kullanıcıya daha önceki girişlerine göre öneri sunup sunmayacağını belirler.

Küçük bir tecrübe: Ovid'de geliştirdiğimiz oyunların giriş ekranlarında veya launcher arayüzlerinde autocomplete="off" niteliğini sıkça kullanırız. Tarayıcının alakasız kullanıcı adı önerileriyle oyun atmosferini ve UI estetiğini bozmasını istemeyiz.

3. novalidate Nitelİği

Bu boolean bir niteliktir. Eğer formunuza novalidate eklerseniz, tarayıcının yerleşik doğrulama mekanizmalarını (örneğin required veya type="email" kontrollerini) devre dışı bırakırsınız.

Genelde React veya vanilla JS ile kendi karmaşık doğrulama mantığımızı yazacağımız zaman tarayıcının araya girip o meşhur 'Lütfen bu alanı doldurun' baloncuğunu çıkarmasını istemeyiz. Bu durumda kontrolü tamamen JS tarafına alırız.

🚀 Sanal Kodlama Alanı Yükleniyor...

Özet

Bir formu yapılandırırken sadece input etiketlerine odaklanmayın. Formun ana etiketindeki nitelikler, o verinin güvenliğinden tutun, tarayıcının kullanıcıya nasıl yardımcı olacağına (veya olmayacağına) kadar her şeyi belirler. Özellikle novalidate kullanarak kontrolü elinize almak, modern web uygulamalarında standart bir yaklaşımdır.

Bol kodlu günler.

Ovid Game Studio | Teknik Paylaşımlar