Onay kutusu - bu nedir? Onay kutularını ve radyo düğmelerini saf CSS kullanarak şekillendirmek eski tarayıcılar için kullanışlıdır Onay kutularını avatarlarla birleştirmek ne anlama gelir?
Tasarımın gerektirdiği gibi onay kutularını ve radyo düğmelerini tasarlamak için bugün bir JavaScript çözümü (eklenti gibi) kullanmanıza gerek yok, çünkü bunun için yalnızca CSS'yi kullanabilirsiniz ve eski tarayıcılar için de bir değişiklikle () Mevcut CSS kurallarını desteklemeyen Skoda kullanılabilirliği için değil.
Başka bir deyişle - içinde mevcut tarayıcılar onay kutuları ve radyo düğmeleri, tasarımın amaçladığı şeyle tutarlı olarak güzel görünecek ve eski olanlarda (ki bunlar ulaşamayacak) İnternet Explorer sürüm 8 ve altı) Cildin özel çalışma sistemine özgü "yıkama" prosedürleri nedeniyle koku kaybolacaktır.
Ek olarak, HTML5 doğrulama olasılığı korunur stilize edilebilir öğeler (JavaScript eklentilerinin kullanımında durum böyle olmayabilir). Günümüzün tarayıcılarında bu destek uzun zamandır norm haline gelmiştir.
Önemli özellikler
Her şey yolunda gittiğinde, saygılı bir şekilde ayağa kalkın:
- Krem, vasne, güzelce tasarlamak istediğimiz unsurun etiketi ( ya da başka ), Etikete ihtiyaç var
- etiket etikete atlamaktan suçlu
"Odaklanma" sözde seçicilerin seçiminde yatmaktadır: işaretli ve: değil. Bu durumda, onay kutusu veya radyo düğmesinin kendisi görünmez hale gelir ve bunların simülasyonu, etiket için sözde öğelerin yardımıyla gerçekleşir: before ve: after
Mevcut tarayıcılar için stil oluşturma
Stilize edilmiş form öğesini yeniden şekillendirme seçeneğine bir göz atalım. Bunlardan hangisinin en yararlı olduğu size kalmış. Bunun özü değişmez.
Onay kutusu etiketleri ve radyo düğmeleri etiketin önünde bulunur
HTML kodunda Bu yaklaşan siparişe benziyor:
Bir kez daha saygınızı onurlandırmak istiyorum - etiket obov'yazkovo suçlu buti roztashovany önce etiket
Onay kutusu için CSS koduşöyle olacak:
Onay kutusu (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10 piksel 0 0 20 piksel;) .onay kutusu + etiket (konum: göreceli; dolgu: 0 0 0 60 piksel; imleç: işaretçi;).onay kutusu + etiket : önce (içerik: ""; konum: mutlak; üst: -4 piksel; sol: 0; genişlik: 50 piksel; yükseklik: 26 piksel; kenarlık yarıçapı: 13 piksel; arka plan: #CDD1DA; kutu gölgesi: iç metin 0 2px 3px rgba ( 0,0,0, .2); geçiş: .2s;).onay kutusu + etiket: sonra (içerik: ""; konum: mutlak; üst: -2 piksel; sol: 2 piksel; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık -yarıçap: 10px; arka plan: #FFF; kutu gölgesi: 0 2px 5px rgba (0,0,0, .3); geçiş: .2s;).onay kutusu: işaretlendi + etiket: önce (arka plan: #9FD468;) .checkbox: işaretlendi + etiket: sonra (sol: 26px;) .checkbox: odak + etiket: önce (kutu-gölge: iç metin 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba (255,255) , 0, 0,7);)
Radyo düğmesi için CSS koduşöyle olacak:
Radyo (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10px 0 0 7px;).radyo + etiket (konum: göreceli; dolgu: 0 0 0 35px; imleç: işaretçi;).radyo + etiket :önce(içerik: ""; konum: mutlak; üst: -3 piksel; sol: 0; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık: 1 piksel katı #CDD1DA; kenar yarıçapı: %50; arka plan: #FFF;). radyo + etiket: sonra (içerik: ""; konum: mutlak; üst: 1 piksel; sol: 4 piksel; genişlik: 16 piksel; yükseklik: 16 piksel; kenarlık yarıçapı: %50; arka plan: #9FD468; kutu gölgesi: ek 0 1 piksel 1px rgba (0,0,0, .5); opaklık: 0; geçiş: .2s;).radyo: işaretli + etiket: sonra (opaklık: 1;).radyo: odak + etiket: önce (kutu gölgesi: 0 0 0 3px rgba (255,255,0, .7);)
Class.checkbox ve.radio için konum, z-endeksi ve opaklığın ek gücü için, görsel olarak orijinal öğeler istiyoruz; bu durumda koku, stilize öğelerin olacağı yerde kaybolur. Ve ek kenar boşluğundan sonra, HTML5 doğrulama bilgilerinin uyumlu görünmesi için bunları biraz değiştiriyoruz. Onay kutusunun ve radyo düğmesinin tasarımına bağlı olarak bu erişim özelleştirilebilir.
Onay kutusu etiketleri ve radyo düğmeleri, etiketin ortasında bulunur
HTML Kodu Bu durumda adım atacağız:
Önceki sürümle benzetme için - etiketi obov'yazkovo suçlu buti roztashovany önce class.checkbox__text i.radio__text içeren etiketler.
Onay kutusu için CSS koduşöyle olacak:
Onay kutusu girişi (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10 piksel 0 0 20 piksel;) .checkbox__text (konum: göreceli; dolgu: 0 0 0 60 piksel; imleç: işaretçi;).checkbox__text: önce ( içerik: ""; konum: mutlak; üst: -4 piksel; sol: 0; genişlik: 50 piksel; yükseklik: 26 piksel; kenarlık yarıçapı: 13 piksel; arka plan: #CDD1DA; kutu gölgesi: iç metin 0 2px 3px rgba (0,0) , 0, .2); geçiş: .2s;) .checkbox__text: sonra (içerik: ""; konum: mutlak; üst: -2 piksel; sol: 2 piksel; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık yarıçapı: 10 piksel; arka plan: #FFF; box-shadow: 0 2px 5px rgba (0,0,0, .3); geçiş: .2s;).onay kutusu girişi: işaretlendi + .checkbox__text: önce (arka plan: #9FD468;).onay kutusu girişi : işaretlendi + .checkbox__text: sonra (sol: 26px;).checkbox girişi: odak + .checkbox__text: önce (kutu gölgesi: iç metin 0 2px 3px rgba (0,0,0, .2), 0 0 0 3px rgba ( 255,255,0, 0,7);)
Radyo düğmesi için CSS koduşöyle olacak:
Radyo girişi (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10px 0 0 7px;).radio__text (konum: göreceli; dolgu: 0 0 0 35px; imleç: işaretçi;).radio__text: önce ( içerik: ""; konum: mutlak; üst: -3 piksel; sol: 0; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık: 1 piksel katı #CDD1DA; kenar yarıçapı: %50; arka plan: #FFF;) .radio__text: sonra (içerik: ""; konum: mutlak; üst: 1 piksel; sol: 4 piksel; genişlik: 16 piksel; yükseklik: 16 piksel; kenarlık yarıçapı: %50; arka plan: #9FD468; kutu gölgesi: ek 0 1 piksel 1 piksel rgba (0, 0,0, .5); opaklık: 0; geçiş: .2s;).radyo girişi: işaretlendi + .radio__text: sonra (opaklık: 1;).radyo girişi: odak + .radio__text: önce (kutu-gölge: 0) 0 0 3px rgba (255,255,0, .7);)
Buradaki stiller önceki yöntemdekiyle aynıdır, yalnızca diğer seçiciler için aynıdır.
Eski tarayıcılar için stil oluşturma
Onay kutusu için CSS kodu. Koddan önceki yorumlara tarayıcılar için bir açıklama ekledim:
/ * Öncelikle IE8 ve daha eski sürümlere yönelik stilleri vurgulayacağız, ardından standart onay kutusunu biraz geliştireceğiz. * / .Checkbox (dikey hizalama: üst; genişlik: 17 piksel; yükseklik: 17 piksel; kenar boşluğu: 0 3 piksel 0 0;) / * Bu, artı seçicilerini desteklemeyen eski tarayıcılar da dahil olmak üzere tüm tarayıcılar içindir. Etiketin tıklanabilir olduğunu gösteriyoruz. * / .Checkbox + label (imleç: işaretçi;) / * Aşağıda mevcut tarayıcıların yanı sıra IE9 ve üzeri tarayıcılarda da onay kutusunun nasıl tasarlanacağı açıklanmaktadır. Eski tarayıcıların seçicileri desteklememesi nedeniyle: not ve: işaretli, tüm alt düzey stilleri uygulamazlar. Bu tipte, önünde çift kutucuk olmadan işaretli giriliyor, yani öyle sanırım. * / .Onay kutusu: değil (işaretli) (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10px 0 0 20px;).onay kutusu: değil (işaretli) + etiket (konum: göreceli; dolgu: 0 0 0 60 piksel;). Onay kutusu: değil (işaretli) + etiket: önce (içerik: ""; konum: mutlak; üst: -4 piksel; sol: 0; genişlik: 50 piksel; yükseklik: 26 piksel; kenarlık yarıçapı: 13 piksel; arka plan : # CDD1DA; kutu gölgesi: iç metin 0 2px 3px rgba (0,0,0, .2); geçiş: .2s;).onay kutusu: değil (işaretli) + etiket: sonra (içerik: ""; konum: mutlak ; üst: -2 piksel; sol: 2 piksel; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık yarıçapı: 10 piksel; arka plan: #FFF; kutu gölgesi: 0 2 piksel 5 piksel rgba (0,0,0, .3); geçiş: .2s;).onay kutusu: işaretlendi + etiket: önce (arka plan: #9FD468;).onay kutusu: işaretlendi + etiket: sonra (sol: 26px;).onay kutusu: odak + etiket: önce (kutu gölgesi: ek 0 2px 3px) rgba (0,0,0, .2), 0 0 0 3px rgba (255,255,0, .7);)
Radyo düğmesi için CSS kodu:
Radyo (dikey hizalama: üst; genişlik: 17 piksel; yükseklik: 17 piksel; kenar boşluğu: 0 3 piksel 0 0;). radyo + etiket (imleç: işaretçi;). radyo: değil (işaretli) (konum: mutlak; z-endeksi: -1; opaklık: 0; kenar boşluğu: 10px 0 0 7px;).radyo: değil (işaretli) + etiket (konum: göreceli; dolgu: 0 0 0 35px;).radyo: değil (işaretli) + etiket: önce (içerik) : ""; konum: mutlak; üst: -3 piksel; sol: 0; genişlik: 22 piksel; yükseklik: 22 piksel; kenarlık: 1 piksel katı #CDD1DA; kenar yarıçapı: %50; arka plan: #FFF;) .radyo: değil ( işaretli) + etiket: sonra (içerik: ""; konum: mutlak; üst: 1 piksel; sol: 4 piksel; genişlik: 16 piksel; yükseklik: 16 piksel; kenarlık yarıçapı: %50; arka plan: #9FD468; kutu gölgesi: iç metin 0 1px 1px rgba (0,0,0, .5); opaklık: 0; geçiş: .2s;).radyo: işaretlendi + etiket: sonra (opaklık: 1;).radyo: odak + etiket: önce (kutu gölgesi) : 0 0 0 3px rgba (255,255,0, .7);)
Uygula
Bunu bu kadar garip bir şekilde yapmak zor. inekler Bu method, Onay kutuları ve radyo düğmeleri oluşturun CSS konusunda sana yardımcı olacağım Size uygun olduğu sürece bu şekilde yapabilirsiniz.
Site bilindiği üzere sizi kendi lehime kıskanıyorum sevgili okuyucular. Bugün size harika onay kutuları oluşturmanıza olanak tanıyan harika bir teknik göstereceğim, pek çok güzel onay kutusu, sahne arkasında html'yi tanıtanlar. Sana nasıl çekingen olunacağını göstereceğim css tasarımı onay kutusu-iв. Başka bir deyişle, size CSS kullanarak onay kutuları gibi güzel onay kutularının nasıl oluşturulacağını göstereceğim.
Pochatkova düzeni
Şimdi ekleme ihtiyacıyla başlayalım HTML Kodu, Onay kutularımızı ve önlerindeki imzaları (etiket) gördüğünüz gibi, bu alanların birbirine bağlanması gerekir, böylece etikete tıkladığınızda alana bir onay işareti koyabilirsiniz.
O yüzden biraz yorum yapacağım. Üç bahsimiz var: onay kutusu alanı ve bir sonrakine imza. Dış görünüm alanı tanımlayıcısını seçer, ilişkilendirilmesi gereken tanımlayıcının adının yazıldığı ek for özelliğine etiketli bir bağlantı eklenir. Sayfada her şey böyle görünse de asıl olan budur dış görünüm onay kutuları. Onu hemen değiştireceğiz.
Girdi topluyoruz, yatak odasını tasarlıyoruz
Şimdi orijinal onay kutusunu yan taraftan tutmamız gerekiyor.
Giriş (
görüntü yok;
}
Şimdi yeni alanlar oluşturmanız gerekiyor. Etiketin ortasında yer aldıkları için açıklık elemanlarını süsleyeceğiz.
Giriş + etiket aralığı (
ekran: satır içi blok;
genişlik: 40 piksel;
sağ kenar boşluğu: 10 piksel;
yükseklik: 40 piksel;
dikey hizalama: orta;
kenarlık: 5 piksel düz yeşil;
imleç: işaretçi;
kenarlık yarıçapı: 5 piksel;
}
Selector kullanarak kod içerisinde yer alan etiketlerdeki tüm boşlukları checkbox tipindeki girişlere göre seçtik. Bu sayede dekorasyon yatak odamıza kadar durağan kalacaktır. Metnin arkaya sığmaması için sağda bir girinti bulunan, belirli bir genişlik ve yükseklikte bir blok sıra tipi veriyoruz.
Robimo, her şey istensin diye
Şimdi bunu, SPANA'nın ortasına tıkladığınızda, herhangi bir seçeneği seçtiğinizde otomatik olarak içine bir onay işareti yerleştirilecek şekilde yapmanız gerekiyor. Bu amaçla internette bilginin başlangıcı için aynı simgeyi bir onay işaretiyle (png formatında olmalı) kullanarak alanımızın boyutuna değiştirdim. Artık aşağıdaki kodu girmenize gerek yok:
Giriş: işaretli + etiket aralığı (
arka plan: url (btn.png) tekrarlama yok;
}
İşte bu, şimdi çalışıyoruz! Tıklamayı deneyin; seçtiğinizde güzel bir onay işaretinin göründüğünü fark edeceksiniz. Resmim css dosyasıyla aynı klasördeydi ve orada burada btn.png olarak adlandırılıyordu.
Peki neden büyüleyici seçici girdimizle uğraşasınız ki: işaretli + etiket aralığı? Temelde, tarayıcıyı adım atarak cezalandırır: değerleri olan herhangi bir onay kutusu varsa, etiketlerde boşluk bırakmak için durun Arkaplan resmi. Her şey basit, bunu komut dosyaları olmadan yaptık ve saf CSS kullanarak güzel onay kutuları oluşturduk. Anlaşılmadıysa yorumlara yazın.
Biraz saygınız: Hepimiz web sitelerimizi güvenilir barındırmada barındırmak istiyoruz. Yüzlerce hosting sitesini analiz ettim ve en kısa olanı biliyorum. Ana BilgisayarIQ Hakkında yüzlerce olumlu yorum var, koristuvachların ortalama puanı 5 üzerinden 4,8. Siteleriniz hayırlı olsun.
Bu makale, giriş türü onay kutusu HTML'sine ve bunların PHP'de nasıl işlendiğine benzer.
tek onay kutusu
Tek onay kutusuyla basit bir form oluşturun:
PHP betiği ( checkbox-form.php) $_POST dizisinden dönüş seçeneğini seçebiliriz. Eğer $_POST['formWheelchair'] şu anlama geliyorsa " Evet“, Bu, kurulum çeşidinin sancaktır. Eğer bayrak ayarlanmamışsa, $_POST['formWheelchair'] AYARLANMAYACAKTIR.
PHP'de aks ucu şekillendirme:
$_POST['formSubmit'] " olarak ayarlandı Evet", Bu değer, onay kutusunun değer özelliğinde şu şekilde belirtilir:
zamist " Evet"Değerleri ayarlayabilirsiniz" 1 "Abo" Açık". Lütfen PHP betiğindeki doğrulama kodunun da güncellendiğinden emin olmak için kontrol edin.
Che-box grubu
Bazen forma bir grup ilişkili PHP giriş türü onay kutusu girmeniz gerekir. Bir grup onay kutusunun avantajı, kullanıcının bir dizi seçeneği seçebilmesidir. Grup altında radyo düğmesi başına yalnızca bir seçenek vardır.
Yukarıdaki yönergeleri ele alalım ve bu temelde aşağıdakilerin bir listesini yapmamız gerekiyor:
Lütfen giriş türü onay kutusunun aynı adları (formDoor) içerdiğini unutmayın. Ve hangi cilt etkilerinin biteceği. Vikoristlerin bir adı var, onay kutularının bağlı olduğu kişilere işaret ediyoruz. Ek olarak seçilen değerlerin PHP betiği için dizi şeklinde bulunacağını belirtiyoruz. Yani, $_POST ['formDoor'], havada asılı duran bir uçta olduğu gibi birden fazla satırı döndürür; Bunun yerine, seçilen onay kutularının tüm değerlerinden oluşan dizi döndürülür.
Örneğin, tüm seçenekleri seçersem $_POST['formDoor'] aşağıdakilerden oluşan bir dizi olacaktır: (A, B, C, D, E). Masifin anlamını göstermek için popoyu aşağıya doğru hedefleyin:
Eğer aramama seçeneğinden beklenen $_POST ['formDoor'] SAĞLANMAYACAKTIR, bunu doğrulamak için “boş” fonksiyonunu kullanın. Değer belirtildikten sonra, dizinin boyutunu döndüren ve bulunanı görüntüleyen ek count() işlevini kullanarak dizide döngü yaparız.
Seçeneğine ilişkin hükümlerin sırası nedir? Meşe Palamudu Binası“O zaman dizi 'A' değerine sahip olacak. Benzer şekilde bunun sonucunda Carnegie Kompleksi", Masiv C'den intikam alacak.
Belirli bir seçeneğin seçilip seçilmeyeceğini kontrol edin
HTML giriş türü onay kutusu grubundaki tüm mevcut öğelerden belirli bir seçeneğin seçilip seçilmediğini kontrol etmek genellikle gereklidir. Bu doğrulamayı gerçekleştiren fonksiyonun ekseni:
function IsChecked ($chkname, $value) (if (! empty ($_POST [$chkname])) (foreach ($_POST [$chkname] as $chkval) (if ($chkval == $value) (return true; ))) false değerini döndür;)
Vikorist її için IsChecked'e tıklamanız yeterli ( Onay kutusu_adı, değer). Örneğin:
if (IsChecked ("formDoor", "A")) (// halledin...) // veya wiki olarak kullanın... $ fiyat + = IsChecked ("formDoor", "A")? 100; $Fiyat + = IsChecked("formDoor", "B")? 20:0;
Popo kodunu büyüle
PHP giriş türü onay kutusunu kullanarak forma PHP kodunu ekleyin.
Bu yayın makaleden çevrilmiştir " PHP form işlemcisinde onay kutusunun kullanılması"Güleryüzlü bir ekip tarafından hazırlanan bir proje
CSS3 meraklıları, ekranda ihtiyacımız olan hemen hemen her efekti elde edebiliriz. Bu derste onay kutularını ve radyo düğmelerini nasıl stillendirebileceğinize bakacağız.
Giriş: işaretlendi + etiket: önce (içerik: "\2022"; renk: #f3f3f3; yazı tipi boyutu: 30 piksel; metin hizalama: orta; satır yüksekliği: 18 piksel;)
Artık radyo butonuna bastığımızda küçük beyaz bir daire görünecektir.
stilize onay kutusu
Şimdi onay kutularını tasarlamaya başlayalım. Yeni başlayanlar için temel unsuru biliyorum:
Giriş(ekran: yok;)
Artık ek sözde öğeyi kullanarak onay kutusunun standart görünümünü kaldırabiliriz: before ve basitçe bir çerçeve ekleyebiliriz:
Onay kutusu etiketi: önce (kenarlık yarıçapı: 3px;)
Daha sonra onay kutusuna tıkladığınızda görünecek bir “onay işareti” sembolü ekleyeceğiz. Bu radyo çemberine benzer. Bu sefer yeniden yaratmamız gerekiyor HTML sembolü? ✓.
Giriş: işaretlendi + etiket: önce (içerik: "\2713"; metin gölgesi: 1px 1px 1px rgba (0, 0, 0, .2); yazı tipi boyutu: 15 piksel; renk: #f3f3f3; metin hizalama: merkez ; satır yüksekliği: 15px;)
Kesede, bırakmaktan suçlu olduğumuz eksen:
Torbalar
Bu derste ihtiyacınız olan radyo düğmelerinin ve onay kutularının görünümünü özelleştirmek için kullanabileceğiniz yola baktık. CSS3 kullandığımız için bu teknik yalnızca bu teknolojiyi destekleyen tarayıcılarda kullanılacaktır. Daha eski tarayıcılarda benzer sonuçlar elde etmek için bunu hızlı bir şekilde kullanabilirsiniz.
işaretle HTML formları, Veya "onay kutusu" etiketiyle belirtilir giriş, Hangi değer türü onay kutusu.
Onay işareti iyi ya da kötü anlamına gelir. Kurulum sırası doğruysa tarayıcı değiştirilen alanı sunucuya gönderecektir. Hafta içi olduğu için tarayıcının hiçbir şey göndermediği açıktır. Tom özelliği değer zorunlu olanların sayısına dahil edilemez.
Eylemler için onay kutusunun bulunmasına ihtiyaç duyulduğundan etikete bir özellik eklemek gerekir. kontrol. Bunun gibi:
Onay kutusu tarayıcıda şu şekilde görünür:
Bir onay kutusunun varlığı, mevcut öğelerden herhangi birini seçmekten sorumlu olduğunuz anlamına gelmez. Bununla bağlantılı olarak, bir formda çok sayıda onay kutusu bulunduğundan, bunlara farklı adlar verilmelidir.
Makalenin başlığının üzerinde gezinen formun kodu mevcut olacaktır:
İsme gelince, profesyonel orta alanda buna "onay kutuları" diyorlar.