Çalıştırılabilir HTML Dokümanları: Input türleri

Q: HTML'de kaç tane input türü var?

22 tane: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url ve week. Bilinmeyen ya da eksik bir tür text gibi davranır.

Q: HTML'de varsayılan input türü nedir?

text. type değeri olmayan ya da tarayıcının bilmediği bir türe sahip bir , tek satırlık bir metin alanıdır.

Q: Telefon numaraları ya da posta kodları için type="number" kullanmalı mıyım?

Hayır. number miktarlar içindir: artırma azaltma butonları ekler ve telefon numaralarının içerdiği +, boşluk ve tireleri reddeder. Telefon numaraları için type="tel", posta kodu ve kart numarası gibi kodlar için de inputmode="numeric" ile birlikte type="text" kullan.

Q: input type date hangi biçimi kullanır?

Okur ekranda hangi biçimi görürse görsün, değer her zaman 2026-09-24 gibi YYYY-MM-DD şeklindedir. Görüntü okurun yerel ayarlarını izler; gönderilen ve script ile okunan değer izlemez.

Q: input etiketinin kapanış etiketi gerekir mi?

Hayır. boş bir elementtir: yaz. Kapanış etiketi geçersizdir, içindeki kendiliğinden kapanan eğik çizgiye ise izin verilir ama hiçbir şey yapmaz.

input etiketi ve türleri

<input> bir form alanıdır ve hangi türde olacağına type özelliği karar verir. Aynı etiket bir metin kutusu, bir kaydırıcı, bir tarih seçici ya da bir renk seçici yapar. Aşağıdaki her alanı dene ve formun ne gönderdiğini görmek için Submit'e bas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> boş bir elementtir, bu yüzden kapanış etiketi yoktur. name değeri, değerin gönderildiği anahtardır; value ise başlangıç değeridir. Eksik ya da yanlış yazılmış bir type düz bir metin alanı verir.

Tüm HTML input türleri

`type`	Ne olduğu	Notlar
`text`	Tek satır metin	Varsayılan
`password`	Nokta olarak gösterilen metin	Kendi başına şifrelenmez; HTTPS üzerinden gönder
`email`	Bir e-posta adresi	Biçimi doğrular; telefon klavyelerinde `@` tuşu
`url`	Bir web adresi	`https://` gibi bir şemayla başlamalı
`tel`	Bir telefon numarası	Mobilde telefon tuş takımı, biçim kontrolü yok
`search`	Bir arama kutusu	Çoğunlukla bir temizle butonu gösterir
`number`	Bir sayı	Artırma azaltma butonları, `min`, `max`, `step`
`range`	Bir kaydırıcı	Tasarım gereği hassas değildir; değer bir sayıdır
`date`	Bir tarih	Değer `YYYY-MM-DD`
`time`	Günün bir saati	Değer `HH:MM` (24 saat)
`datetime-local`	Tarih ve saat, saat dilimi yok	Değer `YYYY-MM-DDTHH:MM`
`month`	Bir yıl ve ay	Her tarayıcıda desteklenmez
`week`	Bir yıl ve hafta numarası	Her tarayıcıda desteklenmez
`color`	Bir renk seçici	Değer küçük harfle `#rrggbb`
`checkbox`	Açılıp kapanan bir kutu	Bkz. HTML checkbox
`radio`	Bir gruptan tek seçim	Bkz. HTML radio buton
`file`	Bir dosya seçici	`accept`, `multiple`
`hidden`	Gönderilen ama gösterilmeyen bir değer	ID'ler ve token'lar için
`submit`	Bir gönder butonu	`<button type="submit">` daha esnektir
`reset`	Bir sıfırla butonu	Nadiren iyi bir fikirdir
`button`	Kendi başına hiçbir şey yapmayan bir buton	JavaScript için
`image`	Resim olarak çizilen bir gönder butonu	Tıklama koordinatlarını da gönderir

Metin türleri ve telefon klavyeleri

email, url, tel, search ve text masaüstünde hep bir metin kutusu gibi görünür. Fark doğrulamada ve telefonlarda hangi klavyenin açıldığındadır. Bu örnekte kenarlık, tarayıcının değeri nasıl değerlendirdiğine göre yeşile ya da kırmızıya döner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example tarayıcı için geçerli bir e-postadır: yalnızca metin, @ ve bir alan adı olup olmadığına bakar, alan adında nokta olup olmadığına bakmaz. Gerçek kontrol sunucuda yapılır.
example.com geçerli bir url değildir, çünkü şeması yoktur. https://example.com geçerlidir.
tel her şeyi kabul eder. Telefon biçimleri ülkeler arasında çok fazla değişir, bu yüzden yerleşik bir kontrol yoktur; gerekirse bir pattern ekle.
inputmode="numeric", telefonlardan type="number" sorunları olmadan bir rakam klavyesi ister; posta kodları, tek kullanımlık kodlar ve kart numaraları için doğru seçim olmasının nedeni budur.

number ve range

İkisi de min, max ve step alır. number kesin değerler içindir; range ise kesin sayının daha az önemli olduğu değerler için bir kaydırıcıdır. Range kaydırıcısı sayı göstermez, bu yüzden onu bir <output> ile eşleştir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

number için step varsayılan olarak 1 olur, bu yüzden step="0.01" olmayan bir fiyat alanı form gönderildiğinde 4.99 değerini reddeder. JavaScript'te input.value her zaman bir string'dir; sayı almak için input.valueAsNumber kullan.

Tarihler ve saatler

Tarih ve saat türleri tarayıcının kendi seçicisini açar. Okurun gördüğü şey yerel ayarlarını izler (09/24/2026, 24.09.2026), ama değer her zaman aynı sabit biçimdedir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Sunucunun aldığı ve JavaScript'in okuduğu şey bu sabit biçimdir, yani "24.09.2026" ayrıştırmak zorunda kalmazsın. min ve max da aynı biçimi alır. datetime-local saat dilimi içermez: önemliyse sunucuda okurun saat dilimine göre dönüştür.

color ve file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" dosya seçiciyi resimlerle sınırlar (ve telefonlarda kamerayı sunar); accept=".pdf,.docx" gibi uzantılar da alır. Seçici için yalnızca bir ipucudur, bu yüzden dosya türünü sunucuda kontrol et. multiple birkaç dosyaya izin verir. Gerçek bir yükleme için formda ayrıca method="post" ve enctype="multipart/form-data" gerekir.

datalist ile öneriler

Bir <datalist>, bir metin alanına herhangi bir değere yine izin verirken bir öneri listesi verir. Onları list özelliğiyle bağla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Eşleşen önerileri görmek için alana "ja" yaz. Bir açılır liste (select) elementinin aksine, okur listede olmayan bir değer yazabilir.

input'larda çalışan özellikler

Özellik	Ne yapar
`name`	Değerin gönderildiği anahtar
`value`	Başlangıç değeri
`placeholder`	Alan boşken gösterilen ipucu (label değil)
`required`	Göndermeden önce doldurulmalı
`disabled`	Kullanılamaz ve gönderilmez
`readonly`	Düzenlenemez ama gönderilir
`autocomplete`	Neyin otomatik doldurulacağı: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Sayılar, aralıklar, tarihler ve saatler için sınırlar
`minlength`, `maxlength`	Metin türleri için uzunluk sınırları
`pattern`	Değerin tamamının eşleşmesi gereken bir düzenli ifade
`inputmode`	Hangi telefon klavyesinin gösterileceği: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	Bir `<datalist>` elementinin `id` değeri
`multiple`	`email` ve `file` için birden fazla değer
`accept`	`file` için dosya türleri

Sık yapılan hatalar

Telefon numaraları, posta kodları ya da kart numaraları için type="number". Bunlar miktar değildir. tel ya da inputmode="numeric" ile text kullan.
step="0.01" olmayan bir fiyat alanı. Ondalıklı değerler doğrulamadan geçemez.
placeholder değerini label olarak kullanmak. Okur yazmaya başladığı anda kaybolur.
Güvenlik için accept ya da type="email" değerine güvenmek. Bunlar kolaylıktır; sunucu yeniden kontrol eder.
Yedeği olmadan type="month" ya da type="week". Bazı tarayıcılar düz bir metin alanı gösterir.
Kapanış </input> etiketi. <input> boş bir elementtir.

Sıkça Sorulan Sorular

HTML'de kaç tane input türü var?

22 tane: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url ve week. Bilinmeyen ya da eksik bir tür text gibi davranır.

HTML'de varsayılan input türü nedir?

text. type değeri olmayan ya da tarayıcının bilmediği bir türe sahip bir <input>, tek satırlık bir metin alanıdır.

Telefon numaraları ya da posta kodları için type="number" kullanmalı mıyım?

Hayır. number miktarlar içindir: artırma azaltma butonları ekler ve telefon numaralarının içerdiği +, boşluk ve tireleri reddeder. Telefon numaraları için type="tel", posta kodu ve kart numarası gibi kodlar için de inputmode="numeric" ile birlikte type="text" kullan.

input type date hangi biçimi kullanır?

Okur ekranda hangi biçimi görürse görsün, değer her zaman 2026-09-24 gibi YYYY-MM-DD şeklindedir. Görüntü okurun yerel ayarlarını izler; gönderilen ve script ile okunan değer izlemez.

input etiketinin kapanış etiketi gerekir mi?

Hayır. <input> boş bir elementtir: <input type="text" name="city"> yaz. Kapanış </input> etiketi geçersizdir, <input /> içindeki kendiliğinden kapanan eğik çizgiye ise izin verilir ama hiçbir şey yapmaz.

İlgili kavramlar