Form denetimi stilleri, düzen seçenekleri ve çok çeşitli formlar oluşturmaya yönelik özel bileşenler için örnekler ve kullanım yönergeleri.
genel bakış
Bootstrap'in form kontrolleri , sınıflarla Yeniden Başlatılan form stillerimizi genişletir. Tarayıcılar ve cihazlar arasında daha tutarlı bir işleme için özelleştirilmiş ekranlarını seçmek için bu sınıfları kullanın.
E -posta doğrulama, numara seçimi ve daha fazlası gibi daha yeni giriş kontrollerinden yararlanmak için tüm girişlerde (örneğin, e-posta adresi veya sayısal bilgiler için) uygun bir typeöznitelik kullandığınızdan emin olun .emailnumber
Bootstrap'in form stillerini göstermek için hızlı bir örnek. Gerekli sınıflar, form düzeni ve daha fazlasıyla ilgili belgeler için okumaya devam edin.
Form kontrolleri
Metinsel form denetimleri ( <input>s, <select>s ve s gibi) sınıfa <textarea>göre biçimlendirilir . .form-controlGenel görünüm, odak durumu, boyutlandırma ve daha fazlası için stiller dahildir.
Daha fazla stil için özel formlarımızı keşfettiğinizden emin olun <select>.
Dosya girişleri için, .form-controlfor .form-control-file.
boyutlandırma
.form-control-lgve gibi sınıfları kullanarak yükseklikleri ayarlayın .form-control-sm.
Sadece oku
readonlyGirdinin değerinin değiştirilmesini önlemek için bir girdiye boolean niteliğini ekleyin . Salt okunur girişler daha açık görünür (tıpkı devre dışı bırakılmış girişler gibi), ancak standart imleci korur.
Salt okunur düz metin
<input readonly>Formunuzdaki öğelerin düz metin olarak biçimlendirilmesini istiyorsanız .form-control-plaintext, varsayılan form alanı stilini kaldırmak ve doğru kenar boşluğunu ve dolguyu korumak için sınıfı kullanın.
Aralık Girişleri
kullanarak yatay olarak kaydırılabilir aralık girişlerini ayarlayın .form-control-range.
Onay kutuları ve radyolar
Varsayılan onay kutuları ve radyolar , HTML öğelerinin düzenini ve davranışını iyileştiren her iki giriş türü için tek bir sınıf yardımıyla .form-checkgeliştirilir . Onay kutuları bir listedeki bir veya birkaç seçeneği seçmek içindir, radyolar ise birçok seçenek arasından birini seçmek içindir.
Devre dışı bırakılmış onay kutuları ve radyolar desteklenir. disabledÖznitelik, girişin durumunu belirtmek için daha açık bir renk uygular .
Onay kutuları ve radyo düğmeleri, HTML tabanlı form doğrulamasını destekler ve özlü, erişilebilir etiketler sağlar. Bu nedenle, <input>s ve s öğelerimiz, a içindeki bir <label>öğenin aksine kardeş öğelerdir . Bu biraz daha ayrıntılıdır, çünkü belirtmeniz gerekir ve ve ile ilişkilendirmek için nitelikler .<input><label>idfor<input><label>
Varsayılan (yığılmış)
Varsayılan olarak, hemen kardeş olan herhangi bir sayıda onay kutusu ve telsiz dikey olarak yığılır ve ile uygun şekilde aralıklanır .form-check.
Çizgide
.form-check-inlineHerhangi birine ekleyerek onay kutularını veya radyoları aynı yatay satırda gruplayın .form-check.
etiketsiz
İçinde etiket metni olmayan .position-staticgirdilere ekleyin . .form-checkYardımcı teknolojiler için bir tür erişilebilir ad sağlamayı unutmayın (örneğin, kullanarak aria-label).
Düzen
Bootstrap display: blockve width: 100%hemen hemen tüm form kontrollerimiz için geçerli olduğundan, formlar varsayılan olarak dikey olarak istiflenir. Bu düzeni form bazında değiştirmek için ek sınıflar kullanılabilir.
Grup grupları
Sınıf .form-group, formlara yapı eklemenin en kolay yoludur. Etiketlerin, kontrollerin, isteğe bağlı yardım metninin ve form doğrulama iletilerinin uygun şekilde gruplandırılmasını teşvik eden esnek bir sınıf sağlar. Varsayılan olarak yalnızca geçerlidir margin-bottom, ancak gerektiğinde ek stiller alır .form-inline. Onu <fieldset>s, <div>s veya hemen hemen başka herhangi bir öğeyle kullanın.
Form ızgarası
Grid sınıflarımız kullanılarak daha karmaşık formlar oluşturulabilir. Bunları birden çok sütun, çeşitli genişlikler ve ek hizalama seçenekleri gerektiren form düzenleri için kullanın.
Form satırı
Ayrıca , daha sıkı ve daha kompakt düzenler için varsayılan sütun oluklarını geçersiz kılan standart ızgara sıramızın bir varyasyonu olan ile .rowtakas edebilirsiniz..form-row
Izgara sistemi ile daha karmaşık düzenler de oluşturulabilir.
yatay form
.rowGrupları oluşturmak için sınıfı ekleyerek ve .col-*-*etiketlerinizin ve denetimlerinizin genişliğini belirtmek için sınıfları kullanarak ızgarayla yatay formlar oluşturun. İlgili form kontrolleriyle dikey olarak ortalanmaları için s'lerinizi de .col-form-labeleklediğinizden emin olun .<label>
Bazen, ihtiyacınız olan mükemmel hizalamayı oluşturmak için kenar boşluğu veya dolgu yardımcı programlarını kullanmanız gerekebilir. Örneğin, padding-topmetin taban çizgisini daha iyi hizalamak için yığılmış radyo girişleri etiketimizi kaldırdık.
Yatay form etiket boyutlandırma
ve boyutunu doğru bir şekilde takip etmek için veya .col-form-label-sms veya s'nizi kullandığınızdan emin olun ..col-form-label-lg<label><legend>.form-control-lg.form-control-sm
Sütun boyutlandırma
Önceki örneklerde gösterildiği gibi, ızgara sistemimiz a veya .coliçine istediğiniz sayıda s yerleştirmenize izin verir . Mevcut genişliği aralarında eşit olarak bölerler. Ayrıca, daha fazla veya daha az yer kaplamak için sütunlarınızın bir alt kümesini seçebilir, geri kalanlar ise aşağıdaki gibi belirli sütun sınıflarıyla geri kalanını eşit olarak böler ..row.form-row.col.col-7
Otomatik boyutlandırma
Aşağıdaki örnek, içeriği dikey olarak ortalamak için bir flexbox yardımcı programı kullanır ve sütunlarınız yalnızca gerektiği kadar yer kaplayacak şekilde .coldeğişir . .col-autoBaşka bir deyişle, sütun, içeriğe göre boyutlandırılır.
Daha sonra bunu boyuta özel sütun sınıflarıyla yeniden karıştırabilirsiniz.
.form-inlineTek bir yatay satırda bir dizi etiket, form denetimi ve düğme görüntülemek için sınıfı kullanın . Satır içi formlardaki form kontrolleri, varsayılan durumlarından biraz farklıdır.
Kontroller , herhangi bir HTML beyaz alanını daraltır ve boşluk ve esnek kutu yardımcı programları display: flexile hizalama kontrolü sağlamanıza izin verir .
width: autoÖnyükleme varsayılanını geçersiz kılmak için denetimler ve giriş grupları alınır width: 100%.
Kontroller , yalnızca mobil cihazlarda dar görüntü alanlarını hesaba katmak için en az 576 piksel genişliğindeki görüntü alanlarında satır içi görünür .
Boşluk yardımcı programlarıyla (aşağıda gösterildiği gibi) ayrı form denetimlerinin genişliğini ve hizalamasını manuel olarak ele almanız gerekebilir . <label>Son olarak, ekran okuyucu olmayan ziyaretçilerden gizlemeniz gerekse bile, her form denetimine her zaman bir a eklediğinizden emin olun .sr-only.
Özel form kontrolleri ve seçimleri de desteklenir.
Gizli etiketlere alternatifler
Her giriş için bir etiket eklemezseniz, ekran okuyucular gibi yardımcı teknolojiler formlarınızda sorun yaşar. .sr-onlyBu satır içi formlar için sınıfı kullanarak etiketleri gizleyebilirsiniz . aria-label, aria-labelledbyveya titleözniteliği gibi yardımcı teknolojiler için bir etiket sağlamanın başka alternatif yöntemleri de vardır . Bunların hiçbiri yoksa, yardımcı teknolojiler placeholder, varsa, özniteliği kullanmaya başvurabilir, ancak placeholderdiğer etiketleme yöntemlerinin yerine kullanılmasının tavsiye edilmediğine dikkat edin.
Yardım Metni
Formlardaki blok düzeyinde yardım metni .form-text(önceden .help-blockv3'te biliniyordu) kullanılarak oluşturulabilir. Satır içi yardım metni, herhangi bir satır içi HTML öğesi ve gibi yardımcı program sınıfları kullanılarak esnek bir şekilde uygulanabilir .text-muted.
Yardım metnini form kontrolleriyle ilişkilendirme
Yardım metni, özniteliği kullanmakla ilgili olduğu form denetimiyle açıkça ilişkilendirilmelidir aria-describedby. Bu, ekran okuyucular gibi yardımcı teknolojilerin, kullanıcı odaklandığında veya kontrole girdiğinde bu yardım metnini duyurmasını sağlayacaktır.
Girişlerin altındaki yardım metni ile biçimlendirilebilir .form-text. Bu sınıf, display: blockyukarıdaki girdilerden kolay boşluk bırakmak için bir miktar üst kenar boşluğu içerir ve ekler.
Şifreniz 8-20 karakter uzunluğunda olmalı, harf ve rakamlardan oluşmalı ve boşluk, özel karakter veya emoji içermemelidir.
Satır içi metin, herhangi bir tipik satır içi HTML öğesini (bir <small>, <span>veya başka bir şey olsun) bir yardımcı program sınıfından başka bir şey olmadan kullanabilir.
Engelli formları
disabledKullanıcı etkileşimlerini önlemek ve daha açık görünmesini sağlamak için bir girdiye boolean niteliğini ekleyin .
İçindeki tüm kontrolleri devre dışı bırakmak için disabledözniteliği a öğesine ekleyin .<fieldset>
Çapalı uyarı
Tarayıcılar, a içindeki tüm yerel form denetimlerini ( <input>, <select>, ve <button>öğelerini) <fieldset disabled>devre dışı olarak kabul ederek üzerlerinde hem klavye hem de fare etkileşimlerini engeller.
Ancak, formunuz gibi özel düğme benzeri öğeler de içeriyorsa <a ... class="btn btn-*">, bunlara yalnızca pointer-events: none. Düğmelerin devre dışı bırakılma durumuyla ilgili bölümde (ve özellikle bağlantı öğelerinin alt bölümünde) belirtildiği gibi, bu CSS özelliği henüz standartlaştırılmamıştır ve Internet Explorer 10'da tam olarak desteklenmemektedir. Bağlantı tabanlı denetimler de yine de klavyeyi kullanarak odaklanabilir ve çalıştırılabilir. tabindex="-1"Odaklanmalarını önlemek ve aria-disabled="disabled"durumlarını yardımcı teknolojilere bildirmek için ekleyerek bu kontrolleri manuel olarak değiştirmelisiniz .
Tarayıcılar arası uyumluluk
Bootstrap bu stilleri tüm tarayıcılarda uygularken, Internet Explorer 11 ve altı disabled, bir <fieldset>. Bu tarayıcılarda alan kümesini devre dışı bırakmak için özel JavaScript kullanın.
doğrulama
Desteklenen tüm tarayıcılarımızda bulunan HTML5 form doğrulaması ile kullanıcılarınıza değerli, eyleme geçirilebilir geri bildirim sağlayın . Tarayıcı varsayılan doğrulama geri bildirimi arasından seçim yapın veya yerleşik sınıflarımız ve başlangıç JavaScript'i ile özel mesajlar uygulayın.
Yardımcı teknolojilere maruz kalmadıkları için şu anda istemci tarafı özel doğrulama stillerine ve araç ipuçlarına erişilemediğinin farkındayız. Bir çözüm üzerinde çalışırken, sunucu tarafı seçeneğini veya varsayılan tarayıcı doğrulama yöntemini kullanmanızı öneririz.
Giriş grubu doğrulaması
Girdi grupları, maalesef doğrulama stilleri konusunda zorluk yaşıyor. Önerimiz, geri bildirim mesajlarını sahip olanın kardeş unsurları olarak .input-groupyerleştirmenizdir .is-{valid|invalid}. Giriş gruplarına geri bildirim mesajları yerleştirmek, border-radius. Bu geçici çözüme bakın .
Nasıl çalışır
Bootstrap ile form doğrulama şu şekilde çalışır:
HTML form doğrulaması, CSS'nin iki sözde sınıfı :invalidve :valid. <input>, <select>ve <textarea>öğeleri için geçerlidir .
Bootstrap :invalidve :validstillerini .was-validated, genellikle <form>. Aksi takdirde, değeri olmayan herhangi bir zorunlu alan, sayfa yüklemesinde geçersiz olarak görünür. Bu şekilde, onları ne zaman etkinleştireceğinizi seçebilirsiniz (genellikle form gönderme denendikten sonra).
Formun görünümünü sıfırlamak için (örneğin, AJAX kullanılarak dinamik form gönderimleri durumunda), gönderimden sonra .was-validatedsınıfı <form>tekrar kaldırın.
Bir geri dönüş olarak, sunucu tarafı doğrulaması.is-invalid için sözde sınıflar yerine ve .is-validsınıfları kullanılabilir . Bir ebeveyn sınıfı gerektirmezler ..was-validated
<label>CSS'nin nasıl çalıştığına ilişkin kısıtlamalar nedeniyle , özel JavaScript'in yardımı olmadan DOM'da bir form kontrolünden önce gelen bir stile (şu anda) stiller uygulayamıyoruz .
Geri bildirim mesajları, tarayıcı varsayılanlarını (her tarayıcı için farklı ve CSS aracılığıyla biçimlendirilemez) veya ek HTML ve CSS ile özel geri bildirim stillerimizi kullanabilir.
setCustomValidityJavaScript ile özel geçerlilik mesajları sağlayabilirsiniz .
Bunu akılda tutarak, özel form doğrulama stillerimiz, isteğe bağlı sunucu tarafı sınıflarımız ve tarayıcı varsayılanlarımız için aşağıdaki demoları göz önünde bulundurun.
Özel stiller
Özel Bootstrap form doğrulama mesajları için, novalidateboolean niteliğini <form>. Bu, tarayıcının varsayılan geri bildirim araç ipuçlarını devre dışı bırakır, ancak yine de JavaScript'teki form doğrulama API'lerine erişim sağlar. Aşağıdaki formu göndermeyi deneyin; JavaScript'imiz gönder düğmesini durduracak ve size geri bildirim iletecektir. Göndermeye çalışırken , form kontrollerinize uygulanan :invalidve stilleri göreceksiniz .:valid
Özel geri bildirim stilleri, geri bildirimi daha iyi iletmek için özel renkler, kenarlıklar, odak stilleri ve arka plan simgeleri uygular. s için arka plan simgeleri <select>yalnızca ile kullanılabilir .custom-select, ile kullanılamaz .form-control.
Tarayıcı varsayılanları
Özel doğrulama geri bildirim mesajlarıyla veya form davranışlarını değiştirmek için JavaScript yazmakla ilgilenmiyor musunuz? Her şey yolunda, tarayıcı varsayılanlarını kullanabilirsiniz. Aşağıdaki formu göndermeyi deneyin. Tarayıcınıza ve işletim sisteminize bağlı olarak, biraz farklı bir geri bildirim tarzı görürsünüz.
Bu geri bildirim stilleri CSS ile biçimlendirilemezken, geri bildirim metnini JavaScript aracılığıyla yine de özelleştirebilirsiniz.
sunucu tarafı
İstemci tarafı doğrulama kullanmanızı öneririz, ancak sunucu tarafı doğrulamaya ihtiyaç duymanız durumunda geçersiz ve geçerli form alanlarını ve ile .is-invalidbelirtebilirsiniz .is-valid. .invalid-feedbackBu sınıflarla da desteklendiğini unutmayın .
Geçersiz alanlar için, geçersiz geri bildirim/hata mesajının kullanarak ilgili form alanıyla ilişkilendirildiğinden emin olun aria-describedby. idBu öznitelik , alanın zaten ek form metnine işaret etmesi durumunda birden fazla başvuru yapılmasına izin verir .
Desteklenen öğeler
Aşağıdaki form kontrolleri ve bileşenleri için doğrulama stilleri mevcuttur:
<input>s ve <textarea>s ile.form-control
<select>s ile .form-controlveya.custom-select
.form-checks
.custom-checkboxs ve .custom-radios
.custom-file
Araç ipuçları
Form düzeniniz izin veriyorsa, stilize edilmiş bir araç ipucunda doğrulama geri bildirimini görüntülemek .{valid|invalid}-feedbackiçin sınıfları sınıflarla değiştirebilirsiniz. Araç ipucu konumlandırması için üzerinde .{valid|invalid}-tooltipbir ebeveyn bulunduğundan emin olun . position: relativeAşağıdaki örnekte, sütun sınıflarımız buna zaten sahiptir, ancak projeniz alternatif bir kurulum gerektirebilir.
özelleştirme
Doğrulama durumları $form-validation-statesharita ile Sass üzerinden özelleştirilebilir. Dosyamızda bulunan _variables.scssbu Sass haritası, varsayılan valid/invalid doğrulama durumlarını oluşturmak için döngüye alınmıştır. Her durumun rengini ve simgesini özelleştirmek için iç içe geçmiş bir harita dahildir. Tarayıcılar tarafından başka hiçbir durum desteklenmezken, özel stiller kullananlar daha karmaşık form geri bildirimlerini kolayca ekleyebilir.
Lütfen, karışımı değiştirmeden bu değerleri özelleştirmenizi form-validation-stateönermediğimizi unutmayın.
Giriş grubu doğrulama geçici çözümü
border-radiusSeçici sınırlamaları nedeniyle hatalı giriş gruplarını doğrulama ile çözemiyoruz , bu nedenle manuel geçersiz kılmalar gerekiyor. Standart bir giriş grubu kullandığınızda ve varsayılan kenarlık yarıçapı değerlerini özelleştirmediğinizde, .rounded-rightkırık olan öğelere ekleyin border-radius.
@
Lütfen bir kullanıcı adı seçin.
Küçük veya büyük bir giriş grubu kullanırken veya varsayılan border-radiusdeğerleri özelleştirirken, bozuk olan öğeye özel CSS ekleyin border-radius.
@
Lütfen bir kullanıcı adı seçin.
Özel formlar
Daha da fazla özelleştirme ve tarayıcılar arası tutarlılık için tarayıcı varsayılanlarını değiştirmek üzere tamamen özel form öğelerimizi kullanın. Anlamsal ve erişilebilir işaretleme üzerine inşa edilmişlerdir, bu nedenle herhangi bir varsayılan form denetimi için sağlam ikamelerdir.
Onay kutuları ve radyolar
Her bir onay kutusu, radyo <input>ve eşleştirme, özel kontrolümüzü oluşturmak için <label>a'ya sarılır . <div>Yapısal olarak bu, varsayılanımızla aynı yaklaşımdır .form-check.
Özel form göstergemizi uygun şekilde biçimlendirmek ~için tüm <input>durumlarımız için kardeş seçiciyi ( ) kullanıyoruz. :checkedSınıfla birleştirildiğinde, .custom-control-labelher bir öğenin metnini,<input> ' durumuna göre biçimlendirebiliriz.
<input>Varsayılanı ile gizleriz ve yerine ve ile yeni bir özel form göstergesi oluşturmak için opacitykullanırız . Ne yazık ki, CSS'ler bu öğe üzerinde çalışmadığı için özel bir tane oluşturamıyoruz..custom-control-label::before::after<input>content
İşaretli durumlarda, Open Iconic'ten base64 gömülü SVG simgelerini kullanırız . Bu bize, tarayıcılar ve cihazlar arasında şekillendirme ve konumlandırma için en iyi kontrolü sağlar.
onay kutuları
:indeterminateÖzel onay kutuları, JavaScript aracılığıyla manuel olarak ayarlandığında sözde sınıfı da kullanabilir (bunu belirtmek için kullanılabilir HTML özniteliği yoktur).
jQuery kullanıyorsanız, bunun gibi bir şey yeterli olacaktır:
radyolar
Çizgide
Engelli
Özel onay kutuları ve radyolar da devre dışı bırakılabilir. disabledBoolean niteliğini buna ekleyin <input>ve özel gösterge ve etiket açıklaması otomatik olarak şekillendirilecektir.
Anahtarlar
Bir anahtar, özel bir onay kutusunun işaretlemesine sahiptir, ancak .custom-switchbir geçiş anahtarı oluşturmak için sınıfı kullanır. Anahtarlar da disabledözelliği destekler.
Seçim Menüsü
Özel menüler , özel stilleri tetiklemek için <select>yalnızca özel bir sınıfa ihtiyaç duyar . Özel stiller, 'nin ilk görünümüyle .custom-selectsınırlıdır ve tarayıcı sınırlamaları nedeniyle 'leri değiştiremez.<select><option>
Benzer boyuttaki metin girişlerimize uyması için küçük ve büyük özel seçimler arasından da seçim yapabilirsiniz.
multipleÖznitelik de desteklenir :
Nitelik olarak size:
Menzil
ile özel <input type="range">kontroller oluşturun .custom-range. İz (arka plan) ve başparmak (değer) tarayıcılarda aynı görünecek şekilde tasarlanmıştır. İlerlemeyi görsel olarak belirtmek için yalnızca IE ve Firefox izlerini başparmağın solundan veya sağından “doldurmayı” desteklediğinden, şu anda desteklemiyoruz.
minAralık girdileri, sırasıyla ve max- 0ve için örtük değerlere 100sahiptir. minve niteliklerini kullananlar için yeni değerler belirleyebilirsiniz max.
Varsayılan olarak, aralık girişleri tamsayı değerlerine "snap" yapar. Bunu değiştirmek için bir stepdeğer belirtebilirsiniz. Aşağıdaki örnekte, kullanarak adım sayısını ikiye katlıyoruz step="0.5".
Dosya tarayıcısı
Özel dosya girişini canlandırmak için önerilen eklenti: bs-custom-file-input , şu anda burada, dokümanlarımızda bunu kullanıyoruz.
Dosya girişi, grubun en çetrefilli olanıdır ve bunları işlevsel Dosya seç… ve seçilen dosya adı metni ile bağlamak istiyorsanız ek JavaScript gerektirir .
<input>Varsayılan dosyayı üzerinden gizleriz opacityve bunun yerine <label>. Düğme oluşturulur ve ile konumlandırılır ::after. Son olarak, çevreleyen içerik için uygun boşluk için a widthve heightüzerinde beyan ederiz .<input>
SCSS ile dizeleri çevirme veya özelleştirme
Sözde :lang()sınıf , “Gözat” metninin diğer dillere çevrilmesine izin vermek için kullanılır. İlgili dil etiketi ve yerelleştirilmiş dizelerle $custom-file-textSass değişkenine girişleri geçersiz kılın veya ekleyin . İngilizce dizeleri aynı şekilde özelleştirilebilir. Örneğin, İspanyolca bir çevirinin nasıl eklenebileceği aşağıda açıklanmıştır (İspanyolca'nın dil kodu ):es
lang(es)İspanyolca çeviri için özel dosya girişiyle ilgili eylem :
data-browseBootstrap ayrıca , özel giriş etiketine eklenebilen öznitelikle HTML'deki "Gözat" metnini çevirmenin bir yolunu da sağlar (örnek Felemenkçe):