Bir önceki yazıda bağlantılarla ilgili sözde sınıflara baktık. Bu yazıda, formla ilgili sözde sınıflara bir göz atacağız.
Bunu yazı serisini bölümlere ayırdım. CSS Sözde Sınıflar konusu ile ilgili diğer bölümleri de aşağıdaki bağlantılarda bulabilirsiniz.
- Bağlantı Sözde Durumları
- Form Sözde Durumları
- Element Durum Seçicileri
- Diğer Sözde Durumlar
- Dil Bilimsel Durumlar
Form Sözde Durumları
Sözde sınıflar için bir başka önemli kullanım durumu da formlardır. Form öğelerinde de kullanılabilen :focus durumlarına bir göz atmıştık.
Ancak yararlanabileceğimiz birkaç tane daha var:
:disable: Element engellendiğinde:enabled: Element etkin olduğuda, varsayılan durumdur.(çok nadir kullanılır):checked: Checkbox/radio seçildiğinde:indeterminate: Checkbox/radio true yada false olmadığında:placeholder-shown: Yertutucu aktif olduğunda ve değeri olmadığında:valid: Alan geçerli olduğunda:invalid: Alan geçersiz olduğunda:in-range: Sayı alanı seçenekler aralığında olduğunda:required: Alan zorunlu olduğunda:optional: Alan isteğe bağlı olduğunda, yine çok nadiren kullanılan varsayılan bir durumdur.
:disabled & :enabled
:enabled için açıklayıcı metinde belirtildiği gibi, aynı zamanda varsayılan bir durumdur, bu nedenle sık kullanılmaz. Bunun yerine stil vermek için ana seçiciyi kullanıyoruz.
Bir form alanının ne zaman devre dışı bırakıldığını ve kullanıcının orada hiçbir şeyi değiştiremeyeceğini belirtmek için :disabled durumunu kullanabiliriz.
Diyelim ki, örneğin tüm alanları doldurana kadar devre dışı bırakılan bir düğmemiz var. Henüz kullanıcı için geçerli olmadığını göstermenin mükemmel bir yolu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> #btn1:disabled { background: lightGray; color: #aaa; cursor: not-allowed; } </style> </head> <body> <button>Buton 1 (aktif)</button> <button disabled id="btn1">Buton 2(pasif)</button> </body> </html> |
:checked & :indeterminate
:checked ve :indeterminate sözde sınıflar, onay kutularının ve radyo düğmelerinin stiline yardımcı olabilir.
Öğe açıksa, kontrol edilen sınıf tetiklenir ve ikili olmayan durumları hedeflediği için belirsizdir.
Bu ne anlama geliyor? Bir onay kutusu sağda açık/kapalı olabilir, ancak ikisinin de olamayacağı nadir durumlar vardır. İşte tam da bu noktada belirsiz(indeterminate ) devreye giriyor. JavaScript ile yapılan bu durumu örnek olarak gösteriyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> input[type='checkbox']:checked { box-shadow: 0 0 0 3px #FD5B03; } </style> </head> <body> <input type="checkbox" class="secim" checked>Yüzme<br> <input type="checkbox" class="secim" >Koşu<br> </body> </html> |
:placeholder-shown
Hangi alanların yer tutucularının gösterildiğini belirtmek için kullanılabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { box-sizing: border-box; border: 2px dashed red; } </style> </head> <body> Ad: <input type="text" placeholder="Adınızı girin"><br> Soyad: <input type="text"><br> </body> </html> |
Çıktı:
:valid, :invalid, & :in-range
Bunlar doğrulama sınıflarıdır ve geçerli olmayan bir alanı göstermek için kullanılabilir.
Bir e-posta alanı kullanalım. Hem geçersiz hem de geçerli durumları sergilemek en kolay yoldur.
Aşağıdaki gibi doğrulama durumuna göre kırmızı/yeşil bir kenarlık ve gölge ekleyebiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> input:invalid { border: 2px solid red; box-shadow: 0 0 2px red; outline: red; } input:valid { border: 2px solid green; box-shadow: 0 0 2px green; outline: green; } </style> </head> <body> Ad: <input type="text" ><br> Eposta: <input type="email"><br> </body> </html> |
E-posta ve e-posta olmayan bir değer ekleyerek yukarıdaki kodu çalıştırabilirsiniz.
:in-range
Aralık içi olan bu ikisiyle uyumludur ve doğru aralıkta olup olmadıklarını belirlemek için sayı alanları için kullanılabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> input:in-range { border: 2px solid green; box-shadow: 0 0 2px green; outline: green; } </style> </head> <body> Sayı: <input type="number" min=10 max=30 value=25 ><br> </body> </html> |
:required & :optional
Bu, bir alanın gerekli olup olmadığını belirlemek için kullanılabilir. İsteğe bağlı durum, varsayılan durumdur, dolayısıyla bunu açıkça belirtmek gereksizdir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> input:required { background: orange; } </style> </head> <body> Sayı: <input type="number" required ><br> </body> </html> |
Bu, tüm gerekli alanlara turuncu bir arka plan verecektir.
3 Yorum