Lomakkeet

Esimerkkejä ja käyttöohjeet muodossa ohjaus tyylejä, layout vaihtoehtoja, ja mukautettuja komponentteja luoda erilaisia muotoja.

Overview

Bootstrap ’ s form controls laajentaa uudelleen käynnistettyjä muototyylejämme tunneilla. Käytä näitä luokkia valitaksesi niiden räätälöidyt näytöt johdonmukaisempaan renderointiin selaimissa ja laitteissa.

muista käyttää asianmukaista type attribuuttia kaikkiin syöttötietoihin (esim.,, email sähköposti-osoite tai number numeerinen tieto) hyödyntää uudempia input säätöjä, kuten sähköposti todentaminen, numeron valinta, ja enemmän.

tässä nopea esimerkki Bootstrapin muototyylien esittelystä. Jatka lukemista vaadituista luokista, lomakkeen asettelusta ja muista asiakirjoista.

Lomakkeen ohjausobjektit

muista tutustu mukautettuja lomakkeita edelleen tyyli <select>s.

tiedosto tuloa, swap .form-control for .form-control-file.,

Mitoitus

Aseta korkeuksia käyttäen luokkia, kuten .form-control-lg ja .form-control-sm.

Readonly

Lisää readonly boolean-attribuutin tulo estää muuttaminen tulo on arvoa. Vain luku-tulot näkyvät kevyempi (kuten vammaisten tuloa), mutta säilyttää vakio-osoitin.,

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly pelkkää tekstiä

Jos haluat olla <input readonly> – elementtejä muodossa tyylistä kuin tavallinen teksti, käyttää .form-control-plaintext class poistaa oletuksena lomakkeen kentän muotoilu ja säilyttää oikea marginaali ja täyte.

Alue Tuotantopanosten

Asettaa vaakasuunnassa vieritettävä alue tuotantopanoksia käyttäen .form-control-range.,

Valintaruudut ja radiot

Oletuksena valintaruudut ja radiot ovat parantaa avulla .form-check, yhden luokan sekä input tyypit, joka parantaa ulkoasua ja käyttäytymistä niiden HTML-elementtejä. Valintaruudut ovat yhden tai useamman vaihtoehdon valitsemiseen listassa, kun taas Radiot ovat yhden vaihtoehdon valitsemiseen monelta.

käytöstä poistettuja valintaruutuja ja radioita tuetaan. disabled attribuutti, sovelletaan vaaleampi väri auttaa osoittavat, tulon tila.,

valintaruudut ja radioiden käyttö on rakennettu tukemaan HTML-pohjaista lomakkeiden validointia ja tarjoamaan tiiviitä, esteettömiä etikettejä. Koska tällaiset, meidän <input>: n ja <label>s ovat sisarus elementtejä toisin kuin <input> sisällä <label>. Tämä on hieman pidempi kuin sinun on määritettävä id ja for määritteet liittyvät <input> ja <label>.,

Oletus (pinottu)

oletuksena, mikä tahansa määrä valintaruudut ja radiot, jotka ovat välittömästi sisarus on pinottu pystysuoraan ja tarkoituksenmukaisesti sijoitettu kanssa .form-check.

Inline

– Ryhmän valintaruudut tai radiot samalla vaakarivillä lisäämällä .form-check-inline mitään .form-check.,

Ilman tarroja

Lisää .position-static tuloihin sisällä .form-check että ei ole mitään etiketti. Muista silti antaa jonkinlainen etiketti avustavien teknologioiden (esimerkiksi käyttämällä aria-label).,

Ulkoasu

Koska Bootstrap koskee display: block ja width: 100% lähes kaikki lomakkeen ohjausobjekteja, lomakkeet ovat oletusarvoisesti pinota pystysuunnassa. Lisäluokkia voidaan käyttää tämän asettelun muuttamiseen lomakekohtaisesti.

Muodostaa ryhmiä

.form-group luokka on helpoin tapa lisätä joitakin rakenne muotoja. Se tarjoaa joustavan luokan, joka kannustaa etikettien, hallintalaitteiden, valinnaisen ohjetekstin ja validointiviestien asianmukaiseen ryhmittelyyn., Oletuksena se koskee vain margin-bottom, mutta se poimii muita tyylejä .form-inline tarvittaessa. Käyttää sitä <fieldset>s <div>s, tai lähes mikä tahansa muu elementti.

Muodossa verkkoon

monimutkaisempia muotoja voidaan rakentaa käyttämällä grid luokat. Käytä näitä lomakkeisiin, jotka vaativat useita sarakkeita, vaihtelevia leveyksiä ja muita linjausvaihtoehtoja.,

Lomakkeen rivi

Voit myös vaihtaa .row for .form-row vaihtelu standard grid rivi, joka ohittaa oletuksena sarake vesikourut tiukempaa ja enemmän kompakti ulkoasuja.

monimutkaisempia asetteluja voidaan luoda myös ruutujärjestelmällä.

Horisontaalinen muoto

Luo vaaka-lomakkeita verkkoon lisäämällä .row luokka muodostaa ryhmiä ja käyttää .col-*-* luokat määritä leveys tarrat ja valvontaa., Muista lisätä .col-form-label oman <label>s kuin hyvin, joten he ovat vertikaalisesti keskitetty ja niihin liittyvät lomakkeen ohjausobjektit.

joskus, sinun täytyy ehkä käyttää marginaali tai pehmuste apuohjelmia luoda täydellinen linjaus tarvitset. Esimerkiksi, olemme poistaneet padding-top meidän pinottu radio tulot label paremmin kohdista teksti perusviivan.,

Vaaka-muodossa etiketti mitoitus

Sarake mitoitus

Kuten edellisissä esimerkeissä, meidän grid-järjestelmän avulla voit sijoittaa minkä tahansa määrän .cols sisällä .row tai .form-row. Ne jakavat käytettävissä olevan leveyden tasan niiden välillä. Voit myös valita osajoukko sarakkeet vievät enemmän tai vähemmän tilaa, kun taas loput .cols yhtä split muut, joilla on erityisiä sarake luokat, kuten .col-7.,

Auto-mitoitus

alla olevassa esimerkissä käytetään flexbox apuohjelma pystysuunnassa keskelle sisältö ja muutokset .col ja .col-auto niin, että sarakkeet vain vievät niin paljon tilaa kuin tarvitaan. Toisin sanoen, sarake kokoa itse sisällön perusteella.

Voit sitten remix, että jälleen kerran koko-erityinen sarake luokat.

ja tietenkin mukautetut muotosäätimet ovat tuettuja.,

Inline muotoja

Käyttö .form-inline luokka näyttää sarjan tarroja, lomakkeen ohjausobjektit ja painikkeet yhdellä vaakarivillä. Muotosäätimet inline-lomakkeiden sisällä vaihtelevat hieman niiden oletustiloista.

• säädöt ovat display: flex, romahtamassa tahansa HTML-valkoinen tilaa ja jonka avulla voit säätää tasaus ohjaus väli ja flexbox utilities.
• Ohjaa ja syöttää ryhmät saavat width: auto ohittaa oletuksena Bootstrap width: 100%.,
• säädöt näkyvät vain inline vuonna näkymäikkunoissa, jotka ovat vähintään 576px laaja tilille kapea viewports mobiililaitteissa.

Voit joutua manuaalisesti osoite, leveys ja linjaus yksittäisten lomakkeen ohjausobjektit väli apuohjelmia (kuten kuvassa alla). Lopuksi, muista aina sisällyttää <label> jokaisen lomakkeen ohjausobjekti, vaikka sinun täytyy piilottaa sen ei-näytönlukuohjelmien kävijöille .sr-only.

mukautetut muotosäätimet ja valikoinnit ovat myös tuettuja.,

Ohje

Lohko-tason auttaa tekstin muotoja voidaan luoda käyttämällä .form-text (aiemmin tunnettu nimellä .help-block v3). Inline help text voidaan toteuttaa joustavasti millä tahansa inline HTML-elementillä ja hyödyllisyysluokilla, kuten .text-muted.,

Auttaa tekstin alla tuloa voidaan tyylistä .form-text. Tämä luokka sisältää display: block ja lisää joitakin alkuun marginaali helppo väli päässä tulot edellä.,

Inline tekstiä voi käyttää mitä tahansa tyypillisiä inline HTML-elementti (oli se <small>, <span>, tai jotain muuta) kanssa mitään muuta kuin utility luokassa.

ei Käytössä lomakkeet

Lisää disabled boolean-attribuutin tulo estää käyttäjän vuorovaikutusta ja tehdä se näyttää kevyempi.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Lisää disabled määrite <fieldset> poistaa kaikki tarkastukset kuluessa.

Validointi

Tarjota arvokasta, käytännöllisiä palautetta käyttäjille HTML5 muodossa validointi–saatavilla kaikki tuetut selaimet. Valitse selaimen oletuspalaute tai toteuta mukautettuja viestejä sisäänrakennetuilla luokilla ja käynnistin JavaScript.,

Kuinka se toimii

Tässä on, miten lomake validointi toimii Bootstrap:

• HTML muodossa validointi on sovellettu kautta CSS on kaksi pseudo-luokat, :invalid ja :valid. Se koskee <input>, <select> ja <textarea> elementit.,
• Bootstrap laajuuksia :invalid ja :valid tyylejä vanhempi .was-validated luokka, yleensä sovellettu <form>. Muussa tapauksessa vaadittu kenttä ilman arvoa näkyy virheellisenä sivun kuormituksessa. Näin voit valita, milloin ne aktivoidaan (tyypillisesti lomakkeen lähettämisen jälkeen yritetään).
• nollaa ulkonäkö muoto (esimerkiksi, kun kyseessä on dynaaminen lomakkeen lähettämistä AJAX), poista .was-validated class <form> taas jättämisen jälkeen.,
• varalla, .is-invalid ja .is-valid luokkia voidaan käyttää sen sijaan pseudo-luokat palvelimen puolella validointi. Ne eivät vaadi .was-validated vanhemman luokan.
• rajoitteista Johtuen, miten CSS toimii, emme voi (tällä hetkellä) käytä tyylejä <label>, joka tulee ennen lomakkeen ohjausobjekti DOM ilman apua mukautettuja JavaScript.
• Kaikki modernit selaimet tukevat constraint validation API, useita JavaScript-menetelmien validointi muodossa valvontaa.,
• Palaute-viestejä voi käyttää selaimen oletusasetukset (eri kunkin selaimen, ja unstylable kautta CSS) tai meidän oma palaute tyylejä ylimääräisiä HTML ja CSS.
• Voit tarjota mukautettuja voimassaolo viestejä setCustomValidity JavaScript.

tässä mielessä, harkitse seuraavia demoja varten muokatussa muodossa validointi tyylejä, valinnainen palvelimen puolella luokat, ja selaimen oletusasetukset.,

Mukautettuja tyylejä

custom Bootstrap muodossa validointi viestejä, sinun täytyy lisätä novalidate boolean-määritteen <form>. Tämä poistaa selaimen oletuspalautetyökalut, mutta tarjoaa silti pääsyn lomakkeen validointi-APIs JavaScript. Yritä lähettää alla oleva lomake; JavaScript pysäyttää Lähetä-painiketta ja välittää palautetta sinulle. Kun yrität lähettää, näet :invalid ja :valid tyylejä soveltaa oman lomakkeen ohjausobjektit.,

Custom feedback styles soveltaa mukautettuja värejä, rajoja, focus tyylejä, ja tausta kuvakkeet paremmin kommunikoida palautetta. Tausta kuvakkeet <select>s ovat käytettävissä vain .custom-select, ei .form-control.

Selaimen oletusasetukset

Ole kiinnostunut custom validointi palautetta viestejä tai kirjoittaa JavaScript muuttaa lomakkeen käyttäytymistä? Kaikki hyvin, voit käyttää selaimen oletusarvoja. Kokeile alla olevan lomakkeen lähettämistä. Selaimesta ja käyttöjärjestelmästä riippuen palautetyyli on hieman erilainen.,

Vaikka nämä palaute tyylejä voi olla tyylistä CSS, voit silti muokata palautetta tekstin kautta JavaScript.

Palvelimen puolella

suosittelemme, että käytät client-side validointi, mutta jos tarvitset server-side validointi, voit ilmoittaa virheellinen ja voimassa lomakkeen kentät .is-invalid ja .is-valid. Huomaa, että .invalid-feedback on myös tuettu nämä luokat.,

Tuetut elementit

Validointi tyylit ovat saatavilla seuraavassa muodossa valvontaa ja komponentteja.

Tietoja

Jos lomakkeen ulkoasu mahdollistaa sen, voit vaihtaa .{valid|invalid}-feedback luokat .{valid|invalid}-tooltip luokat näyttö validointi palautetta tyylistä tooltip. Varmista, että sinulla on vanhempi, jossa on position: relative, tooltip-paikannusta varten. Alla olevassa esimerkissä kolumniluokillamme on tämä jo, mutta projektisi voi vaatia vaihtoehtoisen asennuksen.,

Mukauttaminen

Validointi valtiot voidaan räätälöidä kautta Sass, jossa $form-validation-states kartta. Sijaitsee meidän _variables.scss tiedosto, tämä Sass kartta on liu ’ utetaan yli tuottaa oletuksena valid/invalid validointi valtiot. Mukana on sisäkkäinen kartta kunkin valtion värin ja kuvakkeen muokkaamiseen. Vaikka selaimet eivät tue muita valtioita, mukautettuja tyylejä käyttävät voivat helposti lisätä monimutkaisempaa muotopalautetta.,

huomaa, että emme suosittele räätälöintiä nämä arvot ilman myös muuttaa form-validation-state mixin.

Mukautetut lomakkeet

vielä enemmän räätälöinnin ja rajat selaimen johdonmukaisuus, käytä täysin custom form elements korvata selaimen oletusasetukset. Ne ovat rakennettu päälle semanttinen ja helposti markup, joten ne ovat kiinteitä korvaavia tahansa default muodossa valvontaa.,

Valintaruudut ja radiot

Jokainen valintaruutu ja radio <input> ja <label> pariliitos on kääritty <div> luoda mukautetun ohjaus. Rakenteellisesti tämä on sama lähestymistapa kuin oletus .form-check.

käytämme sisarus-valitsin (~) kaikille <input> maat—kuten :checked—oikein tyyliin meidän mukautetun lomakkeen indikaattori., Kun yhdistetään .custom-control-label luokan, voimme myös muotoilla tekstiä kunkin kohteen, joka perustuu <input>’s-tilassa.

Me piilottaa oletuksena <input> opacity ja käyttää .custom-control-label jos haluat luoda uuden mukautetun lomakkeen indikaattori sen paikka, jossa ::before ja ::after. Valitettavasti emme voi rakentaa mukautetun yksi vain <input> koska CSS on content ei toimi, että elementti.,

tarkastetuissa valtioissa käytämme Base64-upotettuja SVG-kuvakkeita avoimesta ikonista. Tämä tarjoaa meille parhaan ohjauksen muotoiluun ja paikannukseen selaimissa ja laitteissa.

Valintaruudut

Custom valintaruudut voidaan myös käyttää :indeterminate pseudo-luokka, kun asettaa manuaalisesti kautta JavaScript (ei saatavilla HTML-attribuutti määrittää sen).,

Jos käytät jQuery, jotain tällaista pitäisi riittää:

$('.your-checkbox').prop('indeterminate', true)

Radiot

Inline

ei Käytössä

Custom valintaruudut ja radiot voidaan myös poistaa., Lisää disabled boolean attribuutti <input> ja custom-ilmaisin ja etiketti kuvaus tulee automaattisesti tyylistä.

Siirtyy

kytkin on markup mukautetun valintaruutu mutta käyttää .custom-switch luokan tehdä kytkin. Kytkimet tukevat myösdisabled – attribuuttia.,

Valitse valikko

Mukautettu <select> valikot tarvitsee vain mukautetun luokan, .custom-select laukaista mukautettuja tyylejä. Mukautettuja tyylejä on rajoitettu <select>’s alkuperäisen ulkoasun ja voi muuttaa <option>s, koska selaimen rajoituksia.

saatat myös valitse pienistä ja iso custom valitsee, sovittaa vastaavasti kokoinen teksti tulot.,

multiple ominaisuus on myös tuettu:

Kuten size attribuutti:

Alue

Luo mukautettuja <input type="range"> valvonta .custom-range. Kappaleet (tausta) ja peukalo (arvo) on molemmat tyylitelty näyttämään samalta selaimissa. Koska vain IE ja Firefox support ”täyte” heidän kappaleen vasen tai oikea peukalo keinona edistymisen visuaalisesti, emme tällä hetkellä tue sitä.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs ”snap” to integer values., Tämän muuttamiseksi voit määrittää step – arvon. Alla olevassa esimerkissä kaksinkertaistamme askelmäärän käyttämällä step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

Tiedoston selaimen

tiedosto tulo on kaikkein kamala nippu ja vaatii lisää JavaScript, jos haluat kytkeä niitä, joilla on toiminnallinen Valitse tiedosto… ja valitun tiedoston nimi teksti.

Me piilottaa oletuksena tiedosto <input> kautta opacity ja sen sijaan tyyli <label>. Painike luodaan ja sijoitetaan ::after. Lopuksi, me julistamme width ja height ja <input> oikea väli ympäröivän sisältöä.,

Kääntäminen tai muokkaamalla jouset kanssa SCSS

:lang() pseudo-luokka on käytössä, jotta käännös ”Selaa” – tekstiä muille kielille. Ohittaa tai lisätä merkintöjä $custom-file-text Sass muuttuja, jolla asianomaisen kielen tag ja lokalisoidut merkkijonot. Englanti jouset voidaan räätälöidä samalla tavalla., Esimerkiksi, tässä on, miten yksi voi lisää espanja käännös (espanjan kieli koodi es):

$custom-file-text: ( en: "Browse", es: "Elegir");

Tässä on lang(es) toiminta mukautetun tiedoston input espanjan käännös:

Sinun täytyy asettaa kielen asiakirjan (tai alipuun sen) oikein, jotta oikea näytettävä teksti., Tämä voidaan tehdä käyttämällä lang määrite <html> – elementti tai Content-Language HTTP-header, joukossa muita menetelmiä.

Kääntäminen tai muokkaamalla jouset HTML

Bootstrap tarjoaa myös keinon kääntää ”Selaa” – teksti, HTML data-browse attribuutti, joka voidaan lisätä custom input label (esimerkiksi hollanti):