HTML formları, kullanıcıdan veri almak için web uygulamalarının temel yapı taşlarından biridir. <input> etiketi, farklı type değerleri sayesinde metin, tarih, dosya, renk, seçim ve daha birçok veri türünü toplamanıza olanak tanır. Doğru input tipini kullanmak; kullanıcı deneyimini artırır, mobil uyumluluğu iyileştirir ve tarayıcı tarafında otomatik doğrulama avantajı sağlar.

Aşağıda görselde yer alan HTML input türleri yazıya dökülmüş ve profesyonel açıklamalarla geliştirilmiştir.

HTML Input Türleri ve Açıklamaları

1. type="text"

<input type="text">

• Tek satırlık metin girişi için kullanılır.
• Ad, soyad, kullanıcı adı gibi genel metin alanlarında tercih edilir.

2. type="email"

<input type="email">

• E-posta formatını otomatik doğrular.
• Mobil cihazlarda “@” işaretli klavye açılır.
• Geçersiz e-posta formatında form gönderimini engeller.

3. type="password"

<input type="password">

• Girilen karakterleri gizler (****).
• Şifre alanları için kullanılır.

4. type="checkbox"

<input type="checkbox">

• Birden fazla seçime izin verir.
• “Kullanım koşullarını kabul ediyorum” gibi onay alanlarında kullanılır.

5. type="date"

<input type="date">

• Takvim arayüzü sunar.
• Standart tarih formatı sağlar (YYYY-MM-DD).

6. type="color"

<input type="color">

• Renk seçici arayüzü açar.
• HEX renk değeri üretir.

7. type="button"

<input type="button" value="Button">

• JavaScript ile özel işlemler tetiklemek için kullanılır.
• Formu otomatik göndermez.

8. type="range"

<input type="range" min="0" max="100">

• Kaydırmalı (slider) seçim sunar.
• Ses seviyesi, fiyat aralığı gibi değer seçimlerinde kullanılır.

9. type="radio"

<input type="radio" name="secim">

• Aynı name grubunda yalnızca bir seçim yapılabilir.
• Cinsiyet, evet/hayır gibi tek seçimli alanlarda kullanılır.

10. type="url"

<input type="url">

• URL formatını doğrular.
• https:// yapısında giriş bekler.

11. type="reset"

<input type="reset">

• Formu başlangıç değerlerine sıfırlar.

12. type="datetime-local"

<input type="datetime-local">

• Tarih ve saat seçimi sağlar.
• Saat dilimi içermez.

13. type="month"

<input type="month">

• Ay ve yıl seçimi için kullanılır.
• Örneğin: Kredi kartı son kullanma tarihi.

14. type="week"

<input type="week">

• Yılın kaçıncı haftası olduğunu seçmeye yarar.
• Planlama uygulamalarında kullanılır.

15. type="tel"

<input type="tel">

• Telefon numarası girişi içindir.
• Mobilde sayısal klavye açılır.
• Otomatik format doğrulaması yapmaz (pattern ile desteklenmelidir).

16. type="file"

<input type="file">

• Dosya yükleme alanıdır.
• accept özelliği ile dosya türü sınırlandırılabilir.

17. type="hidden"

<input type="hidden">

• Kullanıcıya görünmez.
• Arka planda veri taşımak için kullanılır (örneğin ID değerleri).

18. type="image"

<input type="image" src="submit.png">

• Resim şeklinde gönderme butonu oluşturur.
• Tıklandığında formu gönderir.

19. type="search"

<input type="search">

• Arama alanları için optimize edilmiştir.
• Bazı tarayıcılarda temizleme (X) ikonu gösterir.

20. type="number"

<input type="number" min="0" max="10">

• Sadece sayısal veri kabul eder.
• Artırma/azaltma okları içerir.

Profesyonel Kullanım İpuçları

✅ Doğru input tipini kullanın: Kullanıcı deneyimi ve veri doğruluğu artar.
✅ required özelliği ekleyin: Zorunlu alanları belirleyin.
✅ pattern kullanın: Özel format doğrulaması yapın.
✅ placeholder ile yönlendirin: Kullanıcıya örnek veri gösterin.
✅ label kullanmayı unutmayın: Erişilebilirlik (accessibility) için önemlidir.

Örnek:

<label for="email">E-posta</label>
<input type="email" id="email" required placeholder="ornek@mail.com">

Sonuç

HTML input türleri, modern web formlarının temelini oluşturur. Doğru kullanıldığında:

• Kullanıcı deneyimi artar
• Veri doğruluğu sağlanır
• Mobil uyumluluk iyileşir
• Ek JavaScript ihtiyacı azalır

Profesyonel bir form tasarımında yalnızca görsellik değil, doğru input tipleri ve semantik yapı da kritik öneme sahiptir.