HTML input Türleri Rehberi: Tüm type Değerleri ve Ortak Öznitelikler

input boş bir öğedir

<input> içerik almayan boş (void) bir öğedir: başlangıç etiketi zorunludur, bitiş etiketi yazılmamalıdır. </input> eklemek hatadır. Bu yazıdaki örnekler MDN örnekleri gibi /> ile biten yazımı kullanır. Öğe, ifade içeriği (phrasing content) kabul eden her öğenin içine konabilir; yani bir paragrafın, bir <label> öğesinin ya da bir tablo hücresinin içinde durabilir.

MDN bu öğeyi HTML içindeki en güçlü ve en karmaşık öğelerden biri olarak tanımlar. Bunun nedeni, bütün türlerin aynı HTMLInputElement arayüzünü paylaşması ve bu yüzden teknik olarak aynı öznitelik kümesine sahip olmasıdır. Pratikte ise çoğu öznitelik yalnızca bazı türlerde işe yarar; örneğin maxlength metin türlerinde, min ve max sayı ve tarih türlerinde anlam taşır.

Tüm input türleri

Tablodaki türlerin ayrıntılı yazıları: password ve autocomplete, number ve range, date, time ve datetime-local, checkbox ve radio, input file ve button ve gönder düğmeleri. MDN ayrıca datetime türünü eski (obsolete) değerler arasında listeler; yerine datetime-local kullanılır.

Kısaca değinmek gerekirse color türü, destekleyen tarayıcılarda bir renk seçici açar. MDN sayfası bu tür için alpha (opaklık seçimi) ve colorspace (limited-srgb varsayılan, display-p3) özniteliklerini de listeler; bu iki öznitelik için tarayıcı desteği için MDN uyumluluk tablosuna bakın.

Bütün türlerde ortak öznitelikler

Aşağıdaki öznitelikler hemen her türde aynı şekilde çalışır ve bir formun temel davranışını belirler:

• name: gönderimde değerle birlikte giden addır. MDN bunu zorunlu saymanızı ister; adı olmayan veya adı boş alan gönderilmez. isindex adı tarihsel nedenlerle yasaktır.
• value: HTML içinde yazıldığında alanın başlangıç değeridir. Sonrasında JavaScript ile value özelliği üzerinden okunur ve değiştirilir. Onay kutusu, radyo ve gizli alanlarda zorunlu gibi düşünülmelidir.
• id: belgede benzersiz olmalıdır ve <label for> ile eşleşmek için kullanılır.
• disabled: alan etkileşime kapanır, click olayı almaz ve gönderilmez.
• readonly: kullanıcı değeri değiştiremez ama alan odaklanabilir ve değeri gönderilir. Metin, sayı ve tarih türlerinde geçerlidir.
• required: form gönderilmeden önce alanın doldurulmasını şart koşar; gizli alan, range, color ve düğmelerde geçerli değildir.
• form: alanı, içinde bulunmadığı başka bir forma bağlar (form etiketi yazısı).
• autofocus: sayfa yüklenince alanı odaklar. Belgede yalnızca bir öğe taşımalıdır; birden fazla varsa ilki odak alır. Gizli alanlarda kullanılamaz.
• list: bir <datalist> öğesinin id değerini alır ve öneri listesi bağlar. Gizli alan, parola, onay kutusu, radyo, dosya ve düğmelerde desteklenmez.

MDN, autofocus konusunda ayrıca uyarır: otomatik odak, ekran okuyucu kullanıcılarını uyarmadan alana "ışınlar", sayfanın kaymasına ve dokunmatik cihazlarda klavyenin açılmasına yol açabilir. Kullanıcının alandan önceki içeriği kaçırmasına neden olduğu için dikkatli kullanılmalıdır. Aynı şekilde tabindex form denetimlerinde önerilmez; gizli alan dışındaki bütün input türleri zaten odaklanabilir (tabindex yazısı).

inputmode global özniteliği ise sanal klavyenin düzenini ipucu olarak bildirir; none, text, tel, url, email, numeric, decimal ve search değerlerini alır. Doğru type seçildiğinde çoğu zaman buna gerek kalmaz.

text: varsayılan tek satırlık alan

type="text", daha özel bir türün bulunmadığı tek satırlık değerler için kullanılır: ad, kullanıcı adı, şehir, ürün adı gibi. Değerdeki satır sonları tarayıcı tarafından otomatik olarak kaldırılır. Doğrulama kuralı yoksa değer herhangi bir metin ya da boş dize olabilir.

<label for="kadi">Kullanıcı adı seçin</label>
<input type="text" id="kadi" name="kadi" minlength="4" maxlength="16" size="20" required />
<!-- "deniz" yazılırsa gönderilen çift: kadi=deniz -->

Metin ailesinde size ile maxlength sık karıştırılır. size yalnızca kutunun genişliğini yaklaşık karakter sayısı olarak belirler; varsayılanı 20'dir ve girilebilecek metni sınırlamaz. maxlength ve minlength ise değerin uzunluğunu UTF-16 kod birimi cinsinden sınırlar. Tarayıcılar genellikle maxlength değerinden uzun yazmaya izin vermez. Bu iki uzunluk kuralı yalnızca kullanıcı değeri değiştirdiğinde denetlenir; betikle atanan değere uygulanmaz.

readonly için de metin türlerinde ortak bir kural var: kullanıcı alanı düzenleyemez, ama değer JavaScript ile value özelliğine atanarak yine de değiştirilebilir. Salt okunur bir alanın değeri kullanıcı tarafından değiştirilemediği için required bu alanlarda hiçbir etki yapmaz; MDN readonly sayfası ikisinin birlikte yazılmasına izin verilmediğini de belirtir.

Metin türlerinde spellcheck global özniteliği de işe yarar: true yazım denetimini açar, false kapatır, boş değer varsayılan davranışı bırakır. Salt okunur ya da devre dışı alanlarda yazım denetimi yapılmaz.

email: biçimi denetlenen e-posta alanı

type="email" bir metin kutusu gibi görünür, fakat değeri otomatik olarak e-posta söz dizimine göre doğrulanır. MDN'e göre üç değer geçerli sayılır: boş dize, doğru biçimli tek bir adres ve multiple varsa virgülle ayrılmış doğru biçimli adres listesi. Doğru biçim, adresin gerçekten var olduğu anlamına gelmez; kullanici@alan biçimi bile geçer. Bu yüzden adresin doğrulanması sunucuda, örneğin bir onay e-postasıyla yapılmalıdır.

<label for="ep">E-posta adresleri (virgülle ayırın)</label>
<input type="email" id="ep" name="ep" multiple size="40" />

multiple eklendiğinde MDN'in örneklerine göre me@example.org, you@example.org geçerli, me@example.org you@example.org (virgülsüz) geçersizdir. Her adresin başındaki ve sonundaki boşluklar atılır. Burada bilinmesi gereken bir uç durum var: multiple varken sıfır adreslik liste, yani boş değer required olsa bile geçerli sayılır. Zorunlu çoklu e-posta alanında en az bir adresi ayrıca denetlemeniz gerekir.

tel: biçim dayatmayan telefon alanı

type="tel", e-posta ve URL türlerinden farklı olarak hiçbir otomatik biçim doğrulaması yapmaz; MDN bunun nedenini telefon numarası biçimlerinin dünyada çok farklı olmasıyla açıklar. İşlevsel olarak bir metin alanıdır, ama mobil tarayıcılar telefon numarası girmeye uygun bir tuş takımı gösterebilir. Bu türü desteklemeyen tarayıcılar onu düz metin alanı olarak gösterir.

<label for="telefon">Cep telefonu</label>
<p id="tel-ipucu">Biçim: 5XX XXX XX XX</p>
<input type="tel" id="telefon" name="telefon"
       pattern="5[0-9]{2} [0-9]{3} [0-9]{2} [0-9]{2}"
       aria-describedby="tel-ipucu" />

Belirli bir biçim istiyorsanız pattern ile bir düzenli ifade tanımlayın ve beklenen biçimi alanın yakınında görünür bir metinle açıklayın. MDN, desen kurallarını yalnızca title ipucuna bırakmamanızı, görünür açıklamanın erişilebilirlik için gerekli olduğunu belirtir. pattern ayrıntıları form doğrulama yazısında anlatılıyor.

url: mutlak adres alanı

type="url" değeri boşsa ya da doğru biçimli mutlak bir URL ise geçerli sayar. Biçim yeterlidir: sema://adresin-geri-kalani şeklindeki bir giriş, şema gerçekte var olmasa bile geçebilir. Göreli bir yol (örneğin /iletisim) bu türde geçersizdir. Yalnızca güvenli adresleri kabul etmek isterseniz MDN'in örneğindeki gibi bir desen eklenebilir:

<label for="site">Web siteniz (https:// ile)</label>
<input type="url" id="site" name="site"
       placeholder="https://ornek.com" pattern="https://.*" size="30" />

search: arama kutusu

type="search" işlevsel olarak text ile aynıdır; fark tarayıcının onu nasıl sunduğundadır. Bazı tarayıcılar alanı temizleyen bir çarpı simgesi gösterir, bazıları daha önce yazılan aramaları öneri olarak sunar ve satır sonları değerden otomatik kaldırılır. Arama alanlarına en sık verilen ad q olur; zorunlu değildir, ama name yazılmazsa hiçbir şey gönderilmez.

MDN, görsel tasarımda arama kutularına çoğu zaman etiket konmadığını ve bunun ekran okuyucu kullanıcılarını şaşırttığını belirtir. Önerilen çözüm, arama bölümünü <search> öğesiyle sarmak (ya da forma role="search" eklemek) ve görünür etiket yoksa alana açıklayıcı bir aria-label vermektir.

<search>
  <form action="/ara">
    <input type="search" name="q" aria-label="Site içeriğinde ara" />
    <button>Ara</button>
  </form>
</search>

hidden: görünmeyen değer

type="hidden" sayfada hiç görünmez, odaklanamaz ve doğrulamaya katılmaz, ama değeri formla birlikte gönderilir. Düzenlenen kaydın kimliğini taşımak tipik kullanımdır. Değer kaynak kodda görüldüğü ve değiştirilebildiği için güvenlik amacıyla kullanılmamalıdır. Örnek ve ayrıntılar form etiketi yazısında var.

datalist ile öneri listesi

list özniteliği bir <datalist> öğesine bağlanarak metin, e-posta, URL, telefon, arama ve sayı alanlarına hazır öneriler ekler. Öneriler bir zorunluluk değildir; kullanıcı listede olmayan bir değer de yazabilir. Türle uyumsuz öneriler listeye alınmaz.

<label for="tarayici">Tarayıcınız</label>
<input type="text" id="tarayici" name="tarayici" list="tarayicilar" />
<datalist id="tarayicilar">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Safari"></option>
</datalist>

datalist ile select arasındaki farklar select ve datalist yazısında ayrıntılı karşılaştırılıyor.

placeholder etiket değildir

placeholder, alan boşken içinde görünen kısa bir örnektir; metin, arama, URL, telefon, e-posta, parola ve sayı türlerinde kullanılabilir ve satır sonu içeremez. MDN bu özniteliği mümkünse hiç kullanmamanızı, kullanırsanız etiketin yerine asla koymamanızı söyler. Ekran okuyucular yer tutucuyu varsayılan olarak okumaz, metin yazılmaya başlanınca kaybolur, düşük kontrastla gösterilir ve otomatik çeviri araçları bu özniteliği atlayabilir. Her alanın gerçek bir <label> öğesi olmalıdır (label yazısı).

Sık yapılan hatalar

• Her şeye type="text" yazmak: e-posta, URL veya telefon için doğru türü seçmek ücretsiz doğrulama ve uygun mobil klavye sağlar.
• </input> yazmak: input boş bir öğedir, bitiş etiketi geçersizdir.
• size ile uzunluğu sınırladığını sanmak: size yalnızca genişliktir; sınır için maxlength gerekir.
• email doğrulamasını adresin varlığı sanmak: tarayıcı yalnızca biçime bakar.
• Telefon için type="number" kullanmak: telefon numarası bir sayı değildir; tel türü bu iş için vardır.
• Etiketi placeholder ile değiştirmek: erişilebilirliği ve kullanılabilirliği bozar.
• Formun yerleşik bir özelliğiyle aynı name vermek: MDN, böyle bir adın formun önceden tanımlı özelliğini veya yöntemini o alana giden bir başvuruyla ezdiğini hatırlatır; submit veya action gibi adlardan kaçının.

Sık Sorulan Sorular

type yazmazsam ne olur?

Alan text türünde oluşturulur. Tarayıcının tanımadığı bir değer yazdığınızda da sonuç aynıdır, bu yüzden eski tarayıcılar yeni türleri düz metin alanı olarak gösterir.

email türü Türkçe karakterli adresleri kabul eder mi?

MDN, uluslararası alan adlarıyla e-posta doğrulaması konusunda belirtimde bilinen sorunlar olduğunu not eder. Bu tür adresler bekliyorsanız davranışı hedef tarayıcılarda deneyin ve kesin denetimi sunucuda yapın.

readonly ile disabled arasındaki fark nedir?

readonly alan odaklanabilir ve değeri gönderilir; disabled alan odak almaz ve gönderilmez. İkisi de doğrulamaya katılmaz.

Arama kutusu için text mi search mi kullanmalıyım?

Davranış neredeyse aynıdır, ama search amacı tarayıcıya ve yardımcı teknolojilere daha iyi anlatır ve bazı tarayıcılarda temizleme düğmesi gibi kolaylıklar getirir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · form etiketi · label ve fieldset · form doğrulama · tarih ve saat alanları · number ve range · checkbox ve radio