HTML input number ve range: Sayı Alanı ve Kaydırıcı

type="number" ne zaman kullanılır, ne zaman kullanılmaz?

MDN'in önerisi açıktır: number türü yalnızca artırılıp azaltılan gerçek sayılar için, özellikle ok düğmeleriyle değer değiştirmenin kullanıcıya yardımcı olduğu durumlarda kullanılmalıdır. Bilet adedi, kişi sayısı, miktar, boy veya kilo bu sınıfa girer. Yalnızca rakamlardan oluşan ama aslında sayı olmayan değerler için uygun değildir. Posta kodu, kredi kartı numarası, T.C. kimlik numarası, sipariş numarası gibi değerlerde ok düğmesiyle "bir artırmak" anlamsızdır.

Bu tür değerler için MDN, type="tel" veya type="text" ile inputmode genel özniteliğini birlikte kullanmayı önerir. inputmode="numeric" mobil cihazlarda rakam klavyesi istenmesini sağlar, pattern ise karakterleri sınırlar:

<label for="posta">Posta kodu (5 rakam)</label>
<input id="posta" name="posta" type="text" inputmode="numeric"
  pattern="[0-9]{5}" autocomplete="postal-code" />

Erişilebilirlik açısından da bir neden vardır. type="number" alanın örtük ARIA rolü spinbutton olur. MDN, bu rolün gerçekten işe yaramadığı yerlerde number kullanmamayı önerir: kullanıcı başka bir şey yapmaya çalışırken değeri yanlışlıkla artırabilir ve sayı olmayan bir şey yazdığında neyi yanlış yaptığına dair açık bir geri bildirim almayabilir. ARIA rollerinin genel mantığı için ARIA yazısına bakabilirsiniz.

number alanının değeri ve doğrulaması

Bir sayı alanı boşken ve içinde tek bir sayı varken geçerlidir; diğer her durumda geçersizdir. required eklerseniz boş değer de geçersiz olur. MDN'e göre geçerli bir değer, HTML'in tanımladığı biçimde geçerli bir kayan noktalı sayı olmalıdır; NaN veya Infinity kabul edilmez. Sayıya çevrilemeyen giriş badInput durumunu üretir.

MDN'in bir uyarısı da önemlidir: mantıken sayı alanına rakam dışında karakter yazılamaması gerekir, ama bazı tarayıcılar geçersiz karakterlere izin verir, bazıları vermez. Bu yüzden kullanıcının bir harf yazabileceğini ve alanın geçersiz duruma düşebileceğini hesaba katın. Ayrıca bazı türlerde kabul edilen biçim yerel ayara bağlıdır: MDN'in örneğine göre bir yerel ayarda 1,000.00, başka birinde 1.000,00 geçerli yazımdır. Ondalık ayırıcısı virgül olan kullanıcılarınız varsa formu kendi dilinizde test edin.

Ok düğmeleri ve mobil klavye

MDN'e göre tarayıcı, sayı alanında değeri fareyle veya dokunarak artırıp azaltmaya yarayan ok düğmeleri göstermeyi seçebilir; bu bir zorunluluk değil, tarayıcının tercihidir. Mobil tarayıcılar ise kullanıcı alana dokunduğunda sayı girmeye daha uygun özel bir klavye açarak yardımcı olur. Ok düğmeleri step değerine göre hareket eder ve adım tabanından başlayarak yalnızca geçerli değerler üretir. Sayı türünü desteklemeyen bir tarayıcıda ise alan type="text" gibi davranır; bu durumda doğrulamanın sunucuda yapılması daha da önem kazanır.

step ve ondalık sayılar

Sayı alanlarında yeni başlayanların en sık takıldığı nokta adım kuralıdır. Varsayılan step değeri 1'dir; yani belirtmezseniz yalnızca tam sayılar geçerlidir. "1.1" yazan kullanıcı geçersiz bir alanla karşılaşır. "1.0" ise sayısal olarak 1'e eşit olduğu için geçerlidir. Kesirli değer istiyorsanız bunu step ile açıkça söylemelisiniz:

<label for="tutar">Tutar (0 ile 10 arası, en fazla iki ondalık)</label>
<input id="tutar" name="tutar" type="number" min="0" max="10" step="0.01" />

<label for="olcum">Ölçüm (istenen kadar ondalık)</label>
<input id="olcum" name="olcum" type="number" step="any" />

İlk alanda MDN'in örneğine göre 9.52 geçerli, 9.521 geçersizdir. İkinci alanda step="any" adım denetimini tamamen kapatır. Adımın bir de başlangıç noktası vardır: min varsa odur, yoksa value, ikisi de yoksa 0. Geçerli değerler bu başlangıçtan tam adım uzaklığındaki değerlerdir. Bu kural beklenmedik sonuçlar doğurabilir:

• min="7.2" verip step yazmazsanız adım 1 olur ve geçerli değerler 7.2, 8.2, 9.2 şeklinde ilerler. MDN'in örneğindeki gibi value="8" geçersizdir.
• min="1.2" step="2" ile geçerli değerler 1.2, 3.2, 5.2, 7.2 diye gider; ok düğmeleri de bu değerleri üretir.
• min="10" step="2" ile 10 ve üzerindeki çift tam sayılar geçerlidir.
• 4.2 değerinin geçerli olması için ya step değeri any, 0.1 veya 0.2 olmalı ya da min .2 ile biten bir sayı olmalıdır.

Kullanıcı adıma uymayan bir değer girdiğinde MDN'e göre tarayıcı değeri en yakın geçerli değere yuvarlayabilir ve eşit uzaklıkta iki değer varsa artı yönündekini seçer. Yuvarlanmazsa alan stepMismatch hatasıyla geçersiz kalır. Bu hata türlerinin tamamı form doğrulama yazısında.

min ve max: ok düğmeleri ile elle giriş farkı

min ve max verildiğinde ok düğmeleri değeri bu sınırların dışına taşımaz. Ancak MDN, kullanıcının sınır dışındaki bir sayıyı elle yazabileceğini, bu durumda alanın geçersiz sayılacağını belirtir. Yani sınırlar giriş engeli değil, doğrulama kuralıdır. min değeri max değerinden büyük olmamalıdır. Geçerli bir sayıya çevrilemeyen min veya max yok sayılır.

<form action="/sepet" method="post">
  <label for="balon">Balon adedi (0 ile 100 arası, onar onar)</label>
  <input id="balon" name="balon" type="number" min="0" max="100" step="10" required />
  <button type="submit">Sepete ekle</button>
</form>

Bu formda boş değer, 0'ın altı, 100'ün üstü, 10'un katı olmayan sayı ve sayı olmayan giriş ayrı ayrı hata üretir; MDN örneğinde tarayıcının her biri için farklı mesaj gösterdiği anlatılır. Değeri betikle değiştirmek için stepUp() ve stepDown() metotları vardır; MDN'e göre varsayılan olarak bir birim, argüman verilirse o kadar birim ilerler veya geri gider.

placeholder ve datalist ile ipucu vermek

placeholder, alan boşken içinde görünen kısa bir ipucudur; değer girilince kaybolur. MDN, bu özniteliğin bir etiketin yerini tutmadığını ve mümkünse hiç kullanılmamasını önerir. Beklenen biçimi etiketin içinde veya yanında yazmak daha güvenlidir. Etiketleme kuralları için label ve fieldset yazısına bakın.

list özniteliğiyle bir <datalist> bağlarsanız tarayıcı önerilen sayıları gösterebilir. Bunlar zorunlu değildir; kullanıcı listede olmayan bir değer de yazabilir. Türle uyumsuz öneriler listeden çıkarılır.

<label for="adet">Kaç adet?</label>
<input id="adet" name="adet" type="number" min="1" list="adet-onerileri" />
<datalist id="adet-onerileri">
  <option value="1"></option>
  <option value="5"></option>
  <option value="10"></option>
</datalist>

type="range": kaydırıcı

range türü, değerin kesin sayısından çok iki uç arasındaki konumun önemli olduğu durumlar içindir. MDN'in verdiği örnekler ses ve denge kontrolleri, renk kanalı veya parlaklık ayarı, oyunlarda zorluk veya görüş mesafesi ve şifre yöneticisindeki üretilen şifre uzunluğudur. Kural şudur: kullanıcı "sesi yarıya getir" gibi düşünüyorsa kaydırıcı uygundur; "sesi 0,5 yap" gibi kesin bir değer gerekiyorsa sayı alanı daha doğrudur.

Kaydırıcının değer kuralları sayı alanından farklıdır:

• Değer hiçbir zaman boş olmaz. value vermezseniz varsayılan değer min ile max arasının tam ortasıdır. max, min değerinden küçükse varsayılan değer min olur.
• Varsayılan sınırlar 0 ve 100, varsayılan adım 1'dir. Sınırlar herhangi bir kayan noktalı sayı olabilir; örneğin min="-10" max="10".
• Değer sınırlara kıstırılır. min altında bir değer atanırsa değer min olur, max üstünde bir değer atanırsa max olur.
• Eşit veya ters sınırlarda etkileşim yoktur. min ile max eşitse veya max daha küçükse kullanıcı kaydırıcıyı oynatamaz.
• Çok sayıda öznitelik yok sayılır. MDN'e göre required, readonly, placeholder, pattern, minlength, maxlength, multiple, size ve form* öznitelikleri range üzerinde etkisizdir.

Kaydırıcının örtük ARIA rolü slider'dır. value özelliği her zaman bir dize döndürür; sayı olarak almak için valueAsNumber kullanılır.

<label for="ses">Ses düzeyi</label>
<input type="range" id="ses" name="ses" min="0" max="11" />

<label for="parlaklik">Parlaklık</label>
<input type="range" id="parlaklik" name="parlaklik" min="0" max="100" value="90" step="10" />

İlk kaydırıcıda value olmadığı için başlangıç değeri 0 ile 11'in ortasıdır. Kesirli bir değere izin vermek için adımı küçültün: min="5" max="10" step="0.5" yarımşar adımlarla ilerler, step="any" ise ondalık basamak sınırı koymaz.

datalist ile işaret çizgileri

Kaydırıcıya list özniteliğiyle bir <datalist> bağladığınızda, her <option> değerinin bulunduğu noktada bir işaret çizgisi çizilebilir. Aynı listeyi birden fazla kaydırıcıda yeniden kullanabilirsiniz. Seçeneklere label özniteliği de verebilirsiniz, ama MDN'e göre bu etiketler varsayılan olarak ekranda görünmez; göstermek ve konumlamak CSS ile yapılır. Etiketleri her kaydırıcıda farklı göstermek istiyorsanız her biri için ayrı bir datalist gerekir.

<label for="sicaklik">Rahat bir sıcaklık seçin</label>
<input type="range" id="sicaklik" name="sicaklik" list="isaretler" />

<datalist id="isaretler">
  <option value="0" label="çok soğuk"></option>
  <option value="25" label="serin"></option>
  <option value="50" label="ılık"></option>
  <option value="75" label="sıcak"></option>
  <option value="100" label="çok sıcak"></option>
</datalist>

Kaydırıcının seçili değerini sayı olarak göstermek isterseniz bunun için tasarlanmış <output> öğesini kullanabilirsiniz; değeri güncellemek kısa bir betik gerektirir. Ayrıntılar progress, meter ve output yazısında. Kaydırıcıyı dikey göstermek bir görünüm meselesidir ve CSS'teki writing-mode özelliğiyle yapılır; MDN'in andığı orient özniteliği standart dışıdır.

number ile range karşılaştırması

Uygulamalı mini örnek: boy ve hedef tempo

Aşağıdaki form iki türü yan yana kullanır. Boy metre cinsinden iki ondalıkla girilir; MDN'in boy örneğinde olduğu gibi step="0.01" olmadan 1.78 gibi bir değer geçersiz sayılırdı. Haftalık antrenman yoğunluğu ise kesin bir sayı gerektirmediği için kaydırıcıyla seçilir ve işaret çizgileri üç düzeyi gösterir.

<form action="/profil" method="post">
  <p>
    <label for="boy">Boyunuz (metre, örnek: 1.78)</label>
    <input id="boy" name="boy" type="number" min="0.5" max="2.5" step="0.01" required />
  </p>
  <p>
    <label for="yogunluk">Antrenman yoğunluğu</label>
    <input id="yogunluk" name="yogunluk" type="range" min="1" max="3" value="2" list="duzeyler" />
    <datalist id="duzeyler">
      <option value="1" label="hafif"></option>
      <option value="2" label="orta"></option>
      <option value="3" label="yoğun"></option>
    </datalist>
  </p>
  <button type="submit">Kaydet</button>
</form>

Burada min="0.5" adım başlangıcı olduğu için geçerli değerler 0.50, 0.51, 0.52 diye ilerler; 1.78 bu dizinin bir üyesidir. Kaydırıcıda required yazmadık, çünkü bu tür her zaman bir değer taşır.

Sık yapılan hatalar

• Kimlik, posta kodu veya kart numarası için type="number" kullanmak. Bunlar sayı değildir; type="text" ve inputmode="numeric" tercih edin.
• Ondalık değer için step vermemek. Varsayılan adım 1 olduğundan fiyat, boy veya kilo gibi kesirli değerler geçersiz olur.
• Kesirli min değerinin adım tabanını değiştirdiğini unutmak. step yazılmamış bir alanda min="0.5" verirseniz geçerli değerler 0.5, 1.5, 2.5 olur ve tam sayılar adıma oturmaz.
• min ve max değerlerini giriş engeli sanmak. Kullanıcı sınır dışı değeri yazabilir; alan yalnızca geçersiz olur. Sunucuda yeniden kontrol edin.
• Sayı alanına pattern eklemek. Bu öznitelik number türünde çalışmaz.
• Kaydırıcıya required veya readonly yazmak. İkisi de range üzerinde yok sayılır.
• Kesin değer gereken yerde kaydırıcı kullanmak. Kaydırıcı hassas değildir; kesin sayı için number kullanın.

Sık Sorulan Sorular

Sayı alanı neden 1.5 değerini kabul etmiyor?

Varsayılan step 1 olduğu için yalnızca tam sayılar geçerlidir. step="0.1", step="0.01" veya step="any" ekleyin.

Sayı alanında basamak sayısını nasıl sınırlarım?

maxlength ve pattern bu türde çalışmaz. Değer aralığını min ve max ile verin; örneğin dört basamaklı pozitif tam sayı için min="1000" max="9999".

Kaydırıcının seçili değerini nasıl gösteririm?

HTML tek başına değeri yazdırmaz. Yanına bir <output> öğesi koyup input olayında içeriğini kısa bir betikle güncelleyebilirsiniz.

Kaydırıcının başlangıç değeri neden ortada?

value vermediğinizde MDN'in tanımladığı varsayılan, min ile max arasının ortasıdır. Başka bir başlangıç için value yazın.

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 · HTML form doğrulama · input türleri · progress, meter ve output · select ve datalist · tarih ve saat alanları