🚀 Kullanıcı Etkileşiminin Kalbi: HTML Formları

Web sayfalarını statik birer döküman olmaktan çıkarıp interaktif uygulamalara dönüştüren HTML form yapısını ve veri toplama mantığını inceliyoruz.

Formların Anatomisi

Selamlar! Bugün web geliştirmenin en kritik noktalarından birine, kullanıcının bizimle doğrudan iletişim kurduğu HTML Formlarına giriyoruz. Bir web sitesini sadece bir 'broşür' olmaktan çıkarıp gerçek bir 'uygulama' haline getiren şey, kullanıcıdan veri alabildiğimiz bu yapılardır.

Bir formun temel iskeleti <form> etiketiyle başlar. Bu etiketin en önemli iki özelliği (attribute) vardır:

  1. action: Verinin nereye gönderileceğini belirler (bir URL).
  2. method: Verinin nasıl gönderileceğini belirler. Genellikle iki seçenek kullanılır:
    • GET: Veriyi URL'nin sonuna ekler (örn: arama?q=ovidgame). Hassas olmayan veriler için idealdir.
    • POST: Veriyi gizli bir paket içinde gönderir. Şifreler ve büyük veriler için bu şarttır.

Biz OvidRacer (Amansız Takip) projesinde kullanıcı skorlarını sunucuya gönderirken, verinin güvenliği ve URL limitlerine takılmaması için her zaman POST yapısını tercih etmiştik. Web tarafında da kural değişmiyor: Güvenlik ve veri bütünlüğü için POST candır.

🚀 Sanal Kodlama Alanı Yükleniyor...

Etiketlerin ve Erişilebilirliğin Önemi

Kodda fark ettiyseniz her input için bir <label> kullandık ve for niteliği ile input'un id değerini eşleştirdik. Bu sadece tasarım için değil, aynı zamanda kullanıcı deneyimi için de çok kritik. Kullanıcı etikete tıkladığında ilgili giriş alanı otomatik olarak odaklanır (focus).

Dikkat etmeniz gereken bazı temel noktalar:

  • Name Niteliği: Sunucu tarafında veriyi yakalamak için name niteliği zorunludur. Eğer bir input'un name değeri yoksa, o veri sunucuya gitmez, boşlukta kaybolur.
  • Validation (Doğrulama): required, minlength veya type="email" gibi HTML5 özellikleri, JavaScript yazmanıza gerek kalmadan tarayıcı seviyesinde temel kontrolleri yapar.

Oyun geliştirirken biz buna 'input handling' diyoruz; web tarafında ise form yönetimi işin temelidir. Formları doğru kurmak, veritabanına temiz veri göndermenin ilk adımıdır.

Ovid Game Teknik Günlüğü - ovidgame.com