🚀 HTML Input Öznitelikleri: Form Elemanlarını Yönetmek

Selamlar arkadaşlar. Bugün işin biraz daha 'kontrol' kısmına giriyoruz. HTML'de sadece bir input oluşturmak yetmez; o inputun ne kadar veri alacağını, dışarıdan müdahale edilip edilemeyeceğini veya varsayılan olarak ne göstereceğini bilmemiz gerekir.

Form geliştirirken en çok karşımıza çıkan öznitelikler şunlardır:

1. Value (Değer)

Bir inputun başlangıç değerini belirler. Kullanıcı sayfayı açtığında kutunun içinde ne yazacağını bu belirler.

2. Readonly vs Disabled (Okunabilir vs Devre Dışı)

İkisi de kullanıcının metni değiştirmesini engeller ancak aralarında kritik bir fark vardır:

• readonly: Kullanıcı değiştiremez ama değer form gönderildiğinde sunucuya (backend) iletilir.
• disabled: Eleman tamamen grileşir, tıklanamaz ve form gönderildiğinde bu veri sunucuya gitmez.

3. Size ve Maxlength

• size: Input kutusunun ekrandaki görsel genişliğini (karakter cinsinden) belirler.
• maxlength: Kullanıcının girebileceği maksimum karakter sayısını sınırlar.

Ufak bir tecrübe: Bizim OvidEscaper gibi tarayıcı tabanlı küçük projelerde, kullanıcı adı kısmına maxlength koymayı unuttuğumuzda UI'ın nasıl patladığını görmüştük. Özellikle oyun içi chat veya isim alanlarında bu kısıtlamalar hayat kurtarır. Godot tarafında da buna benzer 'Inspector' ayarlarıyla input alanlarını limitliyoruz, mantık hep aynı.

Ek Detaylar

• Required: Bu özniteliği eklediğinizde, tarayıcı o alan boş bırakıldığında formu göndermeyi reddeder. Basit bir validasyon yöntemidir.
• Placeholder: Inputun içine silik bir şekilde ipucu metni yazar. value ile karıştırılmamalıdır; placeholder kutu tıklandığında veya yazı yazıldığında kaybolur.

Kod üzerinde denemeler yaparken readonly bir alana yazı yazmaya çalışın veya maxlength sınırını aşmayı deneyin. Aradaki farkları direkt tarayıcıda görmek en iyi öğrenme yöntemidir.

Keyifli kodlamalar!

Ovid Game Technical Founder | Full-Stack Dev ovidgame.com