🚀 HTML Form Kontrolleri ve Input Tipleri

Kullanıcıdan veri almanın temel taşı olan <input> etiketini, tarayıcıların sunduğu modern yetenekler ve validasyon kurallarıyla derinlemesine inceliyoruz.

Form Elemanlarının Gücü

Selamlar dostlar. Bir Full-Stack geliştirici olarak söyleyebilirim ki, kullanıcıyla etkileşime geçtiğiniz en kritik nokta formlardır. HTML5 ile birlikte gelen yeni input tipleri, eskiden JavaScript ile saatlerce uğraştığımız (validasyonlar, özel pickerlar vb.) birçok işi tarayıcı seviyesinde halletmemizi sağlıyor.

Bir oyun arayüzü tasarlarken de, bir e-ticaret sitesi yaparken de doğru type kullanımı hem kullanıcı deneyimini (UX) artırır hem de mobil cihazlarda klavyenin otomatik olarak optimize edilmesini sağlar (örneğin email tipinde @ işaretinin klavyede öne çıkması gibi).

Temel ve Gelişmiş Input Tipleri

  • text & password: En temel ikili. Şifre alanı karakterleri gizler.
  • email & number: Tarayıcı bazlı temel doğrulamaları yapar. number tipinde min ve max değerleri belirleyerek sınırlandırma yapabilirsiniz.
  • date & color: İşin en keyifli kısmı. Eskiden color picker yapmak için devasa kütüphaneler kullanırdık. Biz OvidRacer projesinde araç renklerini seçtirirken tarayıcının yerleşik type="color" özelliğinden faydalanmıştık; hem performanslı hem de her platformda stabil çalışıyor.
  • radio & checkbox: Çoktan seçmeli yapılar. Radio grupları için name özniteliğinin aynı olması gerektiğini unutmayın.
🚀 Sanal Kodlama Alanı Yükleniyor...

Teknik İpucu

type="number" kullanırken tarayıcı otomatik olarak sağ tarafa aşağı/yukarı okları ekler. Eğer bu okları istemiyorsanız CSS ile appearance: textfield özelliğini kullanabilirsiniz. Ancak her zaman hatırlayın: HTML seviyesindeki kısıtlamalar (required, min, max) kullanıcı dostudur ama asla güvenlik yerine geçmez. Backend tarafında da bu verileri her zaman doğrulamalısınız.

Kodla kalın,

Ovid Game Studio - Teknik Ekip ovidgame.com