Bootstrap helpottaa houkuttelevien ja mukautuvien lomakkeiden luomista tarjoamalla kokoelman lomakekontrolliluokkia ja -komponentteja. Näitä lomakekontrolliluokkia voidaan käyttää syötekenttien, valintaruutujen, valintanappien, valintalistojen, pudotusvalikoiden ja tekstialueiden yhdenmukaiseen tyylittelyyn koko verkkosivustolla.

Yleiset lomakekontrolliluokat

form-control-luokka

Tätä luokkaa käytetään erilaisten lomake-elementtien, kuten syötekenttien, tekstialueiden ja valintalistojen, tyylittämiseen. Kun luokka otetaan käyttöön, se varmistaa, että lomake-elementit ovat responsiivisia ja visuaalisesti yhdenmukaisia eri laitteilla ja näytön ko'oilla.

form-control-luokan keskeiset ominaisuudet

• Responsiivinen suunnittelu: form-control-luokalla tyylitellyt lomake-elementit mukauttavat automaattisesti leveyttään täyttääkseen säiliön käytettävissä olevan tilan;
• Yhdenmukainen tyyli: Käyttämällä form-control-luokkaa lomake-elementit saavat yhtenäisen ulkoasun, mukaan lukien reunukset, täytteet ja fonttiominaisuudet;
• Kohdistus- ja hover-tilat: form-control tarjoaa käyttäjälle visuaalista palautetta muuttamalla lomake-elementtien ulkoasua, kun niitä leijutetaan tai niihin kohdistetaan.

form-check-luokat

• form-check: Tämä luokka tyylittelee valinta- ja radiopainikkeet näyttämään ne rivissä ja antaa niille yhtenäisen ulkoasun;
• form-check-input: Käytetään valinta- ja radiopainikkeiden syötekentissä form-check-säiliön sisällä. Tämä luokka varmistaa syötekenttien yhdenmukaisen ulkoasun;
• form-check-label: Käytetään valinta- ja radiopainikkeiden etikettien tyylittämiseen. Se varmistaa etikettien yhdenmukaisen ulkoasun ja auttaa säilyttämään kohdistuksen vastaaviin syötekenttiin.

Ruudukkojärjestelmä lomakkeiden asetteluun

Bootstrapin ruudukkojärjestelmä tarjoaa tehokkaan työkalun lomake-elementtien järjestämiseen monisarakkeisiin asetteluihin. Hyödyntämällä ruudukkoluokkia, kuten col-md-6, col-lg-4 ja muita, kehittäjät voivat sijoittaa lomake-elementit responsiivisiin ja joustaviin asetteluihin, jotka mukautuvat saumattomasti eri näyttökokoihin ja laitteisiin.

Keskeiset ominaisuudet:

• Responsiiviset sarakkeet: Ruudukkoluokat mahdollistavat lomake-elementtien leveyden määrittämisen eri näyttöleveyksille. Esimerkiksi col-md-6 määrittää, että sarake vie puolet säiliön leveydestä keskikokoisilla ja sitä suuremmilla näytöillä. Vastaavasti col-lg-4 määrittää sarakkeen leveydeksi kolmasosan suurilla näytöillä;
• Joustavuus: Ruudukkoluokkia voidaan yhdistellä monimutkaisten lomakeasettelujen luomiseksi;
• Optimoitu mobiililaitteille: Bootstrapin ruudukkojärjestelmä on lähtökohtaisesti mobiiliystävällinen, joten lomakeasettelut näyttävät hyviltä pienilläkin näytöillä oletuksena.

Responsiivisen lomakeverkon käyttäytymisen tulos

Lomakkeen validointityylit

Lomakkeen validointityylit tarjoavat käyttäjälle visuaalista palautetta syötteen kelpoisuudesta. Näihin tyyleihin sisältyvät onnistumisen, virheen ja varoituksen tilojen ilmaisimet, joiden avulla käyttäjä ymmärtää helposti, täyttääkö syöte vaaditut kriteerit.

Annetussa esimerkissä:

• needs-validation-luokka lisätään Bootstrapin validointityylien aktivoimiseksi;
• novalidate-attribuutti poistaa selaimen oman lomakevalidoinnin käytöstä;
• Sähköpostikentässä on required-attribuutti, joka tekee siitä pakollisen;
• valid-feedback- ja invalid-feedback-luokkia käytetään näyttämään palautteet oikeista ja virheellisistä syötteistä;
• Lisäksi JavaScript estää lomakkeen lähetyksen, jos kentissä on virheitä, ja lisää lomakkeeseen was-validated-luokan.