Vormi juhtimisstiilide, paigutussuvandite ja kohandatud komponentide näited ja kasutusjuhised mitmesuguste vormide loomiseks.
Ülevaade
Bootstrapi vormijuhtelemendid laiendavad klasside abil taaskäivitatud vormistiile. Kasutage neid klasse nende kohandatud kuvade valimiseks, et muuta brauserites ja seadmetes ühtsem renderdus.
typeKasutage kõigis sisendites (nt emaile-posti aadressi või numbrilise teabe jaoks) kindlasti sobivat atribuuti, numberet kasutada ära uuemaid sisendi juhtelemente, nagu e-posti kinnitamine, numbrivalik ja palju muud.
Siin on kiire näide Bootstrapi vormistiilide demonstreerimiseks. Lugege edasi dokumente vajalike klasside, vormide paigutuse ja muu kohta.
Vormi juhtelemendid
Tekstivormide juhtelemendid, nagu <input>s, <select>s ja <textarea>s, on kujundatud koos .form-controlklassiga. Kaasatud on stiilid üldise välimuse, fookuse oleku, suuruse ja muu jaoks.
Stiili täiendamiseks uurige kindlasti meie kohandatud vorme<select> .
Failisisendite jaoks vahetage .form-controlvastu .form-control-file.
Suuruse määramine
Määrake kõrgused selliste klasside abil nagu .form-control-lgja .form-control-sm.
Loe ainult
Lisage readonlysisendile Boolean atribuut, et vältida sisendi väärtuse muutmist. Kirjutuskaitstud sisendid näivad heledamad (nagu keelatud sisendid), kuid säilitavad standardse kursori.
Ainult kirjutuskaitstud lihttekst
Kui soovite, et <input readonly>vormi elemendid oleksid laaditud lihttekstina, kasutage .form-control-plaintextklassi, et eemaldada vormivälja vaikestiil ning säilitada õige veeris ja polster.
Vahemiku sisendid
Seadistage horisontaalselt keritavad vahemiku sisendid, kasutades .form-control-range.
Märkeruudud ja raadiod
Vaikimisi märkeruudud ja raadiod on täiustatud mõlema sisenditüübi jaoks ühe klassi abil .form-check, mis parandab nende HTML-elementide paigutust ja käitumist . Märkeruudud on mõeldud loendis ühe või mitme valiku valimiseks, raadiod aga ühe valiku valimiseks paljude hulgast.
Toetatud on keelatud märkeruudud ja raadiod. Atribuut disabledrakendab sisendi oleku näitamiseks heledamat värvi.
Märkeruudud ja raadionupud toetavad HTML-põhist vormide valideerimist ja pakuvad sisutihedaid, juurdepääsetavaid silte. Sellisena on meie <input>s ja <label>s vend-elemendid, mitte <input>sees olevad elemendid <label>. See on pisut üksikasjalikum, kuna peate määrama idja foratribuudid, et seostada <input>ja <label>.
Vaikimisi (virnastatud)
Vaikimisi paigutatakse suvaline arv märkeruutusid ja raadiosid, mis on otsene vend, vertikaalselt virnastatud ja sobivate vahedega .form-check.
Järjekorras
Grupeerige märkeruudud või raadiod samale horisontaalsele reale, lisades .form-check-inlineneed mis tahes .form-check.
Ilma siltideta
Lisa .position-staticsisenditele, .form-checkmillel pole sildi teksti. aria-labelÄrge unustage abitehnoloogiate (nt kasutades ) jaoks ikkagi mingit sildi vormingut .
Paigutus
Kuna Bootstrap rakendub peaaegu kõigile meie vormi juhtelementidele, virnastatakse vorme vaikimisi vertikaalselt display: block. width: 100%Selle paigutuse muutmiseks vormipõhiselt saab kasutada täiendavaid klasse.
Moodustage rühmad
Klass .form-groupon lihtsaim viis vormidele struktuuri lisamiseks. See pakub paindlikku klassi, mis julgustab siltide, juhtelementide, valikulise abiteksti ja vormi kinnitamise sõnumite õiget rühmitamist. Vaikimisi kehtib see ainult margin-bottom, kuid .form-inlinevajadusel valib see täiendavaid stiile. Kasutage seda <fieldset>s, <div>s või peaaegu mis tahes muu elemendiga.
Vormi ruudustik
Meie ruudustikuklasside abil saab ehitada keerukamaid vorme. Kasutage neid vormipaigutuste jaoks, mis nõuavad mitut veergu, erinevat laiust ja täiendavaid joondussuvandeid.
Vormi rida
Võite vahetada .rowka .form-rowmeie standardse ruudustikurea variandi vastu, mis alistab vaikeveergude vihmaveerennid tihedama ja kompaktsema paigutuse saamiseks.
Võresüsteemiga saab luua ka keerukamaid paigutusi.
Horisontaalne vorm
Looge ruudustikuga horisontaalseid vorme, lisades .rowklassi rühmadesse ja kasutades .col-*-*klasse oma siltide ja juhtelementide laiuse määramiseks. Lisage kindlasti ka .col-form-labeloma <label>s-i, et need oleksid vertikaalselt keskel koos nendega seotud vormi juhtelementidega.
Mõnikord peate vajaliku täiusliku joonduse loomiseks kasutama veerise või polsterduse utiliite. Näiteks eemaldasime padding-topvirnastatud raadiosisendite sildi, et teksti lähtejoont paremini joondada.
Horisontaalne vormisildi suurus
Kasutage kindlasti .col-form-label-smvõi .col-form-label-lgoma <label>s või <legend>s, et järgida õigesti ja .form-control-lgsuurust .form-control-sm.
Veeru suuruse määramine
Nagu on näidatud eelmistes näidetes, võimaldab meie ruudustikusüsteem paigutada suvalise arvu .cols-i a .rowvõi .form-row. Nad jagavad saadaoleva laiuse nende vahel võrdselt. Võite valida ka veergude alamhulga, mis võtaks rohkem või vähem ruumi, samal ajal kui ülejäänud veerud .coljagavad ülejäänud võrdselt teatud veeruklassidega, näiteks .col-7.
Automaatne suuruse määramine
Allolev näide kasutab flexboxi utiliiti sisu vertikaalseks tsentreerimiseks ja muudab .colseda .col-autonii, et veerud võtaksid ainult nii palju ruumi, kui vaja. Teisisõnu, veeru suurus põhineb sisul.
Seejärel saate seda uuesti miksida suurusespetsiifiliste veeruklassidega.
Kasutage .form-inlineklassi siltide, vormi juhtelementide ja nuppude seeria kuvamiseks ühel horisontaalsel real. Vormide juhtelemendid tekstisiseses vormis erinevad veidi nende vaikeolekutest.
Juhtelemendid on display: flex, ahendavad kõik HTML-i tühikud ja võimaldavad teil pakkuda joondusjuhtimist vahekauguste ja paindlike kasti utiliitidega.
Juhtelemendid ja sisendrühmad saavad width: autoBootstrapi vaikeväärtuse alistada width: 100%.
Juhtelemendid kuvatakse tekstisiseselt ainult vaateavades, mille laius on vähemalt 576 pikslit , et võtta arvesse kitsaid vaateavasid mobiilseadmetes.
Võimalik, et peate käsitsi lahendama üksikute vormi juhtelementide laiuse ja joondamise ruumivaheutiliitidega (nagu allpool näidatud). Lõpuks lisage alati <label>iga vormi juhtelemendi juurde tähis, isegi kui peate selle peitma kasutajate eest, kes ei kasuta ekraanilugejat .sr-only.
Toetatud on ka kohandatud vormi juhtelemendid ja valikud.
Alternatiivid peidetud siltidele
Abitehnoloogiatel, näiteks ekraanilugejatel, on teie vormidega probleeme, kui te ei lisa igale sisendile silti. Nende tekstisiseste vormide puhul saate .sr-onlyklassi abil sildid peita. Abitehnoloogiate märgistamiseks on veel alternatiivseid meetodeid, näiteks atribuut aria-label, aria-labelledbyvõi titleatribuut. Kui ükski neist pole olemas, võivad abitehnoloogiad kasutada placeholderatribuuti, kui see on olemas, kuid pidage meeles, et placeholderseda ei soovitata kasutada muude märgistamismeetodite asendajana.
Abitekst
Plokitaseme abiteksti vormides saab luua kasutades .form-text(varem tuntud kui .help-blockv3). Tekstisisest abiteksti saab paindlikult rakendada, kasutades mis tahes tekstisiseseid HTML-elemente ja utiliidiklasse, näiteks .text-muted.
Abiteksti seostamine vormi juhtelementidega
Abitekst peaks olema selgesõnaliselt seotud vormi juhtelemendiga, millega see aria-describedbyatribuudi kasutamisega seotud on. See tagab, et abitehnoloogiad (nt ekraanilugejad) teavitavad sellest abitekstist, kui kasutaja keskendub või juhtnupule siseneb.
Allolevate sisendite abiteksti saab stiilida .form-text. See klass sisaldab display: blockja lisab veidi ülemist veerist, et ülaltoodud sisenditest oleks lihtne vahemaa teha.
Teie parool peab olema 8–20 tähemärgi pikkune, sisaldama tähti ja numbreid ning ei tohi sisaldada tühikuid, erimärke ega emotikone.
Tekstisisene tekst võib kasutada mis tahes tüüpilist tekstisisest HTML-elementi (olgu see siis <small>, <span>, või midagi muud), millel pole muud kui utiliidiklassi.
Puudega vormid
Lisage disabledsisendile Boolean atribuut, et vältida kasutaja interaktsioone ja muuta see heledamaks.
Lisage disabledatribuut atribuudile a <fieldset>, et keelata kõik selles olevad juhtelemendid.
Hoiatus ankrutega
Vaikimisi käsitlevad brauserid kõiki a-s olevaid vormijuhtelemente ( <input>ja elemente) keelatuna <select>, vältides nii klaviatuuri kui ka hiire interaktsioone. Kui aga teie vorm sisaldab ka elemente, antakse neile ainult stiil . Nagu on märgitud nuppude keelatud olekut käsitlevas jaotises (ja eriti ankurelementide alamjaotises), ei ole see CSS-i atribuut veel standarditud ega ole Internet Explorer 10-s täielikult toetatud ning see ei takista klaviatuurikasutajatel suudab neid linke fokuseerida või aktiveerida. Nii et turvalisuse huvides kasutage selliste linkide keelamiseks kohandatud JavaScripti.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
Brauseriülene ühilduvus
Kuigi Bootstrap rakendab neid stiile kõigis brauserites, ei toeta Internet Explorer 11 ja vanemad disabledatribuuti täielikult <fieldset>. Kasutage kohandatud JavaScripti väljakomplekti keelamiseks nendes brauserites.
Kinnitamine
Andke oma kasutajatele väärtuslikku ja kasulikku tagasisidet HTML5 vormi valideerimisega – see on saadaval kõigis meie toetatud brauserites . Valige brauseri vaikevalideerimise tagasiside hulgast või rakendage kohandatud sõnumeid meie sisseehitatud klasside ja käivitava JavaScriptiga.
Soovitame praegu kasutada kohandatud valideerimisstiile, kuna brauseri vaikevalideerimissõnumid ei ole kõigis brauserites (eelkõige Chrome'is lauaarvutites ja mobiilseadmetes) järjekindlalt kokku puutunud abitehnoloogiatega.
Kuidas see töötab
Vormi valideerimine Bootstrapiga toimib järgmiselt.
HTML-vormingu valideerimist rakendatakse CSS-i kahe pseudoklassi :invalidja :valid. See kehtib <input>, <select>, ja <textarea>elementide kohta.
Bootstrap ulatub :invalidja :validstiilid .was-validatedülemklassile, mida tavaliselt rakendatakse <form>. Vastasel juhul kuvatakse kõik ilma väärtuseta kohustuslikud väljad lehe laadimisel kehtetutena. Nii saate valida, millal need aktiveerida (tavaliselt pärast vormi esitamise katset).
Vormi välimuse lähtestamiseks (näiteks dünaamiliste vormide esitamise korral AJAX-i abil) eemaldage .was-validatedklass <form>pärast esitamist uuesti.
Tagavarana võib serveripoolseks valideerimiseks.is-invalid pseudoklasside asemel .is-validkasutada klasse . Nad ei nõua vanemate klassi..was-validated
CSS-i toimimise piirangute tõttu ei saa me (praegu) <label>ilma kohandatud JavaScripti abita rakendada stiile DOM-is enne vormijuhtelementi.
Kõik kaasaegsed brauserid toetavad piirangute valideerimise API -d , mis on JavaScripti meetodite seeria vormi juhtelementide kinnitamiseks.
Tagasisidesõnumid võivad kasutada brauseri vaikeseadeid (iga brauseri puhul erinevad ja CSS-i kaudu stiilivabad) või meie kohandatud tagasisidestiile koos täiendava HTML-i ja CSS-iga.
Saate esitada kohandatud kehtivussõnumeid setCustomValidityJavaScriptis.
Seda silmas pidades kaaluge meie kohandatud vormide valideerimisstiilide, valikuliste serveripoolsete klasside ja brauseri vaikeseadete jaoks järgmisi demosid.
Kohandatud stiilid
Kohandatud Bootstrapi vormi valideerimissõnumite jaoks peate lisama novalidatetõeväärtuse atribuudi oma <form>. See keelab brauseri vaiketagasiside tööriistavihjed, kuid annab siiski juurdepääsu JavaScripti vormi valideerimise API-dele. Proovige esitada allolev vorm; meie JavaScript peatab saatmisnupu ja edastab teile tagasisidet. Kui proovite esitada, näete vormi juhtelementidele rakendatud stiile :invalidja .:valid
Kohandatud tagasiside stiilid rakendavad tagasiside paremaks edastamiseks kohandatud värve, ääriseid, fookusstiile ja taustaikoone. Taustaikoonid <select>s jaoks on saadaval ainult .custom-select, kuid mitte .form-control.
Brauseri vaikeseaded
Kas te pole huvitatud kohandatud valideerimise tagasiside sõnumitest või JavaScripti kirjutamisest, et muuta vormi käitumist? Kõik hea, saate kasutada brauseri vaikeseadeid. Proovige esitada allolev vorm. Sõltuvalt teie brauserist ja OS-ist näete veidi erinevat tagasisidestiili.
Kuigi neid tagasiside stiile ei saa CSS-iga kujundada, saate siiski JavaScripti kaudu tagasiside teksti kohandada.
Serveri pool
Soovitame kasutada kliendipoolset valideerimist, kuid kui vajate serveripoolset valideerimist, saate kehtetud ja kehtivatele vormiväljadele märkida .is-invalidja .is-valid. Pange tähele, et .invalid-feedbackseda toetatakse ka nende klassidega.
Toetatud elemendid
Valideerimisstiilid on saadaval järgmiste vormi juhtelementide ja komponentide jaoks.
<input>s ja <textarea>s koos .form-control(sh kuni üks .form-controlsisendrühmades)
<select>s koos .form-controlvõi.custom-select
.form-checks
.custom-checkboxs ja .custom-radios
.custom-file
Tööriistanõuanded
Kui teie vormipaigutus seda võimaldab, saate vahetada .{valid|invalid}-feedbackklassid .{valid|invalid}-tooltipklasside vastu, et kuvada stiilis kohtspikris valideerimise tagasisidet. position: relativeTööriistavihje positsioneerimiseks kasutage seda kindlasti lapsevanemal . Allolevas näites on see meie veeruklassidel juba olemas, kuid teie projekt võib vajada alternatiivset seadistust.
Kohandamine
Valideerimisolekuid saab Sassi kaudu $form-validation-stateskaardiga kohandada. See meie failis asuv _variables.scssSassi kaart on vaike- valid/ invalidvalideerimisolekute genereerimiseks silmusel. Kaasas on pesastatud kaart iga osariigi värvi ja ikooni kohandamiseks. Kuigi brauserid ei toeta ühtegi teist olekut, saavad kohandatud stiilide kasutajad hõlpsasti lisada keerukama vormi tagasisidet.
Pange tähele, et me ei soovita neid väärtusi kohandada ilma ka form-validation-statemixini muutmata.
Kohandatud vormid
Veelgi suurema kohandamise ja brauseriülese järjepidevuse saavutamiseks kasutage brauseri vaikeseadete asendamiseks meie täielikult kohandatud vormielemente. Need on üles ehitatud semantilisele ja juurdepääsetavale märgistusele, nii et need asendavad tugevalt kõiki vaikevormi juhtelemente.
Märkeruudud ja raadiod
Iga märkeruut ja raadio <input>ja <label>sidumine on ümbritsetud märgiga, <div>et luua meie kohandatud juhtelement. Struktuuriliselt on see sama lähenemisviis, mis meie vaikeseade .form-check.
Kasutame ~kõigi oma <input>olekute jaoks vendade valijat ( ) :checkedkohandatud vormi indikaatori õigeks stiiliks. Klassiga kombineerituna .custom-control-labelsaame iga üksuse teksti <input>oleku alusel ka stiilida.
Peidame vaikeväärtuse <input>ja opacitykasutame .custom-control-labelselle asemele uue kohandatud vormi indikaatori loomiseks ::beforeja ::after. Kahjuks ei saa me ainult selle elemendi põhjal kohandatud luua, <input>kuna CSS-id contentselle elemendiga ei tööta.
Märgitud olekus kasutame Base64 manustatud SVG ikoone Open Iconicult . See annab meile parima juhtimise stiili ja positsioneerimise üle brauserites ja seadmetes.
Märkeruudud
Kohandatud märkeruudud võivad kasutada ka :indeterminatepseudoklassi, kui need on käsitsi määratud JavaScripti kaudu (selle määramiseks pole saadaval HTML-i atribuuti).
Kui kasutate jQueryt, peaks piisama sellisest:
Raadiod
Järjekorras
Keelatud
Kohandatud märkeruudud ja raadiod saab ka keelata. Lisage disabledboolean atribuut <input>ja kohandatud indikaator ja sildi kirjeldus kujundatakse automaatselt.
Lülitid
Lülitil on kohandatud märkeruudu märgistus, kuid see kasutab .custom-switchlülituslüliti renderdamiseks klassi. disabledAtribuuti toetavad ka lülitid .
Valige menüü
Kohandatud <select>menüüd vajavad .custom-selectkohandatud stiilide käivitamiseks ainult kohandatud klassi. Kohandatud stiilid on piiratud algse välimusega ja brauseri piirangute tõttu <select>ei saa neid muuta .<option>
Samuti saate valida väikeste ja suurte kohandatud valikute hulgast, et need sobiksid meie sarnase suurusega tekstisisestustega.
Atribuuti multipletoetatakse ka:
Nagu sizeatribuut:
Vahemik
Looge kohandatud <input type="range">juhtelemente rakendusega .custom-range. Rada (taust) ja pöial (väärtus) on kujundatud nii, et need paistaksid kõigis brauserites ühesugused. Kuna ainult IE ja Firefox toetavad oma raja "täitmist" pöidla vasakult või paremalt, et visuaalselt edenemist näidata, ei toeta me seda praegu.
Vahemiku sisenditel on kaudsed väärtused vastavalt minja max— 0ja 100. Saate määrata uued väärtused neile, kes kasutavad atribuute minja .max
Vaikimisi sisestavad vahemiku sisendid täisarvu väärtustele. Selle muutmiseks saate määrata stepväärtuse. Allolevas näites kahekordistame sammude arvu, kasutades step="0.5".
Failibrauser
Soovitatav pistikprogramm kohandatud failisisendi animeerimiseks: bs-custom-file-input , seda me praegu siin oma dokumentides kasutame.
Failisisend on kõige räigeim ja nõuab täiendavat JavaScripti, kui soovite ühendada need funktsionaalse Vali fail… ja valitud failinime tekstiga.
Peidame vaikefaili <input>kaudu opacityja laadime selle asemel <label>. Nupp genereeritakse ja asetatakse koos ::after. Lõpuks deklareerime ümbritseva sisu jaoks õigete vahedega a widthja .height<input>
Stringide tõlkimine või kohandamine SCSS-iga
Pseudoklassi :lang()kasutatakse "Sirvi" teksti tõlkimiseks teistesse keeltesse. $custom-file-textAlistage või lisage Sassi muutuja kirjed asjakohase keelesildi ja lokaliseeritud stringidega. Ingliskeelseid stringe saab kohandada samal viisil. Näiteks saate hispaaniakeelse tõlke lisada järgmiselt (hispaania keele kood on es):
Siin lang(es)toimib hispaaniakeelse tõlke kohandatud failisisend: