Tailwind CSS Academy · Ders

Devre Dışı ve Yer Tutucu Varyantları

Devre dışı form öğelerini disabled:* ile stillendirin ve yer tutucu metninin görünümünü placeholder:* varyantlarıyla özelleştirin.

3. ders / 413 adım

Devre Dışı ve Yer Tutucu Varyantları, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Form Durumlarını Stilleme

Form öğeleri yalnızca varsayılan ve odaklanmış durumların ötesinde birden fazla durumda bulunabilir. Bir girdi devre dışı olduğunda görsel olarak ayırt edilebilir görünmeli ve etkileşimin mümkün olmadığını belirtmelidir. Boş olduğunda ise yer tutucu metin, kullanıcının ne yazması gerektiğine dair ipucu verir. Tailwind, özel CSS kurallarına ihtiyaç duymadan bu belirli durumları HTML içinde bildirimsel olarak stillendirmek için disabled: ve placeholder: varyant ön eklerini sunar.

<!-- Disabled and placeholder states side by side -->
<div class="space-y-3 max-w-sm">
  <input type="text" placeholder="Type something here" class="w-full border rounded px-3 py-2 placeholder:text-gray-400" />
  <input type="text" placeholder="Read only" disabled class="w-full border rounded px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100" />
</div>

disabled: Varyantının Temelleri

disabled: varyantı, bir form öğesinde HTML disabled özniteliği bulunduğunda uygulanır. En yaygın stil deseni disabled:opacity-50 disabled:cursor-not-allowed şeklindedir — kullanılabilir olmadığını belirtmek için opaklığı azaltır ve karışıklığı önlemek üzere imleci engellendi simgesine dönüştürür. Salt okunur olduklarını vurgulayan belirgin bir arka plan rengi vermek için devre dışı girdilere disabled:bg-gray-100 da ekleyebilirsiniz.

<!-- Disabled form inputs with clear visual treatment -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    value="Active input"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
  />

  <input
    type="text"
    value="Disabled input"
    disabled
    class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400"
  />
</div>

Düğmelerde disabled:

Devre dışı düğmeler, eylemin kullanılabilir olmadığını açıkça belirtmelidir. disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none deseni; soluk görünen, izin verilmeyen imlecini gösteren ve JavaScript olsa bile tıklamalara yanıt vermeyen erişilebilir bir devre dışı düğme oluşturur. disabled:pointer-events-none eklemek, devre dışı düğmelerde üzerine gelme efektlerinin görünmesini engeller.

<!-- Enabled vs disabled button states -->
<div class="flex gap-4 flex-wrap">
  <button
    class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
  >
    Active Button
  </button>

  <button
    disabled
    class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
  >
    Disabled Button
  </button>
</div>

select ve Diğer Denetimlerde disabled:

disabled: varyantı, disabled özniteliğini taşıyabilen tüm HTML öğelerinde çalışır: girdiler, seçim kutuları, metin alanları, düğmeler, seçenek grupları ve alan kümeleri. disabled içeren bir fieldset için tüm alt form denetimleri devre dışı durumunu devralır, ancak Tailwind'in varyantı yalnızca doğrudan öğeye uygulanır — bu nedenle disabled:* yardımcı sınıflarını alt öğelere değil, alan kümesine ekleyin.

<!-- Disabled select and textarea -->
<div class="space-y-3 max-w-sm">
  <select
    disabled
    class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
  >
    <option>Select country...</option>
    <option>United States</option>
  </select>

  <textarea
    disabled
    rows="3"
    placeholder="Notes (locked)"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 resize-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
  ></textarea>
</div>

placeholder: Varyantının Temelleri

placeholder: varyantı, girdiler ve metin alanlarının içindeki yer tutucu metni stillendirir. Özelleştirme yapılmadığında yer tutucu metin, girdinin metin rengini azaltılmış opaklıkla devralır. Yaygın özelleştirmeler arasında daha açık bir gri için placeholder:text-gray-400, daha küçük yer tutucu metin için placeholder:text-sm ve ipucunu gerçek girdi içeriğinden görsel olarak ayırmak için placeholder:italic bulunur.

<!-- Customized placeholder text styles -->
<div class="space-y-3 max-w-sm">
  <!-- Default placeholder -->
  <input type="text" placeholder="Default placeholder" class="w-full border rounded px-3 py-2" />

  <!-- Styled placeholder -->
  <input
    type="text"
    placeholder="Styled placeholder"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 placeholder:text-sm placeholder:italic"
  />

  <!-- Colored placeholder for category input -->
  <input
    type="text"
    placeholder="Search products..."
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
</div>

placeholder: Varyantını Odakla Birleştirme

Özenli bir kullanıcı deneyimi deseni, girdi odaklandığında yer tutucu metnin soluklaşmasını veya değişmesini sağlamaktır; bu, yazmaya başlanabileceğine dair görsel onay verir. placeholder:text-gray-400 focus:placeholder:text-gray-300 birleşimi, odaklanıldığında yer tutucu metni biraz soluklaştırır — dikkati imlece yönlendiren zarif bir efekttir. Bazı tasarımlar, odaklanıldığında yer tutucuyu tamamen gizlemek için focus:placeholder:opacity-0 kullanır.

<!-- Placeholder fades on focus -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    placeholder="Click here — placeholder fades"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:placeholder:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
  />
</div>

Arama ve Filtrelerde placeholder:

Arama girdileri ve filtre alanları, özellikle ayrı bir etiketin çok fazla yer kaplayacağı dar arayüzlerde, çoğu zaman yer tutucu metni birincil etiket olarak kullanır. Bunları iyi kontrast için placeholder:text-gray-500 ile stillendirin ve yer tutucunun yanına bir simge eklemeyi düşünün. pl-10 placeholder:text-sm deseni, girdi içinde mutlak konumlandırılmış bir arama simgesi için yer bırakır.

<!-- Search input with icon and styled placeholder -->
<div class="relative max-w-sm">
  <!-- Search icon -->
  <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
    </svg>
  </div>
  <input
    type="search"
    placeholder="Search by name, email..."
    class="w-full border border-gray-300 rounded-xl pl-10 pr-4 py-2.5 placeholder:text-gray-400 placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  />
</div>

Girdi Olmayan Öğeler İçin Devre Dışı Stilleme

CSS :disabled sözde sınıfı teknik olarak yalnızca form öğelerine uygulanır. Devre dışı bir liste öğesi veya grileştirilmiş bir kart gibi diğer öğelerin devre dışı görünmesini istiyorsanız, kanca olarak aria-disabled kullanın ve bunu Tailwind'in aria-disabled: varyantıyla veya koşullu bir CSS sınıfıyla stillendirin. Alternatif olarak Tailwind, hassas hedefleme için [&[aria-disabled=true]]: rastgele varyant söz dizimini destekler.

<!-- Making non-form elements look disabled -->
<div class="space-y-3">
  <!-- Subscription card: disabled with aria-disabled -->
  <div
    aria-disabled="true"
    class="border border-gray-200 rounded-xl p-4 opacity-50 cursor-not-allowed select-none"
  >
    <h3 class="font-bold text-gray-500">Enterprise Plan</h3>
    <p class="text-sm text-gray-400">Contact sales to enable</p>
  </div>

  <!-- Active card for comparison -->
  <div class="border border-blue-200 rounded-xl p-4 cursor-pointer hover:border-blue-400">
    <h3 class="font-bold">Pro Plan</h3>
    <p class="text-sm text-gray-500">$29/month</p>
  </div>
</div>

Yükleniyor ve Beklemede Durumları

Form öğeleri, devre dışı durumunun yanı sıra eşzamansız bir eylem tamamlanırken bazen yükleniyor durumuna da ihtiyaç duyar. Tailwind'de yerleşik bir loading: varyantı bulunmasa da bunu koşullu sınıf uygulamayla elde edebilirsiniz. Dönen bir yükleme simgesi ve pointer-events-none opacity-75 gösteren bir düğme, eylemin sürdüğünü belirtir. Bunu bir SVG yükleme simgesinde animate-spin ile birleştirmek, durumu açıkça anlaşılır kılar.

<!-- Loading state on a submit button -->
<div class="flex gap-4">
  <!-- Loading state (simulate with always-applied classes) -->
  <button
    class="flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-lg font-medium opacity-75 pointer-events-none"
  >
    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
    </svg>
    Saving...
  </button>

  <!-- Normal state -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium">
    Save Changes
  </button>
</div>

placeholder: İçin En İyi Uygulamalar

Birkaç önemli kural: yer tutucuyu bir girdi için asla tek etiket olarak kullanmayın — yazma başladığında kaybolur ve bu, WCAG 1.3.5 (Girdi Amacını Belirleme) ilkesine aykırıdır. Yer tutucuyu görünür bir etiketin yanında tamamlayıcı ipucu metni olarak kullanın. Ayrıca yer tutucu metin genellikle normal metinden daha düşük kontrasta sahiptir; bu nedenle girdi boşken ve yer tutucu kullanıcının tek rehberiyken placeholder:text-* renginizin WCAG AA için gereken 4.5:1 kontrast oranını karşıladığını kontrol edin.

<!-- Best practice: label + placeholder as hint -->
<div class="max-w-sm space-y-4">
  <div>
    <!-- Visible label: always shown -->
    <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
    <!-- Placeholder: supplementary hint, not the only label -->
    <input
      type="text"
      placeholder="e.g. john_doe"
      class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <p class="text-xs text-gray-400 mt-1">Letters, numbers, and underscores only</p>
  </div>
</div>

Tüm Durumları İçeren Eksiksiz Form

Burada devre dışı, yer tutucu, odak ve hata durumu stillerini birlikte uygulayan eksiksiz bir giriş formu bulunmaktadır. Bu, kullanıcının karşılaşabileceği her durumu ele alan, üretim kalitesinde bir form örneğidir. Her girdide bir etiket, yer tutucu ipucu ve odak halkası bulunur; devre dışı alan ise grileştirilmiş görünür. Gönder düğmesi etkin durumdadır ve üzerine gelme ile etkin durum stillerinin uygulanmasına hazırdır.

<form class="max-w-sm space-y-4 p-6">
  <div>
    <label class="block text-sm font-medium mb-1">Email</label>
    <input type="email" placeholder="you@example.com" class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
  </div>
  <div>
    <label class="block text-sm font-medium mb-1">Account ID</label>
    <input type="text" value="ACC-12345" disabled class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed" />
    <p class="text-xs text-gray-400 mt-1">Account ID cannot be changed</p>
  </div>
  <button class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white py-2.5 rounded-lg font-semibold transition-all">
    Update Profile
  </button>
</form>

Hızlı Kontrol

Bu dersteki Tailwind CSS uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: HTML disabled özniteliği bulunduğunda disabled: form öğelerini stillendirir, placeholder: girdilerin içindeki yer tutucu metnin rengini, boyutunu ve stilini hedefler ve disabled:opacity-50, disabled:cursor-not-allowed ve disabled:pointer-events-none sınıflarının birleştirilmesi eksiksiz bir devre dışı düğme deseni oluşturur. Sırada, üst-alt öğe ve kardeş öğe etkileşimleri için güçlü group ve peer varyantlarını inceleyeceğiz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 30
Dersler: 120

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Devre Dışı ve Yer Tutucu Varyantları” dersi ücretsiz mi?

Evet — “Devre Dışı ve Yer Tutucu Varyantları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Devre Dışı ve Yer Tutucu Varyantları” dersinde ne öğreneceğim?

Devre dışı form öğelerini disabled:* ile stillendirin ve yer tutucu metninin görünümünü placeholder:* varyantlarıyla özelleştirin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Devre Dışı ve Yer Tutucu Varyantları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Tailwind CSS Academy Sayfasına Dön