Lomakkeet

Esimerkkejä ja käyttöohjeita lomakkeiden hallinta-tyylistä, asetteluvaihtoehdoista ja mukautetuista komponenteista monenlaisten lomakkeiden luomiseen.

Yleiskatsaus

Bootstrapin lomakeohjaimet laajentavat uudelleenkäynnistettyjä lomaketyylejä luokkiin. Näiden luokkien avulla voit valita räätälöidyt näytöt, jotta renderöinti on tasaisempaa selaimissa ja laitteissa.

Muista käyttää asianmukaista type -attribuuttia kaikissa tuloissa (esim. , email sähköpostiosoitteelle tai number numeerisille tiedoille) hyödyntämään uudempia syöttöohjaimia, kuten sähköpostivahvistusta, numerovalintaa ja muuta.

Tässä on nopea esimerkki Bootstrapin muototyylien esittelemisestä. Jatka vaadittujen luokkien, lomakkeiden asettelun ja muun dokumentaation lukemista.

Lomakkeen ohjausobjektit

Muista tutkia mukautettuja lomakkeitamme tyylin lisäämiseksi <select> s.

Vaihda tiedostotuloille .form-control kohteeksi .form-control-file.

Mitoitus

Aseta korkeudet käyttämällä luokkia, kuten .form-control-lg ja .form-control-sm.

Vain luku

Lisää readonly looginen attribuutti syötteessä estämään syötteen arvon muuttamista. Vain luku -tulot näyttävät kevyemmiltä (aivan kuten käytöstä poistetut tulot), mutta ne säilyttävät vakiokohdistimen.

Vain lukuteksti

Jos haluat, että lomakkeesi <input readonly> -elementit on muotoiltu pelkkänä tekstinä, käytä .form-control-plaintext class poistaa lomakekentän oletustyylin ja säilyttää oikean marginaalin ja täytteen.

Valintaruudut ja radiot

Oletus valintaruutuja ja radioita parannetaan .form-check -sovelluksen avulla, joka on yksi luokka molemmille syötetyypeille, mikä parantaa niiden HTML-elementtien asettelua ja käyttäytymistä. Valintaruudut on tarkoitettu yhden tai useamman vaihtoehdon valitsemiseen luettelosta, kun taas radiot ovat yhden vaihtoehdon valitsemiseen monista.

Poistetut valintaruudut ja radiot ovat tuettuja, mutta not-allowed kohdistin ylätason <label> päällä, sinun on lisättävä disabled -määritelmä .form-check-input. Poistettu määritteessä vaaleampi väri auttaa osoittamaan syötteen tilan.

Valintaruudut ja radiot ovat rakennettu tukemaan HTML-pohjaista lomakkeen validointia ja antamaan ytimekkäitä, helppokäyttöisiä tarroja. Sellaisena <input> s ja <label> s ovat sisarelementtejä toisin kuin <input> sisällä <label>. Tämä on hieman täsmällisempi, koska sinun on määritettävä id ja for attribuutit <input> ja <label>.

Oletus (pinottu)

Oletusarvoisesti kaikki sisaruksiksi valitut valintaruudut ja radiot pinotaan pystysuoraan ja oikein sijoitettu väliin .form-check.

Sisäinen

Ryhmittele valintaruudut tai radiot samalla vaakasuoralla rivillä lisäämällä .form-check-inline mihin tahansa .form-check.

Ilman tunnisteita

Lisää .position-static syötteisiin .form-check, joissa ei ole tarratekstiä. Muista antaa silti jonkinlainen tunniste avustaville tekniikoille (esimerkiksi käyttämällä aria-label).

Asettelu

Koska Bootstrap soveltaa display: block ja width: 100% lähes kaikkiin lomakeohjaimiin , lomakkeet pinotaan oletuksena pystysuunnassa. Muita luokkia voidaan käyttää tämän asettelun vaihteluun lomakekohtaisesti.

Lomakeryhmät

Luokka .form-group on helpoin tapa lisätä jonkinlainen muoto lomakkeisiin. Se tarjoaa joustavan luokan, joka kannustaa etikettien, hallintalaitteiden, valinnaisen ohjetekstin ja lomakkeiden validointiviestien oikeaan ryhmittelyyn. Oletusarvoisesti se käyttää vain margin-bottom, mutta se poimii lisää tyylejä kansioon .form-inline tarpeen mukaan. Käytä sitä <fieldset> s, <div> s tai melkein minkä tahansa muun elementin kanssa.

Lomakeruudukko

Monimutkaisempia lomakkeita voidaan rakentaa ruudukkoluokkien avulla. Käytä näitä lomakkeiden asetteluihin, jotka edellyttävät useita sarakkeita, vaihtelevia leveyksiä ja muita kohdistusvaihtoehtoja.

Lomakerivi

Voit myös vaihtaa .row tilaan .form-row, muunnelma tavallisesta ruudukkorivistä, joka ohittaa sarakkeen oletusarvoista tiukemmat ja pienemmät asettelut.

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

Vaakasuora muoto

Luo vaakasuuntaiset lomakkeet ruudukolla lisäämällä .row -luokka ryhmiin ja käyttämällä .col-*-* luokissa voit määrittää tarrojen ja hallintalaitteiden leveyden. Muista lisätä .col-form-label <label> -kansioihisi myös siten, että ne ovat pystysuunnassa keskitettynä niihin liittyviin lomakeohjaimiin.

Joskus sinun on ehkä käytettävä marginaali- tai pehmusteohjelmia luomaan tarvitsemasi täydellinen suuntaus. Olemme esimerkiksi poistaneet padding-top pinotuista radiotulotunnisteistamme tekstin perusviivan tasaamiseksi paremmin.

Vaakasuora lomaketunniste mitoitus

sarakkeen mitoitus

Kuten edellisissä esimerkeissä on esitetty, ruudukkojärjestelmämme avulla voit sijoittaa minkä tahansa määrän .col s .row tai .form-row sisällä. He jakavat käytettävissä olevan leveyden tasaisesti keskenään. Voit myös valita sarakkeiden alijoukon viemään enemmän tai vähemmän tilaa, kun taas jäljellä olevat .col s jakavat loput yhtä tasaisesti tietyillä sarakeluokilla, kuten .col-7.

Automaattinen koon muuttaminen

Alla olevassa esimerkissä keskitetään sisältö vertikaalisesti flexbox-apuohjelman avulla ja muutetaan .col – .col-auto niin, että sarakkeet vievät vain niin paljon tilaa kuin tarvitaan. Toisin sanoen sarake mitoitetaan itse sisällön perusteella.

Voit sitten sekoittaa sen uudelleen kokokohtaisilla sarakeluokilla.

Ja tietysti tuetaan mukautettuja lomakeohjaimia.

Sisäiset lomakkeet

Käytä .form-inline luokka näyttää sarjan tarroja, lomakeohjaimia ja painikkeita yhdellä vaakasuoralla rivillä. Lomakkeen ohjausobjektit sisäisissä lomakkeissa eroavat hieman oletusasetuksistaan.

• Ohjaimet ovat display: flex, kutistavat kaikki HTML-alueet ja antavat sinulle mahdollisuuden säätää kohdistusta välilyönti- ja flexbox-apuohjelmat.
• Ohjaimet ja tuloryhmät vastaanottavat width: auto kumoamaan Bootstrap-oletusarvon width: 100%.
• Ohjaimet näkyvät vain linjassa näkymissä, joiden leveys on vähintään 576 kuvapistettä, jotta otettaisiin huomioon kapeat näkymäkohdat mobiililaitteilla.

Sinun on ehkä käsiteltävä yksittäisten lomakeohjainten leveyttä ja tasausta välilyönneillä (kuten alla). Lopuksi, muista sisällyttää aina <label> jokaiseen lomakeohjaimeen, vaikka sinun on piilottava se muilta kuin näytönlukijoilta vierailijoiden kanssa, joilla on .sr-only .

Tuetaan myös mukautettuja lomakkeen ohjaimia ja valintoja.

Ohjeteksti

Lomakkeiden lohkotason ohjeteksti voidaan luoda käyttämällä .form-text (tunnettiin aiemmin nimellä .help-block versiossa v3). Sisäinen ohjeteksti voidaan toteuttaa joustavasti millä tahansa sisäisellä HTML-elementillä ja apuohjelmaluokilla, kuten .text-muted.

Tulojen alapuolella oleva ohjeteksti voidaan muotoilla .form-text. Tämä luokka sisältää display: block ja lisää ylämarginaalin helpottamaan välilyöntiä yllä olevista syötteistä.

Sisäinen teksti voi käyttää mitä tahansa tyypillistä sisäistä HTML-elementtiä (olkoon se <small>, <span> tai jotain muuta) ilman muuta kuin apuohjelmaluokka.

Poistetut lomakkeet

Lisää tuloon syötteen Boolean attribuutti disabled, jotta estetään käyttäjien vuorovaikutus ja saatetaan se näkyviin kevyempi.

Lisää disabled attribuutti <fieldset> -toiminnolle kaikkien ohjainten poistamiseksi käytöstä.

Vahvistus

Anna arvokasta ja käytännöllistä palautetta käyttäjillesi HTML5-lomaketarkistuksella, joka on käytettävissä kaikissa tuetuissa selaimissamme. Valitse selaimen oletusarviointipalautteesta tai toteuta mukautettuja viestejä sisäänrakennetuilla luokillamme ja käynnistyskoodereillamme.

Kuinka se toimii

Lomakkeiden vahvistus toimii Bootstrapin avulla seuraavasti:

• HTML-lomakkeiden tarkistusta käytetään CSS: n kahden näennäisluokan kautta, :invalid ja :valid. Se koskee <input>, <select> ja <textarea> -elementtejä.
• Käynnistyshihna laajentaa :invalid – ja :valid -tyylit ylätason .was-validated -luokkaan, joita yleensä käytetään <form>. Muussa tapauksessa mikä tahansa pakollinen kenttä ilman arvoa näkyy virheellisenä sivulatauksessa. Näin voit valita, milloin ne aktivoidaan (yleensä sen jälkeen, kun lomakkeen lähettämistä yritetään).
• Varana .is-invalid ja .is-valid -luokkia voidaan käyttää palvelinpuolen validointiin pseudoluokkien sijasta. Ne eivät vaadi .was-validated vanhempien luokkaa.
• CSS: n toiminnan rajoitusten vuoksi emme voi (tällä hetkellä) soveltaa tyylejä <label>, joka tulee DOM-lomakkeen ohjausobjektin eteen ilman mukautetun JavaScriptin apua.
• Kaikki modernit selaimet tukevat rajoitusten vahvistus-sovellusliittymää, sarjaa JavaScript-menetelmiä lomakkeen ohjausobjektien vahvistamiseksi.
• Palauteviestit voivat hyödyntää selaimen oletusasetuksia (jokaiselle selaimelle erilaiset ja CSS: n kautta muotoilemattomat) tai mukautettuja palautetyyleitämme HTML: n ja CSS: n avulla.
• Voit antaa mukautettuja voimassaoloviestejä setCustomValidity JavaScriptissä.

Harkitse tämä mielessä seuraavia demoja mukautettujen lomakkeiden validointityylille, valinnaisille palvelinpuolen luokille ja selaimen oletusasetuksille.

Mukautetut tyylit

Muokattujen Bootstrap-lomakkeiden vahvistusviestejä varten sinun on lisättävä novalidate -looginen attribuutti <form>. Tämä poistaa selaimen oletusarvoisen palautteen työkaluvihjeet, mutta tarjoaa silti pääsyn lomakkeen validointirajapintoihin JavaScript-muodossa. Yritä lähettää alla oleva lomake; JavaScripti sieppaa lähetyspainikkeen ja välittää sinulle palautetta.

Kun yrität lähettää, näet :invalid ja :valid tyylit, joita käytetään lomakeohjaimiin.

Selaimen oletusasetukset

Etkö ole kiinnostunut mukautetuista vahvistuspalautesanomista tai JavaScriptin kirjoittamisesta lomakkeen käyttäytymisen muuttamiseksi? Hyvä, voit käyttää selaimen oletuksia. Yritä lähettää alla oleva lomake. Selaimestasi ja käyttöjärjestelmästäsi riippuen näet hieman erilaisen palautetyylin.

Vaikka näitä palautetyylejä ei voi muotoilla CSS: llä, voit silti muokata palautetekstiä JavaScriptin avulla.

Palvelinpuoli

Suosittelemme asiakaspuolen tarkistuksen käyttöä, mutta jos tarvitset palvelinpuolta, voit ilmoittaa virheelliset ja kelvolliset lomakekentät .is-invalid ja .is-valid. Huomaa, että .invalid-feedback tuetaan myös näissä luokissa.

Tuetut elementit

Esimerkkilomakkeissamme näkyvät natiivitekstiset <input> s yllä, mutta lomakkeiden vahvistustyylit ovat käytettävissä myös mukautettujen lomakkeiden ohjausobjekteihimme.

Vinkit

Jos lomakkeen asettelu sallii sen, voit vaihtaa .{valid|invalid}-feedback luokat .{valid|invalid}-tooltip -luokille vahvistuspalautteen näyttämiseksi tyylityylisessä työkaluvihjeessä. Varmista, että sinulla on vanhempi, jolla on position: relative, työkaluvihjeen sijoittamista varten. Alla olevassa esimerkissä sarakeluokissamme on jo tämä, mutta projektisi saattaa edellyttää vaihtoehtoista määritystä.

Mukautetut lomakkeet

Saat vielä enemmän mukautuksia ja rajat selaimen johdonmukaisuus, korvaa selaimen oletusarvot täysin mukautetuilla lomakeelementeillä. Ne on rakennettu semanttisten ja helppokäyttöisten merkintöjen päälle, joten ne ovat kiinteitä korvikkeita mille tahansa oletuslomakekontrollille.

Valintaruudut ja radiot

Jokainen valintaruutu ja radio on kääritty <div> sisaren kanssa <span> mukautetun ohjausobjektimme luomiseksi ja <label> oheistekstille. Rakenteellisesti tämä on sama lähestymistapa kuin oletuksemme .form-check.

Käytämme sisaruksen valitsinta (~) kaikki <input> -tilat – kuten :checked – muotoilemaan mukautetun lomakkeen osoitinta oikein. Yhdistettynä .custom-control-label -luokkaan voimme myös muotoilla jokaisen kohteen tekstin <input> -tilan perusteella.

Piilotamme oletusarvoisen <input> -kohdan opacity -palvelun kanssa ja rakennamme .custom-control-label uusi mukautetun lomakkeen ilmaisin sen sijaan, ::before ja ::after. Valitettavasti emme voi rakentaa mukautettua vain <input> -sivulta, koska CSS: n content ei toimi kyseisellä elementillä.

Valituissa tiloissa käytämme Open64: n upotettuja base64-upotettuja SVG-kuvakkeita. Tämä antaa meille parhaan hallinnan muotoilulle ja sijoittelulle selaimissa ja laitteissa.

Valintaruudut

Mukautetut valintaruudut voi myös käyttää :indeterminate -pseudoluokkaa, kun se asetetaan manuaalisesti JavaScriptiä käyttäen (sen määrittämiseksi ei ole saatavana HTML-määritettä).

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

Radiot

Inline

Ei käytössä

Mukautetut valintaruudut ja radiot voidaan myös poistaa käytöstä. Lisää disabled -boolen attribuutti <input> -kohtaan ja mukautettu indikaattori ja tunnisteen kuvaus tyylitetään automaattisesti.

Valitse valikko

Mukautettu <select> valikot tarvitsevat vain mukautetun luokan, .custom-select mukautettujen tyylien käynnistämiseksi.

Voit myös valita pienistä ja suurista mukautetuista valinnoista vastaavat vastaavan kokoisia tekstinsyöttöjä.

multiple -määritettä tuetaan myös:

Kuten size -attribuutti:

tiedostoselain

Tiedostosyöttö on kaikkein epämääräisin ja vaatii ylimääräisen JavaScriptin, jos haluat liittää ne toiminnalliseen Valitse tiedosto… -valintaan ja valitun tiedostonimen tekstiin.

Piilotamme oletustiedoston <input> kautta ja sen sijaan muotoile <label>. Painike luodaan ja sijoitetaan ::after -merkillä. Lopuksi julistamme, että width ja height <input> -kohdassa ympäröivän sisällön oikea väli .

Merkkijonojen kääntäminen tai mukauttaminen

:lang() -pseudoluokkaa käytetään ”Selaa” -tekstin kääntämiseen muuhun kielet. Ohita tai lisää merkinnät $custom-file-text Sass-muuttujaan vastaavalla kielitunnisteella ja lokalisoiduilla merkkijonoilla. Englanninkielisiä merkkijonoja voidaan mukauttaa samalla tavalla.Esimerkiksi espanjaksi käännetyn käännöksen (espanjan kielikoodi on es) lisääminen:

Tässä on lang(es) toiminnassa espanjankielisen käännöksen mukautetussa tiedostossa:

Sinun on asetettava asiakirjan (tai sen alipuun) kieli oikein, jotta oikea teksti voidaan näyttää. Tämä voidaan tehdä käyttämällä lang -attribuuttia elementissä <html> tai Content-Language HTTP-otsikossa , muiden menetelmien ohella.