Bootstrap gjør det enkelt å lage tiltalende og tilpasningsdyktige skjemaer ved å tilby et utvalg av klasser og komponenter for skjemakontroller. Disse skjemakontroll-klassene kan brukes til å style inndatafelt, avmerkingsbokser, radioknapper, nedtrekksmenyer, og tekstområder på en konsekvent måte gjennom hele nettstedet.

Vanlige klasser for skjemakontroller

form-control-klasse

Denne klassen brukes for å style ulike skjemaelementer, inkludert inndatafelt, tekstområder og nedtrekksmenyer. Når den brukes, sikrer den at skjemaelementene er responsive og visuelt konsistente på tvers av ulike enheter og skjermstørrelser.

Viktige egenskaper ved form-control-klassen

• Responsivt design: Skjemaelementer med form-control tilpasser automatisk bredden for å fylle tilgjengelig plass i beholderen;
• Enhetlig stil: Ved å bruke form-control får skjemaelementene en konsekvent stil, inkludert kanter, polstring og skriftegenskaper;
• Fokus- og hovertilstander: form-control gir visuell tilbakemelding til brukeren ved å endre utseendet på skjemaelementene når de får fokus eller holdes over.

form-check-klasser

• form-check: Denne klassen stiler avkrysningsbokser og radioknapper slik at de vises på linje og får enhetlig stil;
• form-check-input: Brukes på avkrysningsbokser og radioknapp-inndataelementer innenfor en form-check-beholder. Klassen sikrer konsekvent stil på inndataelementene;
• form-check-label: Brukes for å style etiketten tilknyttet avkrysningsbokser og radioknapper. Den sikrer enhetlig stil på etikettene og bidrar til korrekt justering med tilhørende inndataelementer.

Rutenettsystem for skjemautforming

Bootstraps rutenettsystem gir et kraftig verktøy for å organisere skjemafelt i flerkolonneoppsett. Ved å bruke rutenettklasser som col-md-6, col-lg-4 og lignende, kan utviklere plassere skjemafelt i responsive, fleksible oppsett som tilpasser seg sømløst til ulike skjermstørrelser og enheter.

Viktige egenskaper:

• Responsive kolonner: Rutenettklasser lar utviklere definere bredden på skjemafelt innenfor ulike brytepunkter. For eksempel angir col-md-6 at kolonnen skal oppta halvparten av bredden til beholderen på mellomstore skjermer og større. Tilsvarende angir col-lg-4 en kolonnebredde på en tredjedel på store skjermer;
• Fleksibilitet: Det er mulig å kombinere ulike rutenettklasser for å lage komplekse skjemautforminger;
• Optimalisert for mobil: Bootstraps rutenettsystem er i utgangspunktet mobil-først, noe som sikrer at skjemautforminger ser bra ut på mindre skjermer som standard.

Resultatet av det responsive skjemagitterets oppførsel

Skjemavalideringsstiler

Skjemavalideringsstiler gir visuell tilbakemelding til brukere om gyldigheten av deres inndata. Disse stilene inkluderer indikatorer for suksess-, feil- og advarselsstatus, noe som gjør det enkelt for brukere å forstå om inndataene oppfyller de nødvendige kriteriene.

I det gitte eksempelet:

• Klassen needs-validation er lagt til for å aktivere Bootstraps valideringsstiler;
• Attributtet novalidate brukes for å deaktivere nettleserens innebygde skjemavalidering;
• Inndatafeltet for e-postadresse har attributtet required, som gjør det obligatorisk;
• Klassene valid-feedback og invalid-feedback brukes for å vise tilbakemeldinger for henholdsvis gyldige og ugyldige inndata;
• I tillegg brukes JavaScript for å forhindre innsending av skjemaet dersom det finnes ugyldige felt, og for å legge til klassen was-validated på skjemaet.