Izibonelo nemihlahlandlela yokusetshenziswa yezitayela zokulawula amafomu, izinketho zesakhiwo, kanye nezingxenye zangokwezifiso zokudala amafomu anhlobonhlobo.
Uhlolojikelele
Izilawuli zefomu le-Bootstrap zinwebeka kuzitayela zethu zefomu Eqaliswe kabusha ngamakilasi. Sebenzisa lawa makilasi ukuze ungene ezibonisini zazo ezenziwe ngokwezifiso ukuze uthole ukunikezwa okungaguquki kuzo zonke iziphequluli namadivayisi.
Qiniseka ukuthi usebenzisa type
isibaluli esifanelekile kukho konke okokufaka (isb., email
ikheli le-imeyili noma number
ulwazi lwezinombolo) ukuze usizakale ngezilawuli zokufakwayo ezintsha njengokuqinisekisa i-imeyili, ukukhetha izinombolo, nokuningi.
Nasi isibonelo esisheshayo sokubonisa izitayela zefomu le-Bootstrap. Qhubeka ufunda ukuze uthole imibhalo ngamakilasi adingekayo, ukwakheka kwefomu, nokunye.
Izilawuli zefomu lombhalo—njengo- <input>
s, <select>
s, no <textarea>
-s—zibhalwe ngendlela ehambisana .form-control
nekilasi. Kufakiwe izitayela zokubukeka okuvamile, isimo sokugxila, usayizi, nokunye.
Qiniseka ukuthi uhlola amafomu ethu angokwezifiso ukuze uqhubeke nesitayela <select>
s.
Okokufaka kwefayela, shintsha .form-control
okuthi .form-control-file
.
Ukulinganisa
Setha ubude usebenzisa amakilasi afana .form-control-lg
nokuthi .form-control-sm
.
Funda kuphela
Engeza readonly
isibaluli se-boolean kokokufaka ukuze uvimbele ukuguqulwa kwevelu yokokufaka. Okokufaka kokufunda kuphela kubonakala kulula (njengokokufaka okukhutshaziwe), kodwa gcina ikhesa evamile.
Funda kuphela umbhalo ongenalutho
Uma ufuna ukuba nama <input readonly>
-elementi efomini lakho abhalwe isitayela njengombhalo ongenalutho, sebenzisa .form-control-plaintext
ikilasi ukuze ususe isitayela senkambu yefomu ezenzakalelayo futhi ulondoloze imajini elungile kanye nokugxusha.
Setha okokufaka kobubanzi obunyakazayo obuvundlile usebenzisa .form-control-range
.
Amabhokisi okuhlola namarediyo
Amabhokisi okuhlola azenzakalelayo namarediyo athuthukiswa ngosizo .form-check
, isigaba esisodwa sazo zombili izinhlobo zokufaka ezithuthukisa ukwakheka nokuziphatha kwezinto zazo ze-HTML . Amabhokisi okuhlola awokukhetha inketho eyodwa noma ezimbalwa ohlwini, kuyilapho imisakazo ingeyokukhetha inketho eyodwa kweziningi.
Amabhokisi okuhlola akhubazekile namarediyo asekelwe. Isibaluli disabled
sizosebenzisa umbala olula ukusiza ukukhombisa isimo sokokufaka.
Amabhokisi okuhlola nezinkinobho zomsakazo zisekela ukuqinisekiswa kwefomu elisekelwe ku-HTML futhi zinikeza amalebula amafushane, afinyelelekayo. Ngakho-ke, izingane zethu <input>
nezakwethu <label>
ziyizinto eziyizelamani ngokuphambene nengaphakathi <input>
kwe- <label>
. Lokhu kune-verbose kancane njengoba kufanele ucacise id
kanye nezibaluli for
ukuze zihlobanise i- <input>
and <label>
.
Okuzenzakalelayo (kustakiwe)
Ngokuzenzakalela, noma yiliphi inani lamabhokisi okuhlola namarediyo ayizelamani ngokushesha azostakwa ngokuqondile futhi ahlukaniswe ngokufanele ne- .form-check
.
Emugqeni
Qoqa amabhokisi okuhlola noma imisakazo kumugqa ofanayo ovundlile ngokwengeza .form-check-inline
kunoma iyiphi .form-check
.
Ngaphandle kwamalebula
Engeza .position-static
kokokufaka ngaphakathi .form-check
kwalokho awunawo umbhalo welebula. Khumbula ukuthi usanikeze uhlobo oluthile lwegama elifinyelelekayo lobuchwepheshe bokusiza (isibonelo, ukusebenzisa aria-label
).
Isakhiwo
Njengoba i-Bootstrap isebenza display: block
futhi width: 100%
cishe kuzo zonke izilawuli zethu zefomu, amafomu azonqwabeleka ngokuzenzakalelayo. Amakilasi engeziwe angasetshenziswa ukushintsha lesi sakhiwo ngokwefomu ngalinye.
Ikilasi .form-group
liyindlela elula yokwengeza isakhiwo kumafomu. Ihlinzeka ngekilasi elivumelana nezimo elikhuthaza ukuqoqwa okufanele kwamalebula, izilawuli, umbhalo wosizo ozikhethela wona, kanye nemiyalezo yokuqinisekisa yefomu. Ngokuzenzakalelayo isebenza kuphela margin-bottom
, kodwa ithatha izitayela ezengeziwe .form-inline
njengoba kudingeka. Yisebenzise no- <fieldset>
s, <div>
s, noma cishe nanoma iyiphi enye into.
Amafomu ayinkimbinkimbi kakhulu angakhiwa kusetshenziswa amakilasi ethu egridi. Sebenzisa lokhu ngezakhiwo zefomu ezidinga amakholomu amaningi, ububanzi obuhlukahlukene, nezinketho ezengeziwe zokuqondanisa.
Ungase futhi ushintshele .row
okuthi .form-row
, okuhlukile komugqa wethu wegridi ojwayelekile oweqa ama-gutter ekholomu azenzakalelayo ukuze uthole izakhiwo eziqinile nezihlangene.
Izakhiwo eziyinkimbinkimbi kakhulu zingaphinda zidalwe ngesistimu yegridi.
Dala amafomu avundlile ngegridi ngokwengeza .row
ikilasi ukuze wakhe amaqembu futhi usebenzise .col-*-*
amakilasi ukuze ucacise ububanzi bamalebula nezilawuli zakho. Qiniseka ukuthi ungeza .col-form-label
nezakho <label>
ukuze zimiswe ziqonde phakathi nezilawuli zazo zefomu ezihlotshaniswayo.
Ngezinye izikhathi, kungase kudingeke usebenzise imajini noma izinsiza zokunamathisela ukuze udale lokho kuqondanisa okuphelele okudingayo. Isibonelo, sisuse padding-top
ilebula yokokufaka kwerediyo estakiwe ukuze siqondanise kangcono isisekelo sombhalo.
Qiniseka ukuthi usebenzisa .col-form-label-sm
noma .col-form-label-lg
ku- <label>
s noma <legend>
u-s wakho ukulandela kahle usayizi .form-control-lg
we- .form-control-sm
.
Usayizi wekholomu
Njengoba kuboniswe ezibonelweni ezedlule, isistimu yethu yegridi ikuvumela ukuthi ubeke noma iyiphi inombolo ka- .col
s ngaphakathi kuka-a .row
noma .form-row
. Bazohlukanisa ububanzi obutholakalayo ngokulinganayo phakathi kwabo. Ungase futhi ukhethe isethi engaphansi yamakholomu akho ukuze uthathe isikhala esiningi noma esincane, kuyilapho u- .col
s esele ehlukanisa ngokulinganayo okunye, ngamakholomu athile amakilasi afana .col-7
.
Ukulinganisa okuzenzakalelayo
Isibonelo esingezansi sisebenzisa insiza ye-flexbox ukubeka phakathi ngokuqondile okuqukethwe nezinguquko .col
ukuze .col-auto
amakholomu akho athathe kuphela isikhala esiningi njengoba kudingeka. Faka enye indlela, ubukhulu bekholomu ngokwawo ngokusekelwe kokuqukethwe.
Ungakwazi ke ukuxuba kabusha lokho futhi ngamakholomu amakholomu athize.
Futhi-ke izilawuli zefomu langokwezifiso ziyasekelwa.
Sebenzisa .form-inline
ikilasi ukuze ubonise uchungechunge lwamalebula, izilawuli zefomu, nezinkinobho kumugqa owodwa ovundlile. Izilawuli zefomu ngaphakathi kwamafomu asemgqeni ziyahluka kancane ezimeni zazo ezizenzakalelayo.
- Izilawuli zingukuthi , zigoqa
display: flex
noma yisiphi isikhala esimhlophe se-HTML futhi zikuvumela ukuthi unikeze ngokulawula ukuqondanisa ngesikhala nezinsiza ze- flexbox .
- Izilawuli namaqembu okokufaka athola
width: auto
ukukhipha okumisiwe kwe-Bootstrap width: 100%
.
- Izilawuli zivela kuphela emgqeni kuzimbobo zokubuka okungenani ezinobubanzi obungu-576px ukuze kubhekelelwe izinkundla zokubuka eziwumngcingo kumadivayisi eselula.
Ungase udinge ukulungisa mathupha ububanzi nokuqondanisa kwezilawuli zefomu ngalinye ngezinsiza zokuhlukanisa izikhala (njengoba kuboniswe ngezansi). Okokugcina, qiniseka ukuthi ufaka phakathi njalo uhlelo <label>
olunesilawuli sefomu ngalinye, ngisho noma udinga ukulifihla ezivakashini ezingafundi isikrini nge- .sr-only
.
Izilawuli zefomu ngokwezifiso nokukhetha nakho kuyasekelwa.
Ezinye izindlela zamalebula afihliwe
Ubuchwepheshe obusizayo obufana nezifundi zesikrini buzoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa mafomu asemgqeni, ungafihla amalebula usebenzisa .sr-only
ikilasi. Kukhona ezinye izindlela zokuhlinzeka ngelebula lobuchwepheshe obusizayo, obufana ne- aria-label
, aria-labelledby
noma title
isibaluli. Uma kungekho kulokhu okukhona, ubuchwepheshe obusizayo bungase buphendukele ekusebenziseni placeholder
isibaluli, uma bukhona, kodwa qaphela ukuthi ukusetshenziswa placeholder
njengokumiselela ezinye izindlela zokulebula akwelulekwa.
Usizo lombhalo
Umbhalo wosizo wezinga lokuvimba kumafomu ungadalwa kusetshenziswa .form-text
(ngaphambilini owawaziwa ngokuthi .help-block
ku-v3). Umbhalo wosizo olusemgqeni ungasetshenziswa kalula kusetshenziswa noma iyiphi into ye-HTML esemgqeni kanye namakilasi okusetshenziswa afana .text-muted
.
Ukuhlobanisa umbhalo wosizo nezilawuli zefomu
Umbhalo wosizo kufanele uhlotshaniswe ngokusobala nokulawula kwefomu ohlobene nokusebenzisa aria-describedby
isibaluli. Lokhu kuzoqinisekisa ukuthi ubuchwepheshe obusizayo—njengabafundi besikrini—buzomemezela lo mbhalo wosizo lapho umsebenzisi egxile noma engena ekulawuleni.
Umbhalo wosizo ongezansi ungabhalwa ngokuthi .form-text
. Lesi sigaba sihlanganisa display: block
futhi sengeza imajini ephezulu ukuze kube lula ukuhlukanisa okokufaka ngenhla.
Iphasiwedi yakho kufanele ibe nezinhlamvu ezingu-8-20 ubude, ibe nezinhlamvu nezinombolo, futhi akumele iqukathe izikhala, izinhlamvu ezikhethekile, noma i-emoji.
Umbhalo osemgqeni ungasebenzisa noma iyiphi into evamile ye-HTML esemgqeni (kungaba i- <small>
, <span>
, noma enye into) ngaphandle kwesigaba sosizo.
Engeza disabled
isibaluli se-boolean kokokufaka ukuze uvimbele ukusebenzisana komsebenzisi futhi ukwenze kubonakale kulula.
Engeza disabled
isibaluli kokuthi a <fieldset>
ukuze ukhubaze zonke izilawuli ezingaphakathi.
Caveat ngamahange
Iziphequluli ziphatha zonke izilawuli zefomu lomdabu ( <input>
, <select>
, <button>
nezici) ngaphakathi <fieldset disabled>
njengezikhutshaziwe, zivimbela kokubili ukusebenzisana kwekhibhodi negundane kuzo.
Nokho, uma ifomu lakho lihlanganisa nezinto ezifana nenkinobho yangokwezifiso ezifana <a ... class="btn btn-*">
, lezi zizonikezwa kuphela isitayela se- pointer-events: none
. Njengoba kuphawuliwe esigabeni esimayelana nesimo sokukhubazeka kwezinkinobho (futhi ikakhulukazi esigatshaneni sezinto zokuhlanganisa ihange), lesi sakhiwo se-CSS asikakamiswa futhi asikasekelwa ngokugcwele ku-Internet Explorer 10. Izilawuli ezisekelwe kuhange nazo zisazosebenza kugxile futhi kusebenze usebenzisa ikhibhodi. Kufanele uguqule lezi zilawuli mathupha ngokungeza tabindex="-1"
ukuze uzivikele ekutholeni ukugxila futhi aria-disabled="disabled"
ubonise isimo sazo kubuchwepheshe obusizayo.
Ukuhambisana kwesiphequluli esiphambanayo
Nakuba i-Bootstrap izosebenzisa lezi zitayela kuzo zonke iziphequluli, i-Internet Explorer 11 nangaphansi ayisekeli ngokugcwele disabled
isici ku- <fieldset>
. Sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze isethi yasensimini kulezi ziphequluli.
Ukuqinisekisa
Nikeza ngempendulo ebalulekile, esebenzayo kubasebenzisi bakho ngokuqinisekisa kwefomu le-HTML5– kutholakala kuzo zonke iziphequluli zethu ezisekelwayo . Khetha kumpendulo yokuqinisekisa okuzenzakalelayo yesiphequluli, noma sebenzisa imilayezo yangokwezifiso ngamakilasi ethu akhelwe ngaphakathi kanye ne-JavaScript yokuqala.
Siyazi ukuthi okwamanje izitayela namathiphu wokuqinisekisa ohlangothini lweklayenti akufinyeleleki, ngoba azivezwanga kubuchwepheshe obusizayo. Ngenkathi sisakha isixazululo, singancoma ukuthi usebenzise inketho yohlangothi lweseva noma indlela yokuqinisekisa isiphequluli esizenzakalelayo.
Amaqembu okokufaka anobunzima ngezitayela zokuqinisekisa, ngeshwa. Isincomo sethu ukubeka imilayezo yempendulo njengama-elementi ahlobene .input-group
ne- .is-{valid|invalid}
. Ukubeka imilayezo yempendulo phakathi kwamaqembu okokufaka kwephula i- border-radius
. Bona lolu hlelo lokusebenza .
Isebenza kanjani
Nakhu ukuthi ukuqinisekiswa kwefomu kusebenza kanjani nge-Bootstrap:
- Ukuqinisekiswa kwefomu le-HTML kusetshenziswa ngamakilasi amabili mbumbulu we-CSS,
:invalid
kanye :valid
. Isebenza ku- <input>
, <select>
, kanye <textarea>
nezakhi.
- I-Bootstrap ihlanganisa izitayela
:invalid
nezitayela ekilasini :valid
labazali .was-validated
, ngokuvamile zisetshenziswa kufayela le- <form>
. Uma kungenjalo, noma iyiphi inkambu edingekayo engenavelu ibonakala njengengavumelekile ekulayisheni kwekhasi. Ngale ndlela, ungakhetha ukuthi uzozivula nini (imvamisa ngemuva kokuzanywa kokuthunyelwa kwefomu).
- Ukuze usethe kabusha ukubukeka kwefomu (ngokwesibonelo, esimweni sokuhanjiswa kwamafomu aguquguqukayo kusetshenziswa i-AJAX), susa
.was-validated
ikilasi kusukela <form>
futhi ngemva kokuhambisa.
- Njengembuyiselo,
.is-invalid
futhi .is-valid
amakilasi angasetshenziswa esikhundleni samakilasi mbumbulu wokuqinisekisa uhlangothi lweseva . Abadingi .was-validated
ikilasi labazali.
- Ngenxa yemikhawulo endleleni i-CSS esebenza ngayo, asikwazi (okwamanje) ukusebenzisa izitayela
<label>
kulokho okuza ngaphambi kokulawula kwefomu ku-DOM ngaphandle kosizo lweJavaScript yangokwezifiso.
- Zonke iziphequluli zesimanje zisekela i- API yokuqinisekisa umkhawulo , uchungechunge lwezindlela ze-JavaScript zokuqinisekisa izilawuli zefomu.
- Imilayezo yempendulo ingase isebenzise okumisiwe kwesiphequluli (okuhlukile kusiphequluli ngasinye, futhi akunasitayela nge-CSS) noma izitayela zethu zempendulo zangokwezifiso nge-HTML ne-CSS eyengeziwe.
- Unganikeza imilayezo yokuqinisekisa ngokwezifiso nge
setCustomValidity
-JavaScript.
Unalokho engqondweni, cabangela amademo alandelayo ezitayela zethu zokuqinisekisa amafomu angokwezifiso, amakilasi ohlangothi lweseva ozikhethela, kanye nokuzenzakalelayo kwesiphequluli.
Izitayela ngokwezifiso
Ukuze uthole imilayezo yokuqinisekisa yefomu le-Bootstrap yangokwezifiso, uzodinga ukungeza novalidate
isibaluli se-boolean kufayela lakho le- <form>
. Lokhu kukhubaza amathiphu empendulo ezenzakalelayo yesiphequluli, kodwa kusahlinzeka ngokufinyelela kuma-API okuqinisekisa amafomu ku-JavaScript. Zama ukuhambisa leli fomu elingezansi; I-JavaScript yethu izobamba inkinobho yokuhambisa futhi idlulisele kuwe impendulo. Uma uzama ukuthumela, uzobona izitayela :invalid
nezitayela :valid
zisetshenziswa kuzilawuli zakho zefomu.
Izitayela zempendulo yangokwezifiso zisebenzisa imibala yangokwezifiso, imingcele, izitayela zokugxila, nezithonjana zangemuva ukuze kudluliselwe impendulo kangcono. Izithonjana zangemuva ze- <select>
s zitholakala kuphela nge- .custom-select
, hhayi .form-control
.
Okuzenzakalelayo kwesiphequluli
Awunantshisekelo kumilayezo yempendulo yokuqinisekisa ngokwezifiso noma ukubhala i-JavaScript ukuze ushintshe indlela yokuziphatha yefomu? Konke kuhle, ungasebenzisa okuzenzakalelayo kwesiphequluli. Zama ukuthumela ifomu elingezansi. Ngokuya ngesiphequluli sakho ne-OS, uzobona isitayela esihluke kancane sempendulo.
Yize lezi zitayela zempendulo zingenakwenziwa isitayela nge-CSS, usengawenza ngendlela oyifisayo umbhalo wempendulo nge-JavaScript.
Uhlangothi lweseva
Sincoma ukusebenzisa ukuqinisekiswa kohlangothi lweklayenti, kodwa uma udinga ukuqinisekiswa kohlangothi lweseva, ungabonisa izinkambu zefomu ezingavumelekile nezivumelekile .is-invalid
nge- .is-valid
. Qaphela ukuthi .invalid-feedback
futhi kuyasekelwa nalawa makilasi.
Ezinkambuni ezingavumelekile, qinisekisa ukuthi impendulo/umlayezo wephutha ongavumelekile uhlotshaniswa nenkambu yefomu efanele kusetshenziswa aria-describedby
. Lesi sibaluli sivumela okungaphezu kokukodwa id
ukuthi kukhonjwe, uma ngabe inkambu isivele ikhomba umbhalo wefomu owengeziwe.
Izakhi ezisekelwe
Izitayela zokuqinisekisa ziyatholakala kuzilawuli zefomu ezilandelayo nezingxenye:
<input>
s futhi <textarea>
s nge.form-control
<select>
s .form-control
noma.custom-select
.form-check
s
.custom-checkbox
s kanye .custom-radio
s
.custom-file
Uma isakhiwo sakho sefomu sikuvumela, ungashintsha .{valid|invalid}-feedback
amakilasi .{valid|invalid}-tooltip
ukuze ubonise impendulo yokuqinisekisa ethiphu yamathuluzi enesitayela. Qiniseka ukuthi position: relative
unomzali okhona ukuze amise ithiphu lamathuluzi. Esibonelweni esingezansi, amakilasi ethu ekholomu asenakho lokhu, kodwa iphrojekthi yakho ingase idinge okunye ukusetha.
Ukwenza ngokwezifiso
Izimo zokuqinisekisa zingenziwa ngendlela oyifisayo nge-Sass $form-validation-states
ngemephu. Itholakala _variables.scss
kufayela lethu, le mephu ye-Sass iboshiwe ukuze ikhiqize izimo ezizenzakalelayo valid
/ invalid
zokuqinisekisa. Kufakwe imephu ebekiwe yokwenza ngokwezifiso umbala nesithonjana sesifunda ngasinye. Nakuba zingekho ezinye izifunda ezisekelwa iziphequluli, lezo ezisebenzisa izitayela zangokwezifiso zingangeza kalula impendulo yefomu eyinkimbinkimbi.
Sicela uqaphele ukuthi asincomi ukwenza lawa manani ngendlela oyifisayo ngaphandle kokuphinda ulungise i- form-validation-state
mixin.
Asikwazi ukuxazulula okuphukile border-radius
kwamaqembu okokufaka ngokuqinisekisa ngenxa yemikhawulo yesikhethi, ngakho-ke kuyadingeka ukubhala ngaphezulu mathupha. Uma usebenzisa iqembu lokufaka elijwayelekile futhi ungawenzi ngendlela oyifisayo amanani erediyasi yomngcele, engeza .rounded-right
kuma-elementi aphukile border-radius
.
Uma usebenzisa iqembu lokufakwayo elincane noma elikhulu noma uhlela border-radius
amanani azenzakalelayo, engeza i-CSS yangokwezifiso entweni nge-busted border-radius
.
Ukuze wenze ngokwezifiso nakakhulu kanye nokungaguquguquki kwesiphequluli, sebenzisa izici zethu zefomu elingokwezifiso ukuze umiselele okumisiwe kwesiphequluli. Akhelwe phezu kwemakhaphu ye-semantic nefinyelelekayo, ngakho angamiselela okuqinile kwanoma yikuphi ukulawulwa kwefomu okuzenzakalelayo.
Amabhokisi okuhlola namarediyo
<input>
Ibhokisi likaqhwishi ngalinye kanye nomsakazo <label>
nokumatanisa kusongwe ngo-a <div>
ukuze kudalwe ukulawula kwethu ngokwezifiso. Ngokwesakhiwo, le yindlela efanayo neyethu ezenzakalelayo .form-check
.
Sisebenzisa isikhethi esiyizelamani ( ~
) kuzo zonke <input>
izifundazwe zethu—njengo— :checked
ukwenza isitayela ngendlela efanele inkomba yethu yefomu langokwezifiso. Uma kuhlanganiswe .custom-control-label
nekilasi, singakwazi futhi isitayela umbhalo wento ngayinye ngokusekelwe esimweni <input>
sika.
Sifihla okuzenzakalelayo <input>
futhi opacity
sisebenzise .custom-control-label
ukwakha inkomba yefomu ngokwezifiso entsha endaweni yaso ::before
nge- ::after
. Ngeshwa asikwazi ukwakha engokwezifiso kusukela nje <input>
ngenxa yokuthi ama-CSS content
awasebenzi kuleyo nto.
Ezimweni ezihloliwe, sisebenzisa izithonjana ze-SVG ezishumekiwe ze-base64 ukusuka ku- Open Iconic . Lokhu kusinikeza ukulawula okungcono kakhulu kwesitayela nokubeka kuzo zonke iziphequluli namadivayisi.
Amabhokisi okuhlola
Amabhokisi okuhlola angokwezifiso angaphinda asebenzise :indeterminate
iklasi mbumbulu uma esethwe ngesandla nge-JavaScript (asikho isibaluli se-HTML esitholakalayo sokusicacisa).
Uma usebenzisa i-jQuery, into efana nalena kufanele yanele:
Imisakazo
Emugqeni
Ikhutshaziwe
Amabhokisi okuhlola angokwezifiso namarediyo kungaphinda kukhutshazwe. Engeza disabled
isibaluli se-boolean <input>
futhi inkomba yangokwezifiso nencazelo yelebula izokwenziwa isitayela ngokuzenzakalelayo.
Ukushintsha
Iswishi inomaka webhokisi lokuhlola langokwezifiso kodwa isebenzisa .custom-switch
ikilasi ukuze inikeze iswishi yokuguqula. Ukushintsha nakho kusekela disabled
isibaluli.
<select>
Amamenyu angokwezifiso adinga isigaba sangokwezifiso kuphela, ukuze .custom-select
aqalise izitayela zangokwezifiso. Izitayela ngokwezifiso zikhawulelwe <select>
ekubukekeni kokuqala futhi azikwazi ukushintsha u- <option>
s ngenxa yemikhawulo yesiphequluli.
Ungase futhi ukhethe kokukhethwa kukho okungokwezifiso okuncane nokukhulu ukufanisa okokufaka kwethu kosayizi ofanayo wombhalo.
Isibaluli multiple
naso siyasekelwa:
Njengesibaluli size
:
Ibanga
Dala <input type="range">
izilawuli ngokwezifiso nge- .custom-range
. Ithrekhi (ingemuva) nesithupha (inani) zombili zenziwe ngendlela yokuthi zibonakale zifana kuzo zonke iziphequluli. Njengoba kuphela i-IE neFirefox esekela “ukugcwalisa” ithrekhi yabo ukusuka kwesokunxele noma kwesokudla sesithupha njengendlela yokubonisa ngeso lengqondo inqubekelaphambili, asikusekeli okwamanje.
Okokufaka kobubanzi kunamanani asobala okuthi min
kanye max
- 0
kanye 100
, ngokulandelana. Ungacacisa amanani amasha kulabo abasebenzisa min
izibaluli max
.
Ngokuzenzakalela, okokufaka kobubanzi “kushintshela” kumanani ayinombolo. Ukuze ushintshe lokhu, ungacacisa step
inani. Esibonelweni esingezansi, siphinda kabili inani lezinyathelo ngokusebenzisa step="0.5"
.
Isiphequluli sefayela
I-plugin enconyiwe yokugqwayiza okokufaka kwefayela langokwezifiso: bs-custom-file-input , yilokho esikusebenzisa manje lapha kumadokhumenti ethu.
Okokufaka kwefayela kuyinqwaba yenqwaba futhi kudinga i-JavaScript eyengeziwe uma ungathanda ukuwahlanganisa nokusebenza Khetha ifayela... kanye nombhalo okhethiwe wegama lefayela.
Sifihla ifayela elizenzakalelayo <input>
ngokusebenzisa opacity
futhi esikhundleni salokho senze isitayela se- <label>
. Inkinobho ikhiqizwa futhi ibekwe nge- ::after
. Okokugcina, simemezela u-a width
kanye height
nesikhala <input>
esifanele sokuqukethwe okuzungezile.
Ukuhumusha noma ukwenza ngendlela oyifisayo uchungechunge nge-SCSS
Ikilasi :lang()
-mbumbulu lisetshenziselwa ukuvumela ukuhunyushwa kombhalo othi "Phequlula" kwezinye izilimi. Khipha noma engeza okufakiwe $custom-file-text
kokuhluka kwe-Sass ngomaka wolimi olufanele kanye neyunithi yezinhlamvu ezenziwe zasendaweni. Izintambo zesiNgisi zingenziwa ngendlela efanayo. Isibonelo, nansi indlela umuntu angangeza ngayo ukuhumusha kwesi-Spanish (ikhodi yolimi lwesi-Spanish ithi es
):
Nakhu lang(es)
okwenziwayo kokokufaka kwefayela langokwezifiso lokuhumusha kwe-Spanish:
Uzodinga ukusetha ulimi lwedokhumenti yakho (noma isihlahla esingaphansi) ngendlela efanele ukuze kuboniswe umbhalo olungile. Lokhu kungenziwa kusetshenziswa isibaluli sesici lang
noma<html>
unhlokweni we- Content-Language
HTTP , phakathi kwezinye izindlela.
Ukuhumusha noma ukwenza ngendlela oyifisayo uchungechunge nge-HTML
I-Bootstrap iphinde inikeze indlela yokuhumusha umbhalo othi "Phequlula" ku-HTML ngesibaluli esingangezwa data-browse
kulebula yokufaka yangokwezifiso (isibonelo ngesi-Dutch):