HTML formları, web sitelerinde kullanıcıdan veri almak için kullanılan en temel yapılardır. <input> etiketi ise formların en önemli bileşenidir. HTML5 ile birlikte gelen farklı input type seçenekleri sayesinde kullanıcı deneyimi geliştirilmiş, doğrulama (validation) süreçleri kolaylaştırılmış ve mobil uyumluluk artırılmıştır.

Bu yazıda görselde bulunan tüm input türlerini detaylı şekilde inceleyeceğiz ve ek bilgilerle içeriği genişleteceğiz.

1️⃣ <input type="text">

Ne İşe Yarar?

Kullanıcıdan kısa metin bilgisi almak için kullanılır.

Nerede Kullanılır?

• Ad soyad
• Kullanıcı adı
• Şehir bilgisi
• Başlık alanları

Nasıl Kullanılır?

<input type="text" name="fullname" placeholder="Ad Soyad">

Avantajları

• En temel input türüdür.
• Kolay özelleştirilebilir.
• maxlength, required, pattern gibi özelliklerle kontrol edilebilir.

2️⃣ <input type="email">

Ne İşe Yarar?

E-posta formatında veri girilmesini sağlar.

Neden Kullanılır?

Tarayıcı otomatik olarak e-posta doğrulaması yapar. @ ve domain kontrolü sağlar.

Örnek Kullanım

<input type="email" name="email" placeholder="ornek@mail.com" required>

Avantajları

• HTML5 doğrulama desteği
• Mobil cihazlarda e-posta klavyesi açılır

3️⃣ <input type="password">

Ne İşe Yarar?

Girilen karakterleri gizler.

Kullanım Alanları

• Giriş formları
• Üyelik sistemleri
• Admin panelleri

<input type="password" name="password">

Güvenlik Notu

Şifre güvenliği için backend tarafında hashleme yapılmalıdır.

4️⃣ <input type="number">

Ne İşe Yarar?

Sadece sayısal veri girişine izin verir.

<input type="number" name="age" min="1" max="100">

Özellikler

• min
• max
• step

Kullanım Alanı

• Yaş
• Fiyat
• Adet

5️⃣ <input type="tel">

Ne İşe Yarar?

Telefon numarası girişi için kullanılır.

<input type="tel" name="phone" placeholder="05xx xxx xx xx">

Avantaj

Mobil cihazlarda numerik klavye açılır.

6️⃣ <input type="button">

Ne İşe Yarar?

Tıklanabilir buton oluşturur ancak form göndermez.

<input type="button" value="Tıkla">

Genelde Nerede Kullanılır?

• JavaScript işlemleri için
• Özel fonksiyon çağırmak için

7️⃣ <input type="file">

Ne İşe Yarar?

Dosya yükleme alanı oluşturur.

<input type="file" name="upload">

Özellikler

• accept → Dosya türü sınırlama
• multiple → Çoklu dosya seçimi

8️⃣ <input type="color">

Ne İşe Yarar?

Renk seçici oluşturur.

<input type="color" name="color">

Kullanım Alanı

• Tema seçimi
• Tasarım araçları

9️⃣ <input type="range">

Ne İşe Yarar?

Kaydırmalı değer seçimi sağlar.

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

Kullanım Alanları

• Ses seviyesi
• Parlaklık
• Fiyat aralığı

🔟 <input type="submit">

Ne İşe Yarar?

Formu gönderir.

<input type="submit" value="Gönder">

Önemli Not

Formun action ve method özellikleri tanımlı olmalıdır.

1️⃣1️⃣ <input type="reset">

Ne İşe Yarar?

Form içeriğini sıfırlar.

<input type="reset" value="Temizle">

1️⃣2️⃣ <input type="date">

Ne İşe Yarar?

Tarih seçimi sağlar.

<input type="date" name="birthday">

Avantaj

Takvim arayüzü sunar.

1️⃣3️⃣ <input type="time">

Ne İşe Yarar?

Saat seçimi yapılmasını sağlar.

<input type="time" name="appointment">

1️⃣4️⃣ <input type="checkbox">

Ne İşe Yarar?

Birden fazla seçenek işaretlenebilir.

<input type="checkbox" name="terms"> Şartları kabul ediyorum

1️⃣5️⃣ <input type="radio">

Ne İşe Yarar?

Aynı gruptan yalnızca bir seçenek seçilebilir.

<input type="radio" name="gender" value="male"> Erkek
<input type="radio" name="gender" value="female"> Kadın

HTML5 ile Gelen Ekstra Input Türleri (Eklemeler)

Görselde olmayan ama önemli olan bazı input türleri:

• search
• url
• week
• month
• datetime-local
• hidden

Örnek:

<input type="hidden" name="token" value="123456">

Input Kullanırken Dikkat Edilmesi Gerekenler

✔ required

Zorunlu alan yapar.

✔ placeholder

Alan içi açıklama verir.

✔ pattern

Regex doğrulama yapar.

✔ readonly ve disabled

Alanı pasif yapar.

Profesyonel Form Örneği

<form action="process.php" method="post">
  <input type="text" name="name" placeholder="Adınız" required>
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <input type="date" name="date">
  <input type="submit" value="Kaydol">
</form>

Sonuç

HTML input türleri, modern web tasarımının temel taşlarından biridir. Doğru input türünü kullanmak:

• Kullanıcı deneyimini artırır
• Form doğrulamasını kolaylaştırır
• Mobil uyumluluğu geliştirir
• Güvenliği artırır

Profesyonel bir web geliştirici için input type seçimi oldukça kritiktir. Doğru seçim, hem teknik hem de kullanıcı tarafında büyük fark yaratır.