Skjemaer

Eksempler og retningslinjer for bruk for skjemastyringsstiler, layoutalternativer og egendefinerte komponenter for å lage et bredt utvalg av former.

Oversikt

Bootstraps skjemakontroller utvider på våre Rebooted formstiler med klasser. Bruk disse klassene til å velge sine tilpassede skjermer for en mer jevn gjengivelse på tvers av nettlesere og enheter.

Sørg for å bruke et passende type -attributt på alle innganger (f.eks. , email for e-postadresse eller number for numerisk informasjon) for å dra nytte av nyere inngangskontroller som e-postbekreftelse, nummervalg og mer.

Her er et raskt eksempel for å demonstrere Bootstraps formstiler. Fortsett å lese for dokumentasjon om obligatoriske klasser, skjemaoppsett og mer.

Formkontroller

Sørg for å utforske våre tilpassede skjemaer for å videreutvikle stil <select> s.

For filinnganger bytter du .form-control for .form-control-file.

Størrelse

Still høyder ved å bruke klasser som .form-control-lg og .form-control-sm.

Skrivebeskyttet

Legg til readonly boolsk attributt på en inngang for å forhindre modifisering av inngangens verdi. Skrivebeskyttede innganger virker lettere (akkurat som deaktiverte innganger), men beholder standardmarkøren.

Skrivebeskyttet ren tekst

Hvis du vil ha <input readonly> -elementer i formen din utformet som ren tekst, bruk .form-control-plaintext class for å fjerne standard formfeltstyling og bevare riktig margin og polstring.

Avkrysningsruter og radioer

Standard avkrysningsbokser og radioer forbedres ved hjelp av .form-check, en enkelt klasse for begge inndatatypene som forbedrer utformingen og oppførselen til HTML-elementene. Avkrysningsruter er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.

Deaktiverte avkrysningsruter og radioer støttes, men for å gi en not-allowed markør når du holder markøren over foreldren <label>, må du legge til disabled attributtet til .form-check-input. Det deaktiverte attributtet bruker en lysere farge for å indikere inngangens tilstand.

Avkrysningsbokser og radioer er bygget for å støtte HTML-basert skjemavalidering og gi konsise, tilgjengelige etiketter. Som sådan er våre <input> s og <label> søskenelementer i motsetning til en <input> innenfor en <label>. Dette er litt mer ordentlig da du må spesifisere id og for attributter for å relatere <input> og <label>.

Standard (stablet)

Som standard vil et hvilket som helst antall avkrysningsruter og radioer som er øyeblikkelig søsken, stables vertikalt og passende mellomrom med .form-check.

Innebygd

Gruppér avkrysningsruter eller radioer på samme horisontale rad ved å legge til .form-check-inline til enhver .form-check.

Uten etiketter

Legg til .position-static til innganger innen .form-check som ikke har noen etiketttekst. Husk å fremdeles oppgi en eller annen form for etiketter for hjelpeteknologier (for eksempel ved å bruke aria-label).

Oppsett

Siden Bootstrap gjelder display: block og width: 100% på nesten alle skjemakontrollene våre , skjemaer vil som standard stables vertikalt. Ytterligere klasser kan brukes til å variere dette oppsettet per skjema.

Formgrupper

.form-group -klassen er den enkleste måten for å legge til litt struktur i skjemaene. Det gir en fleksibel klasse som oppmuntrer til riktig gruppering av etiketter, kontroller, valgfri hjelpetekst og formvalideringsmeldinger. Som standard gjelder det bare margin-bottom, men det plukker opp flere stiler i .form-inline etter behov. Bruk den med <fieldset> s, <div> s, eller nesten ethvert annet element.

Skjema rutenett

Mer komplekse skjemaer kan bygges ved hjelp av våre rutenettklasser. Bruk disse til skjemaoppsett som krever flere kolonner, varierte bredder og ekstra justeringsalternativer.

Formrad

Du kan også bytte .row for .form-row, en variant av vår standard rutenett som overstyrer standard kolonnekanaler for strammere og mer kompakte oppsett.

Mer komplekse oppsett kan også opprettes med rutenettet.

Horisontal form

Lag horisontale skjemaer med rutenettet ved å legge til .row klassen for å danne grupper og bruke .col-*-* klasser for å spesifisere bredden på etikettene og kontrollene dine. Husk å legge til .col-form-label til <label>, så de er vertikalt sentrert med tilhørende skjemakontroller.

Noen ganger må du kanskje bruke margin- eller polstringsverktøy for å skape den perfekte justeringen du trenger. For eksempel har vi fjernet padding-top på vår stablede radioinngangsetikett for bedre å justere tekstbaselinjen.

Horisontal skjemaetikett størrelse

Kolonnestørrelse

Som vist i de foregående eksemplene, lar vårt rutenett deg plassere et hvilket som helst antall .col s i en .row eller .form-row. De deler den tilgjengelige bredden likt mellom seg. Du kan også velge et delsett av kolonnene dine for å ta mer eller mindre plass, mens de resterende .col deler like mye resten, med spesifikke kolonneklasser som .col-7.

Automatisk størrelse

Eksemplet nedenfor bruker et flexbox-verktøy for å sentrere innholdet vertikalt og endre .col til .col-auto slik at kolonnene dine bare tar opp så mye plass som nødvendig. Sagt på en annen måte, størrelsen på kolonnen er basert på innholdet.

Du kan deretter mikse det igjen med størrelsesspesifikke kolonneklasser.

Og selvfølgelig støttes tilpassede skjemakontroller.

Integrerte skjemaer

Bruk .form-inline klasse for å vise en serie etiketter, skjemakontroller og knapper på en enkelt horisontal rad. Skjemakontroller i innebygde skjemaer varierer noe fra standardtilstandene.

• Kontrollene er display: flex, som skjuler HTML-hvitt mellomrom og lar deg gi justeringskontroll med avstand og flexbox-verktøy.
• Kontroller og inngangsgrupper mottar width: auto for å overstyre Bootstrap-standard width: 100%.
• Kontroller vises bare integrert i visningsfelt som er minst 576 piksler bredt for å ta hensyn til smale visningsfelt på mobile enheter.

Du må kanskje adressere bredden og justeringen av individuelle skjemakontroller. med avstandsverktøy (som vist nedenfor). Til slutt må du alltid inkludere en <label> med hver skjemakontroll, selv om du trenger å skjule den for besøkende som ikke har skjermleser med .sr-only .

Tilpassede skjemakontroller og valg støttes også.

Hjelpetekst

Hjelpetekst på blokkeringsnivå i skjemaer kan opprettes ved hjelp av .form-text (tidligere kjent som .help-block i v3). Integrert hjelpetekst kan implementeres fleksibelt ved hjelp av hvilket som helst innebygd HTML-element og verktøyklasser som .text-muted.

Hjelpetekst nedenfor innganger kan utformes med .form-text. Denne klassen inkluderer display: block og legger til litt toppmargin for enkel avstand fra inngangene ovenfor.

Innebygd tekst kan bruke hvilket som helst typisk innebygd HTML-element (det være seg en <small>, <span>, eller noe annet) med ingenting mer enn en nytteklasse.

Deaktiverte skjemaer

Legg til disabled boolsk attributt på en inngang for å forhindre brukerinteraksjoner og få det til å vises lettere.

Legg til disabled attributt til en <fieldset> for å deaktivere alle kontrollene i.

Validering

Gi verdifull, handlingsfull tilbakemelding til brukerne dine med HTML5-skjemavalidering – tilgjengelig i alle støttede nettlesere. Velg fra standardvalideringsfeedback i nettleseren, eller implementer tilpassede meldinger med våre innebygde klasser og start JavaScript.

Slik fungerer det

Slik fungerer formvalidering med Bootstrap:

• HTML-skjemavalidering brukes via CSSs to pseudoklasser, :invalid og :valid. Det gjelder <input>, <select> og <textarea> -elementer.
• Bootstrap avgrenser stilene :invalid og :valid til overordnet .was-validated -klassen, vanligvis brukt på klassen <form>. Ellers vises ethvert obligatorisk felt uten en verdi som ugyldig ved sideinnlasting. På denne måten kan du velge når du vil aktivere dem (vanligvis etter at skjemainnsending er forsøkt).
• Som en reserve, .is-invalid og .is-valid klasser kan brukes i stedet for pseudoklasser for validering av serversiden. De krever ikke en .was-validated overordnet klasse.
• På grunn av begrensninger i hvordan CSS fungerer, kan vi ikke (for øyeblikket) bruke stiler på en <label> som kommer foran en skjemakontroll i DOM uten hjelp av tilpasset JavaScript.
• Alle moderne nettlesere støtter begrensningsvaliderings-API, en serie JavaScript-metoder for validering av skjemakontroller.
• Tilbakemeldingsmeldinger kan bruke standardinnstillingene for nettleseren (forskjellige for hver nettleser, og ustabile via CSS) eller våre egendefinerte tilbakemeldingsstiler med ekstra HTML og CSS.
• Du kan gi egendefinerte gyldighetsmeldinger med setCustomValidity i JavaScript.

Med det i tankene, bør du vurdere følgende demoer for våre tilpassede formvalideringsstiler, valgfrie serversideklasser og nettleserstandarder.

Egendefinerte stiler

For tilpassede meldingsvalideringsmeldinger for Bootstrap, må du legge til novalidate boolsk attributt til <form>. Dette deaktiverer standardtips for tilbakemelding på nettleseren, men gir fremdeles tilgang til formvaliderings-API-ene i JavaScript. Prøv å sende inn skjemaet nedenfor; JavaScriptet vårt vil avskjære sendeknappen og videresende tilbakemelding til deg.

Når du prøver å sende inn, ser du :invalid og :valid stiler brukt på skjemakontrollene dine.

Nettleserstandarder

Er du ikke interessert i egendefinerte tilbakemeldinger om validering eller å skrive JavaScript for å endre atferd? Alt bra, du kan bruke standardinnstillingene i nettleseren. Prøv å sende inn skjemaet nedenfor. Avhengig av nettleser og operativsystem, vil du se en litt annen stil for tilbakemelding.

Selv om disse tilbakemeldingsstilene ikke kan utformes med CSS, kan du fremdeles tilpasse tilbakemeldingsteksten gjennom JavaScript.

Serverside

Vi anbefaler å bruke validering av klientsiden, men i tilfelle du trenger serversiden, kan du angi ugyldige og gyldige skjemafelt med .is-invalid og .is-valid. Merk at .invalid-feedback også støttes av disse klassene.

Støttede elementer

Eksemplene våre viser innfødte tekstlige <input> s ovenfor, men formvalideringsstiler er tilgjengelige også for våre tilpassede skjemakontroller.

Verktøytips

Hvis skjemaoppsettet ditt tillater det, kan du bytte .{valid|invalid}-feedback klasser for .{valid|invalid}-tooltip klasser for å vise valideringstilbakemelding i en stilen verktøytips. Sørg for å ha en forelder med position: relative for plassering av verktøytips. I eksemplet nedenfor har kolonneklassene dette allerede, men prosjektet kan kreve et alternativt oppsett.

Tilpassede skjemaer

For enda mer tilpasning og kryss nettleserkonsistens, bruk våre helt tilpassede skjemaelementer for å erstatte standardinnstillingene for nettleseren. De er bygget oppå semantisk og tilgjengelig markering, så de er solide erstatninger for enhver standard skjemakontroll.

Avkrysningsbokser og radioer

Hver avkrysningsrute og radio er pakket inn i en <div> med et søsken <span> for å lage vår tilpassede kontroll og en <label> for den medfølgende teksten. Strukturelt er dette den samme tilnærmingen som vår standard .form-check.

Vi bruker søskenvelgeren (~) for alle våre <input> stater – som :checked – for å style vår tilpassede skjemaindikator. Når det kombineres med .custom-control-label -klassen, kan vi også style teksten for hvert element basert på <input> s tilstand.

Vi skjuler standard <input> med opacity og bruker .custom-control-label for å bygge en ny tilpasset skjemaindikator på plass med ::before og ::after. Dessverre kan vi ikke bygge en tilpasset fra bare <input> fordi CSSs content ikke fungerer på det elementet.

I de avmerkede tilstandene bruker vi base64 innebygde SVG-ikoner fra Open Iconic. Dette gir oss den beste kontrollen for styling og posisjonering på tvers av nettlesere og enheter.

Avkrysningsruter

Egendefinerte avkrysningsruter kan også bruke :indeterminate pseudoklassen når den manuelt angis via JavaScript (det er ingen tilgjengelig HTML-attributt for å spesifisere den).

Hvis du bruker jQuery, bør noe som dette være tilstrekkelig:

Radioer

Inline

Deaktivert

Egendefinerte avkrysningsruter og radioer kan også deaktiveres. Legg til disabled boolesk attributt til <input>, og den tilpassede indikatoren og etikettbeskrivelsen blir automatisk stylet.

Velg meny

Egendefinert <select> menyer trenger bare en tilpasset klasse, .custom-select for å utløse de tilpassede stilene.

Du kan også velge mellom små og store tilpassede valg til samsvarer med tekstinngangene med samme størrelse.

multiple attributtet støttes også:

Som size -attributtet:

Filleser

Filinngangen er den mest kjedelige av gjengen og krever ekstra JavaScript hvis du vil koble dem opp med funksjonell Velg fil … og valgt filnavnstekst.

Vi skjuler standardfilen <input> via og stil i stedet <label>. Knappen genereres og plasseres med ::after. Til slutt erklærer vi en width og height på <input> for riktig avstand for omgivende innhold .

Oversettelse eller tilpasning av strengene

:lang() pseudoklasse brukes til å tillate oversettelse av «Bla gjennom» -teksten til annen språk. Overstyr eller legg til oppføringer i $custom-file-text Sass-variabelen med den aktuelle språketaggen og lokaliserte strenger. De engelske strengene kan tilpasses på samme måte.Slik kan du for eksempel legge til en spansk oversettelse (spanskes språkkode er es):

Her er lang(es) i aksjon på den tilpassede filinngangen for en spansk oversettelse:

Du må angi språket til dokumentet (eller undertrær derav) riktig for at riktig tekst skal vises. Dette kan gjøres ved hjelp av lang -attributtet på <html> -elementet eller Content-Language HTTP-overskrift , blant andre metoder.