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

Web formları kullanıcıdan veri toplamanın temel yoludur. Ancak her veri türü için aynı HTML elemanı kullanılmaz. Bu yazıda input, textarea ve select elementlerinin farklarını ve kullanım yerlerini karşılaştırıyoruz.

1. <input> Etiketi

<input> etiketi, kısa ve tek satırlık veri girişleri için kullanılır. Türüne göre farklı davranışlar gösterir (type="text", type="email", type="number" vs.).

<input type="text" name="ad" placeholder="Adınızı girin">

• Kullanım Alanı: Ad, soyad, e-posta, telefon numarası gibi tek satırlık veriler.

2. <textarea> Etiketi

Textarea çok satırlı metin girişleri için kullanılır. Blog yorumları, açıklama kutuları gibi alanlar textarea ile oluşturulur.

<textarea name="mesaj" rows="4" cols="50"></textarea>

• Kullanım Alanı: Mesaj, açıklama, yorum gibi uzun içerikler.

3. <select> ve <option> Etiketleri

Dropdown (açılır liste) oluşturmak için kullanılır. Kullanıcıya sınırlı ve belirli seçenekler sunmak istediğinizde tercih edilir.

<select name="renk">
  <option value="kirmizi">Kırmızı</option>
  <option value="mavi">Mavi</option>
</select>

• Kullanım Alanı: Şehir listesi, renk seçimi, kategori seçimi gibi alanlar.

4. Karşılaştırma Tablosu

Sonuç:

Form tasarlarken hangi HTML elemanını kullanacağınız, kullanıcıdan alacağınız verinin türüne bağlıdır. Kullanıcı deneyimi ve form doğruluğu için doğru form elemanını seçmek önemlidir.