:checked :disabled ve Form Durumu Sözde Sınıfları
Form ögelerini checked, disabled ve required gibi etkileşimli durumlarına göre biçimlendirin.
:checked :disabled ve Form Durumu Sözde Sınıfları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Form Durumu Sözde Sınıflarına Genel Bakış
CSS, HTML form öğelerinin durumlarını yansıtan sözde sınıflar sağlar. Bunlar, JavaScript olmadan yalnızca CSS ile biçimlendirilmiş form denetimleri oluşturmanıza olanak tanır.
:checked
:checked, onay kutuları ve radyo düğmeleri seçildiğinde, ayrıca seçme kutularındaki <option> öğeleri seçildiğinde uygulanır.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
Özel Onay Kutuları için :checked
:checked yöntemi: yerel giriş denetimini gizleyin ve :checked tarafından tetiklenen bitişik kardeş seçicisini kullanarak özel bir kutu biçimlendirin:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled ve :enabled
:disabled, disabled özniteliğine sahip form öğelerini seçer. :enabled, etkileşim kurulabilen öğeleri seçer.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required ve :optional
:required, required özniteliğine sahip giriş alanlarını seçer. :optional, bu özniteliğe sahip olmayan giriş alanlarını seçer.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid ve :invalid
:valid ve :invalid, tür, desen, minimum/maksimum ve zorunlu kısıtlamalarına göre tarayıcının yerleşik form doğrulama durumunu yansıtır.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid ve :user-invalid
Tarayıcı doğrulaması, kullanıcı etkileşimde bulunmadan önce bile sayfa yüklenir yüklenmez çalışır. :user-valid ve :user-invalid yalnızca kullanıcı alanla etkileşim kurduktan sonra uygulanır — bu, kullanıcı deneyimi açısından çok daha iyidir.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown, bir giriş alanı yer tutucu metnini gösterirken uygulanır; yani alan o anda boştur. Boş giriş alanlarını JavaScript olmadan algılamak için kullanın.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only ve :read-write
:read-only, readonly özniteliğine sahip giriş alanlarını seçer. :read-write, düzenlenebilir giriş alanlarını seçer.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate, ara durumdaki onay kutularına (ne seçili ne de seçili değil durumunda olan ve JavaScript ile ayarlanan kutulara) ve grupta hiçbir radyo düğmesi seçilmediğinde bu düğmelere uygulanır.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range ve :out-of-range
type="number" veya type="range" türündeki ve min/maksimum değerleri bulunan giriş alanlarında :in-range ve :out-of-range, geçerli değerin bu sınırlara göre geçerli olup olmadığını yansıtır.
<input type="number" min="1" max="10" value="15" />
Hızlı Kontrol
Form doğrulama stillerini yalnızca kullanıcı bir giriş alanıyla etkileşime geçtikten sonra uygulayan sözde sınıf hangisidir?
Özet
CSS form durumu sözde sınıfları, JavaScript olmadan yerel form doğrulamasını ve etkileşim durumunu yansıtır: :checked, :disabled, :required, :valid, :invalid ve daha fazlası. Daha iyi bir kullanıcı deneyimi için :invalid yerine :user-invalid kullanmayı tercih edin. Boş alanları algılamak için :placeholder-shown kullanın.
Sıkça Sorulan Sorular
“:checked :disabled ve Form Durumu Sözde Sınıfları” dersi ücretsiz mi?
Evet — “:checked :disabled ve Form Durumu Sözde Sınıfları” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“:checked :disabled ve Form Durumu Sözde Sınıfları” dersinde ne öğreneceğim?
Form ögelerini checked, disabled ve required gibi etkileşimli durumlarına göre biçimlendirin. 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.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te 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 4. dersidir.
“:checked :disabled ve Form Durumu Sözde Sınıfları” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her 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
- :hover :focus :active ve :visited
- :nth-child ve :nth-of-type
- :not() :is() ve :where()
- :checked :disabled ve Form Durumu Sözde Sınıfları