HTML Form Yapıları: input vs textarea vs select

Bir form alanını yalnızca ekranda nasıl göründüğüne göre seçmeyin. Kullanıcının tek bir değer mi, uzun bir açıklama mı, yoksa izin verilen seçeneklerden birini mi göndereceği önemlidir. HTML kontrolü giriş deneyimini belirler; gelen verinin kabul edilip edilmeyeceğine sunucu karar verir.

input: türüne göre davranan kontrol

Metin tabanlı input türleri kısa girişler için uygundur. input aynı zamanda checkbox, radio ve file gibi farklı kontroller de üretir; bütün input alanları tek satırlık metin kutusu değildir.

<label for="email">E-posta</label>
<input id="email" name="email" type="email" autocomplete="email" required>

Label'ın for değeri ile kontrolün id değeri eşleşir. Placeholder, görünen ve kalıcı bir etiketin yerini tutmaz. name değeri, normal form gönderiminde alanın anahtarıdır; yalnızca id vermek gönderilecek alan adını belirlemez.

textarea: çok satırlı serbest metin

<label for="message">Mesaj</label>
<textarea id="message" name="message" rows="5" maxlength="2000"></textarea>

Textarea'nın başlangıç metni açılış ve kapanış etiketleri arasına yazılır; value özelliğiyle atanmaz. Kullanıcı metnini buraya sunucudan yerleştiriyorsanız HTML bağlamına uygun kaçış uygulayın. rows görünür yüksekliğe ilişkin bir ipucudur; metnin kaç satır içerebileceğini sınırlamaz.

select: izin verilen değerlerden seçim

<label for="topic">Konu</label>
<select id="topic" name="topic" required>
  <option value="">Bir konu seçin</option>
  <option value="support">Teknik destek</option>
  <option value="billing">Faturalandırma</option>
</select>

Gönderilen veri kullanıcıya görünen yazı değil, seçilen option'ın value değeridir. Sunucuda support ve billing dışındaki değerleri reddedin. Saldırgan veya hatalı istemci, tarayıcıda gösterilmeyen bir değeri de gönderebilir. Çoklu seçim ayrı bir veri yapısı gerektirir; tek değer bekleyen kodda dizi gelmesi de kontrol edilmelidir.

Tarayıcı kontrolünü sunucu doğrulamasıyla karıştırmayın

required ve type=email, kullanıcıya erken geri bildirim verir. Bunlar kimlik doğrulama, CSRF koruması veya sunucu tarafındaki uzunluk ve tür kontrollerinin yerine geçmez. E-posta biçiminin kabul edilmesi, adresin varlığını ya da kullanıcıya ait olduğunu da kanıtlamaz.

Formu önce boş, sonra beklenmeyen uzunlukta metinle gönderin. Ağ isteğinde alan adlarını ve gönderilen değerleri inceleyin. Disabled kontrollerin normal form gönderimine katılmadığını unutmayın. Son olarak sunucuya geçersiz bir seçenek gönderildiğinde işlemin reddedildiğini doğrulayın; yalnızca tarayıcı uyarısını görmek yeterli değildir.

Başvuru: MDN form doğrulama rehberi.