Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Seçim Aralıkları

önceki ders sonraki ders
Sayfa içeriği
  • › Seçim aralığın konsepti
  • › Seçim aralığı eklemek

Seçim aralığın konsepti

Seçim aralığı (range), belirli bir aralıktaki, örneğin 0'dan 100'e kadar olan sayısal değerleri seçmeye ayrılmış bir çubuktur. Bu çubuk, bir değer seçmek için hareket ettirilebilen bir düğmeye sahiptir (kaydırıcı kontrolü gibi).


Seçim aralığı eklemek

Bir seçim aralığı eklemek için <input> etiketini <input type="range"> olarak ekleyebilirsin.

<input> etikete aşağıdaki özellikleri ekleyebilirsin:

  • id: <label> etiketi ile ilişkilendirmek istiyorsan id eklemelisin.
  • name: Gönder butonuna tıklandığında içinde seçilen değerin gönderilmesi için ekliyoruz.
  • value: Temel bir değer vermek için.
  • min: Seçilebilecek en küçük değeri belirtir.
  • max: Seçilebilecek en büyük değeri belirtir.
  • step: Kaydırıldıkça değerinin ne kadar değişeceğini belirtir.
  • disabled: Inaktif görünmesini sağlamak için.

Aşağıdaki örnekte 0 ile 99 arasında değişebilen ve varsayılan değeri 18 olan bir değer aralığı gösterdim ve eğer değeri kaydırırsan 1 değeri ile değişecektir.

  • <label for="age">0 ile 99 arasında senin yaşın seç:</label>
  • <input type="range" id="age" name="Yaş" min="0" max="99" step="1" value="18">
kod dene 

Aşağıdaki örnekte 0 ile 20 arasında değişebilen ve varsayılan değeri 10 olan bir değer aralığı gösterdim. Eğer değeri kaydırırsan 4 değeri ile değişecektir.

  • <label for="ses">0 ile 20 arasında istediğin ses yüksekliği seç:</label>
  • <input type="range" id="ses" name="Ses" min="0" max="20" step="4" value="10">
kod dene 

Aşağıdaki örnekte 0 ile 100 arasında bir seçim aralığı ve varsayılan değeri 0 olan bir seçim aralığı gösterdim.
Burada aralığı "disabled" inaktif hale getiriyoruz ve bu nedenle değeri değiştirilemez.

  • <label for="ses">0 ile 100 arasında senin puanı seç:</label>
  • <input type="range" id="puan" name="puan" min="0" max="100" step="1" value="0">
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.