Skip to main content

HTML5 Input Türleri

Giriş​

<input> elementleri, HTML5’in en karmaşık ve en güçlü elementleri arasındadır.
Burada belirleyici olan şey ise type özniteliğidir. Çünkü hangi türde bir <input> elementi kullandığın, kullanıcının veri girişi şeklini doğrudan etkiler.

Bu yüzden <input> ve type öznitelikleri, web geliştirmede kritik iki kavramdır.

Şu an için HTML5’te toplam 22 farklı input türü bulunmaktadır. Bu eğitimde hepsini tek tek inceleyeceğiz.

Standart Öznitelikler​

Farklı input türlerini tek tek ele almadan önce, her türün kabul ettiği bazı ortak öznitelikler vardır:

  • autocomplete → Girdi için otomatik tamamlama özelliğini belirtir. Genelde on olarak ayarlanır.
  • autofocus → Sayfa yüklendiğinde otomatik olarak bu input’a odaklanılıp odaklanılmayacağını belirler.
  • disabled → Input’un devre dışı bırakılıp bırakılmayacağını belirten boolean değer.
  • form → Bu input’un bağlı olduğu <form> etiketinin ID’si. Varsayılan olarak en yakın form’a bağlanır.
  • list → Önerilen değerler sunan bir <datalist> elementinin ID’si. (Henüz yaygın olarak desteklenmiyor.)
  • name → Input’un adı. Form gönderildiğinde veriler bu isim üzerinden gönderilir.
  • required → Formun gönderilebilmesi için bu alanın doldurulup doldurulması gerektiğini belirler.
  • tabindex → Kullanıcı TAB tuşuna bastığında odaklanma sırasını belirten sayı.
  • value → Input’un mevcut (varsayılan veya kullanıcı tarafından girilmiş) değeri.

Türlere özel öznitelikler ise ilgili input türünün bölümünde ayrıca açıklanacaktır.

Not: Günümüzün modern tarayıcılarında HTML5 input türlerinin çoğu iyi destekleniyor olsa da, hâlâ bazı tarayıcılar gelişmiş input türlerini desteklemeyebilir.
Bu gibi durumlarda, desteklenmeyen input türü otomatik olarak normal bir metin kutusuna (text input) düşer.

Ayrıca, birçok input türü (örneğin email) kendi içinde bir doğrulama (validation) sunsa bile, her zaman sunucu taraflı (server-side) doğrulama yapmanız tavsiye edilir.

Text​

<input type="text">

Text input şu öznitelikleri destekler:

  • maxlength → Girilebilecek maksimum karakter sayısı.
  • minlength → Geçerli kabul edilmesi için girilmesi gereken minimum karakter sayısı.
  • pattern → Değerin geçerli sayılması için eşleşmesi gereken düzenli ifade (regex).
  • placeholder → Alan boşken gösterilen örnek metin.
  • readonly → Input’un sadece okunabilir (değiştirilemez) olup olmayacağını belirler.
  • size → Input kutusunun genişliğini, karakter sayısına göre belirtir.
  • spellcheck → Yazım denetimini açıp kapatmaya yarar.

Password​

<input type="password">

text input’a benzer şekilde, password de serbest biçimde metin girişi alır.
Farkı ise güvenlik amacıyla kullanıcının yazdığı karakterleri maskeler (••••).

password tipi, text tipinin tüm ek özniteliklerini destekler;
tek farkı, spellcheck özelliğini desteklememesidir.

Hidden​

<input type="hidden">

hidden input da aslında serbest metin alanıdır, ancak kullanıcıya görünmez.

Bu tipin ekstra öznitelikleri yoktur, fakat önemli bir özelliği vardır:

  • Eğer name özniteliğini _charset_ olarak ayarlarsan, input’un değeri gönderilen formun karakter kodlaması (character encoding) olur.

Email​

<input type="email">

email input, girilen değerin e-posta formatında olup olmadığını kontrol eder.
Yani kullanıcı [email protected] gibi geçerli bir adres yazmak zorundadır.

email tipi, hem ortak öznitelikleri hem de text tipinin özniteliklerini destekler.
Buna ek olarak bir de özel bir özniteliği vardır:

Number​

<input type="number">

number input, yalnızca sayısal değer (tam sayı veya ondalıklı sayı) kabul eder.
Çoğu tarayıcıda bu input’un yanında artırma/azaltma butonları da çıkar.

Mobil tarayıcılarda ise genellikle tam klavye yerine sayı tuş takımı açılır, bu da kullanıcı deneyimini kolaylaştırır.

number tipi:

  • Ortak öznitelikleri destekler,

  • text tipinden placeholder ve readonly özniteliklerini paylaşır,

  • Ayrıca sayıya özel yeni öznitelikleri vardır:

  • min → Geçerli kabul edilecek en küçük değer.

  • max → Geçerli kabul edilecek en büyük değer.

  • step → Yukarı/aşağı ok tuşlarına basıldığında artış/azalış aralığı.

<input type="search">

search input aslında bir text input’tur, ancak ekstra olarak girilen metni tek tıkla temizlemeye yarayan bir buton barındırır.

Ekstra öznitelikleri ise normal text input ile tamamen aynıdır.

Telefon (tel)​

tel input, kullanıcıdan telefon numarası almak için tasarlanmıştır.
Ancak dikkat: tel tipi kendi başına numaranın geçerli olup olmadığını kontrol etmez.

Bunun yerine pattern özniteliğini kullanarak istediğin telefon formatına göre regex doğrulaması ekleyebilirsin.

<input type="tel">
<input type="tel" placeholder="+90 5xx xxx xx xx" pattern="^\+90\s5\d{2}\s\d{3}\s\d{2}\s\d{2}$" required>
<br><small>Format: +90(5xx) xxx xx xx</small>

tel input, text tipinin tüm standart özniteliklerini kabul eder,
ancak spellcheck bu tipte desteklenmez.

URL​

url input, kullanıcının girdiği değeri URL formatına göre kontrol eder.
Yani ya boş bırakılabilir ya da https://ornek.com gibi doğru biçimlendirilmiş mutlak bir URL olmalıdır.

Ama dikkat ⚠️: Bu tip, girilen adresin gerçekten çalışıp çalışmadığını (domain çözümleniyor mu, site açılıyor mu vs.) kontrol etmez.
Sadece girilen verinin URL biçimine uyup uymadığına bakar → protokol://domain/...

Diğer çoğu metin tabanlı input gibi, text tipinin özniteliklerini destekler fakat spellcheck özelliğini desteklemez.

<input type="url">

Checkbox​

<input type="checkbox">

checkbox, bir veya birden fazla seçeneği işaretlemek için kullanılan input tipidir.
Genellikle bir seçenek listesi şeklinde gösterilir.

Birden fazla checkbox kullanmak istiyorsan, her biri için ayrı bir type="checkbox" input tanımlaman gerekir.

Önemli not: Checkbox input’unun kendisi sadece kutucuğu gösterir. Yanında açıklama metnini sen eklemelisin.

  • checked → Kutunun işaretli olup olmadığını belirten boolean öznitelik.

Radio Button​

<input type="radio">

radio input’lar, checkbox’ların “tek seçimlik” versiyonu gibi düşünülebilir.
Birden fazla radio input aynı gruba (aynı name özniteliğine) ait olduğunda,
o grupta sadece bir tanesi seçilebilir.

  • checked → Radio butonunun seçili olup olmadığını belirten boolean öznitelik.

Range​

<input type="range">

range input, aslında number tipinin daha gelişmiş versiyonu gibidir.
Kullanıcıya doğrudan sayı girmesi yerine, kaydırmalı bir slider üzerinden değer seçmesini sağlar.

range tipi, number tipinde olduğu gibi şu öznitelikleri destekler:

  • min → En küçük değer
  • max → En büyük değer
  • step → Artış/azalış aralığı

Ayrıca ortak input özniteliklerini de kabul eder.

Color​

<input type="color">

Artık en sevdiğin framework için en iyi renk seçici eklentisini aramana gerek yok.
color input, kullanıcıya bir buton sunar.

  • Buton üzerinde seçili olan mevcut rengi gösterir.
  • Tıklandığında açılır bir renk paleti çıkar. Kullanıcı bu paletten renk seçebilir ya da doğrudan hexadecimal renk kodunu girebilir.

Ancak dikkat edeceğin noktalar şunlardır:
color tipi, diğer input türlerine kıyasla daha sınırlıdır.

  • type dışında desteklediği tek öznitelik value’dur.
  • Ortak input özniteliklerinin hiçbiri bu tip için geçerli değildir.

File​

<input type="file">

En dikkat çekici input tiplerinden biri de file input’tur.
Bu tip sayesinde kullanıcı, bilgisayarından kolayca bir veya birden fazla dosya seçebilir.
Genelde bu dosyalar daha sonra sunucuya yüklenmek için kullanılır.

Son dönemde file input’un yetenekleri genişletildi ve artık kullanıcının kamerasından fotoğraf veya video çekmesini de destekliyor.

file tipinde kullanılabilecek öznitelikler:

  • accept → Geçerli dosya türlerini belirtir (virgülle ayrılmış şekilde, uzantı veya MIME tipi).
  • capture → Görsel veya video giriş kaynağını belirtir.
    • user → Ön kamera (selfie).
    • environment → Arka kamera.
  • files → Kullanıcının seçtiği dosyaların bulunduğu <FileList>.
  • multiple → Eğer true ise, kullanıcı aynı anda birden fazla dosya seçebilir.

Button​

<input type="button">

button tipi, aslında sadece basit bir butondur.
<button> elementine çok benzer ama kendi başına hiçbir işlevi yoktur.

Bir butonun bir şey yapmasını istiyorsan:

  • Ona bir event handler (olay işleyici) bağlamalısın,
  • Ya da submit veya reset tiplerini kullanmalısın.

En önemli özniteliği:

  • value → Butonun üzerinde görünen yazıyı belirler.
    (Aynı <button>Değer</button> mantığında.)

İmage​

<input type="image">

image input, bir buton gibi davranır ama buton yerine görsel kullanmana izin verir.
Yani normal bir buton yerine resim eklemek istediğinde tercih edilir.

Temel öznitelikler:

  • alt → Alternatif metin (görsel yüklenmezse gösterilir).
  • height → Görselin piksel cinsinden yüksekliği.
  • src → Görselin kaynak (URL) adresi.
  • width → Görselin piksel cinsinden genişliği.

Form gönderme amaçlı kullanmak istersen ek öznitelikler de vardır:

  • formaction → Formun gönderileceği URL.
  • formenctype → Form verisinin kodlama biçimi (özellikle dosya gönderiminde).
  • formmethod → Kullanılacak HTTP yöntemi (GET veya POST).
  • formnovalidate → Form gönderilirken doğrulamanın atlanmasını sağlar.
  • formtarget → Gönderim sonucunun nerede açılacağını belirtir (örn. _blank).

Reset​

<input type="reset">

reset input, aslında button tipinin bir uzantısıdır.
Tıklandığında formu orijinal haline sıfırlar (tüm alanlar temizlenir veya varsayılana döner).

  • value → Butonun üzerinde görünecek yazıyı belirler.

Submit​

<input type="submit">

submit input, formu göndermek için kullanılan butondur.
Tıklandığında mevcut form, belirtilen action adresine gönderilir.

Date​

<input type="date">

date input, kullanıcıdan bir tarih girişi bekler.
Bunun yanında:

  • Yukarı/aşağı butonlarıyla tarihi değiştirmeye imkân verir,
  • Ayrıca çoğu tarayıcıda açılabilen takvim seçici (date picker) ile kolayca tarih seçilebilir.

Not: Kullanıcıya gösterilen tarih, her zaman tarayıcının/dil ayarının yerel formatında görünür.
Ama aslında değerin kendisi her zaman YYYY-AA-GG (örn: 2025-10-02) formatındadır.

Parametreler:

  • min → Geçerli kabul edilecek en erken tarih.
  • max → Geçerli kabul edilecek en geç tarih.
  • readonly → Input’un yalnızca okunabilir olup olmayacağını belirler.
  • step → Yukarı/aşağı butonlarına tıklarken tarih artış aralığını belirler.

Time​

<input type="time">

time input, kullanıcıdan saat girişi bekler.

  • Kullanıcı, yukarı/aşağı butonlarıyla saat ve dakika değerlerini artırıp azaltabilir,
  • Bazı tarayıcılarda AM/PM (öğleden önce/sonra) seçimi yapılabilir,
  • Modern tarayıcılarda ise kullanıcıya kolaylık sağlayan bir saat seçici (time picker) arayüzü çıkar.

Parametreler:

  • min → Geçerli kabul edilecek en erken saat.
  • max → Geçerli kabul edilecek en geç saat.
  • readonly → Input’un yalnızca okunabilir olup olmayacağını belirler.
  • step → Dakika/saniye artış aralığını belirler (varsayılan 60 saniyedir).

Local Date ve Time​

<input type="datetime-local">

datetime-local, aslında date ve time input’larının birleşimi gibidir.
Kullanıcıya tek bir alanda hem tarih hem saat seçtirme imkânı verir.

⚠️ Ama dikkat: Bu tip, diğerleri kadar yaygın desteklenmiyor.

Parametreler:

  • min → Geçerli kabul edilecek en erken tarih ve saat.
  • max → Geçerli kabul edilecek en geç tarih ve saat.
  • readonly → Input’un yalnızca okunabilir olup olmayacağını belirler.
  • step → Artış/azalış aralığını belirler (saniye cinsinden).

Month​

<input type="month">

month input, date tipine benzer bir arayüz sunar ancak seçim sadece yıl ve ay ile sınırlıdır.
Yani gün seçilmez, sadece YYYY-AA formatında değer girilir.

Bu tip özellikle kredi kartı son kullanma tarihleri veya doğum ayı-yılı gibi bilgiler için çok kullanışlıdır.

Parametreler:

  • min → Geçerli kabul edilecek en erken yıl-ay.
  • max → Geçerli kabul edilecek en geç yıl-ay.
  • readonly → Input’un yalnızca okunabilir olup olmayacağını belirler.
  • step → Artış/azalış aralığı (ay cinsinden).

Week​

<input type="week">

week input, month tipine benzer şekilde bir takvim seçici sunar,
fakat bu sefer seçim sadece yıl + hafta numarası şeklindedir.

Yani kullanıcı YYYY-Www formatında (örn: 2025-W10) bir değer seçer.

Parametreler:

  • min → Geçerli kabul edilecek en erken yıl-hafta.
  • max → Geçerli kabul edilecek en geç yıl-hafta.
  • readonly → Input’un yalnızca okunabilir olup olmayacağını belirler.
  • step → Artış/azalış aralığı (hafta cinsinden).

Sonuç​

<input> elementi uzun bir yol kat etti ve artık kullanıcıdan veri almak için neredeyse tam kapsamlı bir araç setine dönüştü

Yeni input türlerinin desteklenmesi hızla gelişiyor.
Her ne kadar bu yeni türlerin metin kutusuna (text input) düşmesi ideal olmasa da,
en azından oldukça zarif bir geri dönüş sağlıyor.