Skjemaer

Eksempler og retningslinjer for bruk for skjema for kontroll stiler, layout-alternativer og tilpassede komponenter for å lage et bredt utvalg av former.

Oversikt

Bootstrap er skjemakontroller utvider på våre Restartet form stiler med klasser. Bruk disse klassene for å melde deg inn i deres egendefinerte visninger for en mer konsekvent gjengivelse på tvers av nettlesere og enheter.

sørg for å bruke et passende type attributtet på alle innganger (f.eks.,, email for e-postadresse eller number for numerisk informasjon) for å dra nytte av nye input-kontroller som e-post bekreftelse, antall utvalg, og mer.

Her er en rask eksempel for å demonstrere Bootstrap form stiler. Hold lesing for dokumentasjon på nødvendig klasser, form layout, og mer.

skjemakontroller

sørg for å utforske vår tilpassede skjemaer for å ytterligere stil <select>s.

For fil-innganger, bytt .form-control for .form-control-file.,

Størrelser

Angi høyder ved hjelp av klasser som .form-control-lg og .form-control-sm.

Skrivebeskyttet

Legg til readonly boolean-attributtet på en inngang for å forhindre endring av inndata verdi. Lese-bare innganger virke lysere (akkurat som deaktivert innganger), men beholde standard markøren.,

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

Skrivebeskyttet ren tekst

Hvis du ønsker å ha <input readonly> – elementer i form, stil som vanlig tekst, bruk .form-control-plaintext klasse for å fjerne standard skjema styling og bevare riktig margin og padding.

Spekter Innganger

Satt horisontalt rullbar utvalg innganger med .form-control-range.,

Rutene og radioer

Standard rutene og radioer er forbedres ved hjelp av .form-check, én klasse for både input-typer som forbedrer layout og atferd av sine HTML-elementer. Boksene for å velge ett eller flere valg i en liste, mens radioer for å velge et alternativ fra mange.

Deaktivert rutene og radioer er støttet. disabled attributtet vil bruke en lysere farge for å bidra til å indikere innspill i staten.,

Rutene og radioer bruk er bygget for å støtte HTML-basert skjema validering og gir presis, tilgjengelig etiketter. Som sådan, vår <input>s og <label>s er søsken elementer som motsetning til en <input> innenfor en <label>. Dette er noe mer detaljert som du må angi id og for attributter å forholde seg <input> og <label>.,

Standard (stablet)

som standard, helst antall valgmuligheter og radioer som er umiddelbar søsken vil være vertikalt stablet og riktig plassert med .form-check.

– >

Inline

Gruppen avkrysningsruter eller radio på samme horisontale linje ved å legge til .form-check-inline til alle .form-check.,

Uten etiketter

Legg til .position-static for å innganger innenfor .form-check som ikke har noen egen tekst. Husk å fortsatt gi noen form for etikett for hjelpemidler teknologier (for eksempel ved bruk av aria-label).,

Layout >

Siden Bootstrap gjelder display: block og width: 100% til nesten alle våre skjemakontroller, skjemaer vil som standard stabelen på høykant. Flere klasser kan brukes til å variere denne layout på en per-form basis.

Danne grupper

.form-group klassen er den enkleste måten å legge til noen struktur for skjemaer. Det gir en fleksibel klasse som oppmuntrer til riktig gruppering av etiketter, kontroller, valgfritt hjelpe tekst, og form validering meldinger., Som standard er det bare gjelder margin-bottom, men det fanger opp flere stiler i .form-inline etter behov. Bruk det med <fieldset>s <div>s, eller nesten alle andre element.

Form rutenett

Mer komplekse skjemaer kan bli bygget ved hjelp av vårt rutenett klasser. Bruk disse for skjemaet oppsett som krever flere kolonner, varierte bredder, og ytterligere justering valg.,

Form rad

Du kan også bytte .row for .form-row, en variant av vår standard rutenett rad som overstyrer standard kolonne takrenner for tettere og mer kompakt oppsett.

Mer komplekse layouter kan også være opprettet med grid system.

Horisontal form

Opprett horisontale former med rutenett ved å legge til en .row klassen deles inn i grupper og bruk av .col-*-* klasser for å angi bredde på dine etiketter og kontroller., Sørg for å legge til .col-form-label til <label>s, så vel slik at de er sentrert vertikalt med tilhørende form-kontroller.

Til tider kan du kanskje trenger å bruke margin eller polstring verktøy for å lage den perfekte justeringen du trenger. Vi har For eksempel fjernet padding-top på vår stablet radio innganger label for bedre å tilpasse teksten baseline.,

Horisontal form label dimensjonering

Kolonne dimensjonering

Som vist i tidligere eksempler, vår grid system lar deg plassere et hvilket som helst antall .cols innenfor en .row eller .form-row. De vil dele de tilgjengelige bredde likt mellom dem. Du kan også velge et delsett av kolonner for å ta opp mer eller mindre plass, mens de resterende .cols delt likt resten, med konkrete kolonnen klasser som .col-7.,

Auto-sizing

eksempelet nedenfor bruker en flexbox verktøyet til å vertikalt center innholdet og endringene .col til .col-auto slik at kolonnene bare ta opp så mye plass som er nødvendig. Sagt på en annen måte, kolonne-størrelser i seg selv var basert på innholdet.

Du kan deretter remix at i gang igjen med en størrelse bestemt kolonne klasser.

Og selvfølgelig egendefinert skjema kontrollene er støttet.,

Inline former

for .form-inline klasse for å vise en serie med etiketter, skjemakontroller, og knappene på en enkel horisontal rad. Skjema kontrollene i inline former variere litt fra sin standardverdi stater.

• Kontroller er display: flex, kollapser noen HTML mellomrom, slik at du kan gi justering kontroll med avstand og flexbox verktøy.
• Kontroller og innspill grupper mottar width: auto for å overstyre standard Bootstrap width: 100%.,
• Kontroller vises kun internt i viewports som er minst 576px bredt til konto for smale viewports på mobile enheter.

Du må kanskje manuelt adresse bredde og justering av individuelle form kontroller med mellomrom verktøy (som vist nedenfor). Til slutt, sørg for å alltid inkludere en <label> med hver form kontroll, selv om du trenger å skjule det fra ikke-screenreader besøkende med .sr-only.

Egendefinert skjema kontrollene og velger støttes også.,

Hjelp

Blokk-nivå hjelpe tekst i skjemaer som kan være skapt ved bruk av .form-text (tidligere kjent som .help-block i v3). Framskutt hjelpetekst kan være fleksibelt implementert ved hjelp av noen inline HTML-element og verktøy klasser som .text-muted.,

Hjelp teksten nedenfor innganger kan bli stylet med .form-text. Denne klassen omfatter display: block og legger til noen topp margin for lett avstand fra innganger ovenfor.,

Inline teksten kan bruke noen typiske inline HTML-element (det være seg en <small>, <span> eller noe annet) med noe mer enn et verktøy klasse.

Deaktivert former

Legg til disabled boolean-attributtet på et innspill for å hindre at brukeren vekselsvirkningene, og få det til å virke lysere.,

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

Legg til disabled attributtet til en <fieldset> for å deaktivere alle kontrollene innen.

Validering

Gi verdifull, nyttige tilbakemeldinger til brukerne med HTML5 form validering–tilgjengelig i alle våre støttede nettlesere. Velg fra nettleseren standard validering tilbakemeldinger, eller implementerer tilpassede meldinger med vår innebygde klasser og starter JavaScript.,

Hvordan det fungerer

Her er hvordan form validering fungerer med Bootstrap:

• HTML-skjema validering er brukt via CSS er to pseudo-klasser, :invalid og :valid. Det gjelder å <input>, <select>, og <textarea> – elementer.,
• Bootstrap scopes :invalid og :valid stiler til overordnet .was-validated klasse, vanligvis brukes til <form>. Ellers, noen nødvendige felt uten en verdi viser seg som ugyldig på side lastes. På denne måten kan du velge når du vil aktivere dem (vanligvis etter skjema innsending er forsøkt).
• for Å tilbakestille utseendet av form (for eksempel, i tilfelle av dynamisk form bidrag ved hjelp av AJAX), fjerne .was-validated klasse fra <form> igjen etter innlevering.,
• Som et tilbakefall, .is-invalid og .is-valid klasser kan brukes i stedet for pseudo-klasser for server-side validering. De krever ikke en .was-validated overordnet klasse.
• på Grunn av begrensninger i hvordan CSS fungerer, vi kan ikke (i dag) bruke maler til en <label> som kommer før en form kontroll i DOM uten hjelp av tilpasset JavaScript.
• Alle moderne nettlesere støtter tvang validation API, en rekke JavaScript-metoder for validering av skjemaet kontroller.,
• meldinger kan bruke nettleseren defaults (forskjellige for hver nettleser, og unstylable via CSS) eller vår tilpassede tilbakemeldinger stiler med ekstra HTML og CSS.
• Du kan gi tilpasset gyldighet meldinger med setCustomValidity i JavaScript.

Med det i tankene, bør du vurdere følgende demoer for våre egendefinert skjema validering stiler, valgfri server side klasser, og nettleseren standarder.,

Egendefinerte stiler

For tilpasset Bootstrap form validering meldinger, vil du trenger for å legge til novalidate boolean-attributtet til <form>. Dette deaktiverer standard nettleser tilbakemeldinger verktøytips, men fortsatt gir tilgang til form validation Api-er i JavaScript. Prøv å sende inn skjemaet nedenfor, er våre JavaScript vil avskjære send-knappen og sende tilbakemelding til deg. Når du prøver å sende inn, vil du se :invalid og :valid stiler som er brukt på skjemaet kontroller.,

Tilpasset tilbakemelding stiler bruke tilpassede farger, rammer, fokus stiler, og bakgrunnen ikoner for å kommunisere bedre tilbakemeldinger. Bakgrunnen ikoner for <select>s, er bare tilgjengelige med .custom-select, og ikke .form-control.

Nettleser standarder

Ikke er interessert i tilpasset validering meldinger eller skrive JavaScript for å endre form atferd? Alt bra,, du kan bruke nettleseren standarder. Prøv å sende inn skjemaet nedenfor. Avhengig av hvilken nettleser og operativsystem, vil du se en litt annen stil av tilbakemeldinger.,

Selv om disse tilbakemelding stiler kan bli stylet med CSS, kan du fortsatt tilpasse tilbakemeldinger tekst gjennom JavaScript.

Server-side

Vi anbefaler at du bruker klient-side validering, men i tilfelle du har behov for server-side validering, kan du angi ugyldig og gyldig skjemafelt med .is-invalid og .is-valid. Merk at .invalid-feedback støttes også med disse klassene.,

Støttes elementer

Validering stiler er tilgjengelige for følgende skjema kontrollene og komponentene:

Verktøytips

Hvis din form layout gjør det, du kan bytte .{valid|invalid}-feedback klasser for .{valid|invalid}-tooltip klasser for å vise validering tilbakemelding i en stil verktøytips. Sørg for å ha en forelder med position: relative på det for verktøytips lokalisering. I eksempelet nedenfor, vår kolonne klasser har dette allerede, men prosjektet kan kreve et alternativt oppsett.,

Tilpasse

Validering stater kan tilpasses via Sass med $form-validation-states kart. Ligger i vår _variables.scss fil, dette Sass kartet er repeterende over å generere standard valid/invalid validering stater. Inkludert er en nestet kartet for å tilpasse hver statens farge og ikon. Mens ingen andre stater er støttet av nettlesere, de bruke egendefinerte stiler kan lett legge til mer kompleks form for tilbakemelding.,

Vær oppmerksom på at vi ikke anbefaler tilpasse disse verdiene uten også å endre form-validation-state mixin.

Egendefinerte skjemaer

For enda mer tilpasning og cross-browser konsistens, kan du bruke vår helt tilpasset form elementer for å bytte nettleser standarder. De er bygget på toppen av semantiske og tilgjengelig markup, så de er solid erstatning for standard form control.,

Rutene og radioer

Hver boksen og radio <input> og <label> sammenkobling er pakket inn i en <div> for å lage vår egendefinert kontroll. Strukturelt, dette er samme tilnærming som vår standard .form-check.

Vi bruke søsken selector (~) for alle våre <input> usa—som :checked—til riktig stil våre egendefinert skjema indikator., Når kombinert med .custom-control-label klasse, kan vi også stil tekst for hvert element basert på <input>‘s state.

Vi skjule standard <input> med opacity og bruk .custom-control-label for å bygge en ny egendefinert skjema indikator på sin plass med ::before og ::after. Dessverre kan vi ikke bygge en tilpasset ett fra bare <input> fordi CSS er content ikke fungerer på det aktuelle elementet.,

I den innsjekkede stater, er vi bruke base64-embedded SVG ikoner fra Åpne Ikoniske. Dette gir oss den beste kontroll for styling og posisjonering på tvers av nettlesere og enheter.

Rutene

Egendefinerte boksene kan også bruke :indeterminate pseudo klasse når du angi manuelt via JavaScript (det er ingen tilgjengelig HTML-attributtet for å spesifisere det).,

Hvis du bruker jQuery, noe som dette skulle være nok:

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

Radioer

Inline

Deaktivert

Tilpasset rutene og radioer kan også være deaktivert., Legg til disabled boolean-attributtet i <input> og tilpasset indikator og etikett beskrivelse vil automatisk bli stylet.

Brytere

En bryter som har markeringen av en tilpasset avmerkingsboksen, men bruker .custom-switch klassen til å gjengi en vippebryter. Skifter også støtte disabled attributtet.,

Velg meny

Tilpasset <select> menyer trenger bare en egendefinert klasse, .custom-select for å utløse egendefinerte stiler. Egendefinerte stiler er begrenset til <select>‘s første opptreden, og kan ikke endre <option>s på grunn av nettleseren begrensninger.

Du kan også velge fra små og store tilpasset velger å matche vår av samme størrelse skriving.,

multiple attributtet er også støttet:

Som size attributtet:

Spekter

Opprett egendefinert <input type="range"> kontroller med .custom-range. Sporet (bakgrunnen) og tommel (verdi) er begge stylet til å vises den samme på tvers av nettlesere. Som bare IE og Firefox support «fylle» sine spor fra venstre eller høyre på tommelen som en måte å visuelt viser fremgang, vi i dag ikke støtte det.,

<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., For å endre dette, kan du angi en step verdi. I eksemplet nedenfor har vi doble antall trinn ved å bruke step="0.5".

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

utforsker

fil-inndata er mest vrient av gjengen, og krever ekstra JavaScript hvis du ønsker å koble dem opp med funksjonelle Velg file… og valgte fil tekst.

Vi skjule standard fil <input> via opacity og i stedet stil <label>. Knappen er generert og er plassert med ::after. Til slutt, vi erklærer en width og height på <input> for riktig avstand til omkringliggende innhold.,

å Oversette eller tilpasse strenger med SCSS

:lang() pseudo-klassen brukes til å tillate for oversettelse av «Lese» tekst i andre språk. Overstyre eller legge til oppføringer til $custom-file-text Sass variabel med de relevante språk-koden og lokaliserte strenger. Den engelske strenger kan tilpasses på samme måte., Her ser du For eksempel hvordan man kan legge til en spansk oversettelse (spansk språk koden es):

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

Her lang(es) i aksjon på egendefinerte filen inngang for en spansk oversettelse:

Du trenger for å velge språk i dokumentet (eller undertreet av disse) for at riktig riktig tekst skal vises., Dette kan gjøres ved hjelp av lang attributtet i <html> – element eller Content-Language HTTP header, blant andre metoder.

å Oversette eller tilpasse strenger med HTML

Bootstrap gir også en måte å oversette «Lese» tekst i HTML med data-browse attributt som kan bli lagt til i den egendefinerte inngang etikett (for eksempel på nederlandsk):