CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Range ve color

HTML kursu · İleri seviye · Ders 21/56

<input type="range"> ve <input type="color"> kullanırsın.

Range kaydırıcısı

<input type="range"> bir kaydırıcı (slider) gösterir. Kullanıcı bir değer aralığında seçim yapar. min, max ve step öznitelikleriyle sınırları belirlersin.

Örnek: <input type="range" min="0" max="100" value="50">. Bu, 0 ile 100 arasında bir ses seviyesi kaydırıcısıdır; başlangıç değeri 50 olur.

value kaydırıcının başlangıç konumunu belirler. Kullanıcı kaydırıcıyı sürükledikçe değer değişir.

Color renk seçici

<input type="color"> bir renk seçici gösterir. Kullanıcı tıkladığında işletim sisteminin renk penceresi açılır.

Değer her zaman altı basamaklı onaltılık (hex) biçimdedir: #rrggbb. Örnek: <input type="color" value="#3366cc">. Varsayılan değer #000000 (siyah) olur.

Renk seçici, kullanıcıdan belirli bir biçimde renk girmesini istememek için kullanışlıdır; tarayıcı her zaman geçerli bir hex değeri üretir.

Uygulama Ses kaydırıcısı ve tema rengi yaz

Body içine bir <form> ekle. Form içine iki etiketli input koy: ses seviyesi için <input type="range" id="volume" min="0" max="100"> ve tema rengi için <input type="color" id="theme">. Her birine bir <label for="..."> eşle.

Örnek çözümü göster 
<body>
  <form>
    <label for="volume">Ses seviyesi</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
    <label for="theme">Tema rengi</label>
    <input type="color" id="theme" name="theme" value="#3366cc">
  </form>
</body>

Kendini test et

  1. Bir ses seviyesi kaydırıcısı için hangi input türü kullanılır?

    • number
    • text
    • color
    • range
    Cevabı göster

    range — Doğru. type="range" bir kaydırıcı üretir.

  2. Range input'unun üst sınırını tamamla

    <input type="range" min="0" max="____" value="50">
    Cevabı göster 
    <input type="range" min="0" max="100" value="50">

  3. Input türünü kullanıma eşleştir

    range
    Ses kaydırıcısı
    color
    Tema rengi
    email
    E-posta adresi
    number
    Yaş

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi