formularer

eksempler og retningslinjer for brug for formularstyringsstile, layoutindstillinger og brugerdefinerede komponenter til oprettelse af en lang række former.

oversigt

bootstraps formularkontroller udvider vores genstartede formularformater med klasser. Brug disse klasser til at vælge deres tilpassede skærme for en mere ensartet gengivelse på tværs af bro .sere og enheder.

sørg for at bruge en passende type attribut på alle indgange (f. eks.,, email for e-mail-adresse eller number numeriske oplysninger) for at drage fordel af nyere input-objekter som e-mail-bekræftelse, antal udvalg, og meget mere.

Her er et hurtigt eksempel til at demonstrere bootstraps formularformater. Fortsæt med at læse for dokumentation om nødvendige klasser, formularlayout og mere.

Formular-kontroller

Vær sikker på at udforske vores brugerdefinerede formularer til yderligere style <select>s.

For fil-input, swap .form-control for .form-control-file.,

dimensionering

Indstil højder ved hjælp af klasser som.form-control-lgog.form-control-sm.

skrivebeskyttet

Tilføj readonly boolsk attribut på et input for at forhindre ændring af inputens værdi. Skrivebeskyttede indgange vises lettere (ligesom deaktiverede indgange), men behold standardmarkøren.,

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

Readonly almindelig tekst

Hvis du ønsker at have <input readonly> – elementer i din form, stil som almindelig tekst, brug .form-control-plaintext class for at fjerne standard form område, styling og bevare den korrekte margin og padding.

Områdeindgange

Indstil vandret rullbare områdeindgange ved hjælp af .form-control-range.,

Afkrydsningsfelter og radioer

Standard bokse og radioer er forbedret ved hjælp af .form-check, en enkelt klasse for begge input-typer, der forbedrer layout og adfærd af deres HTML-elementer. Afkrydsningsfelter er for at vælge en eller flere muligheder i en liste, mens radioer er for at vælge en indstilling fra mange.

deaktiverede afkrydsningsfelter og radioer understøttes. Attributten disabled anvender en lysere farve for at hjælpe med at indikere inputets tilstand.,

afkrydsningsfelter og radioer brug er bygget til at understøtte HTML-baseret form validering og give koncise, tilgængelige etiketter. Som sådan, vores <input>s <label>s er søskende elementer, i modsætning til en <input> inden <label>. Dette er lidt mere detaljeret, som du skal angive id og for egenskaber for at relatere <input> og <label>.,

standard (stablet)

som standard vil et hvilket som helst antal afkrydsningsfelter og radioer, der øjeblikkeligt søskende, blive stablet lodret og passende fordelt med.form-check.

Inline

Gruppen afkrydsningsfelter eller radioer på den samme vandrette række, ved at tilføje .form-check-inline til alle .form-check.,

Uden etiketter

Tilføj .position-static til indgange i .form-check, der ikke har nogen tekst. Husk stadig at give en form for etiket til hjælpeteknologier (for eksempel ved hjælp af aria-label).,

Layout >

Da Bootstrap gælder display: block og width: 100% til næsten alle vores formular-kontroller, former vil som standard stak lodret. Yderligere klasser kan bruges til at variere dette layout pr.

formgrupper

.form-group klasse er den nemmeste måde at tilføje nogle strukturer til formularer. Det giver en fleksibel klasse, der tilskynder til korrekt gruppering af etiketter, kontroller, valgfri hjælpetekst og formvalideringsmeddelelser., Som standard gælder det kun margin-bottom, men det henter yderligere stilarter i .form-inline efter behov. Brug det med <fieldset>s, <div>s, eller næsten ethvert andet element.

Form grid

mere komplekse former kan bygges ved hjælp af vores grid klasser. Brug disse til formularlayout, der kræver flere kolonner, forskellige bredder og yderligere justeringsmuligheder.,

Form række

Du kan også bytte .row for .form-row, en variant af vores standard gitter række, der tilsidesætter standard kolonne tagrender til en tættere og mere kompakt layout.

mere komplekse layouts kan også oprettes med skinnesystemet.

horisontal form

Opret vandrette formularer med gitteret ved at tilføje.rowklasse for at danne grupper og bruge.col-*-* klasser for at specificere bredden på dine etiketter og kontroller., Sørg for at tilføje .col-form-label din <label>s så godt, så de er lodret centreret med deres tilknyttede form for kontrol.til tider skal du måske bruge margin-eller polstringsværktøjer til at skabe den perfekte justering, du har brug for. For eksempel har vi fjernet padding-top på vores stablede radioindgange for bedre at justere tekstlinjen.,

Vandret form label dimensionering

Kolonne dimensionering

Som vist i de foregående eksempler, vores grid system giver dig mulighed for at placere et antal .cols inden for et .row eller .form-row. De vil opdele den tilgængelige bredde ligeligt mellem dem. Du kan også vælge en delmængde af dine kolonner til at tage mere eller mindre plads, mens de resterende .cols delt lige resten, med særlig kolonne klasser som .col-7.,

Auto-dimensionering

eksemplet nedenfor bruger en flexbox værktøj til lodret center indholdet og ændringer .col til .col-auto, så dine kolonner kun tage så meget plads som er nødvendig. Sagt på en anden måde, kolonnestørrelserne selv baseret på indholdet.

Du kan derefter Remi .e det igen med størrelsesspecifikke kolonneklasser.

og selvfølgelig brugerdefinerede formular kontroller understøttes.,

Inline forms

brug .form-inline klasse til at vise en række etiketter, formularkontroller og knapper på en enkelt vandret række. Formkontroller inden for inline-formularer varierer lidt fra deres standardtilstande.

• kontroller er display: flex, kollapser ethvert HTML-hvidt rum og giver dig mulighed for at give justeringskontrol med afstand og fle .bo. – værktøjer.
• kontroller og inputgrupper modtager width: auto for at tilsidesætte Bootstrap-standard width: 100%.,
• kontroller vises kun inline i vie .ports, der er mindst 576p.bred for at tage højde for smalle vie .ports på mobile enheder.

Du skal muligvis manuelt adressere bredden og justeringen af individuelle formularkontroller med afstandsværktøjer (som vist nedenfor). Til sidst skal du altid medtage en <label> med hver formkontrol, selvom du har brug for at skjule den for ikke-screenreader-besøgende med .sr-only.

brugerdefineret formular kontroller og vælger understøttes også.,

hjælpetekst

blokniveau hjælpetekst i formularer kan oprettes ved hjælp af .form-text(tidligere kendt som .help-block i v3). Inline hjælpetekst kan implementeres fleksibelt ved hjælp af ethvert inline HTML-element og hjælpeklasser som .text-muted.,

hjælpetekst under indgange kan styles med.form-text. Denne klasse omfatter display: block og tilføjer nogle øverste margen for nem afstand fra indgangene ovenfor.,

Inline-tekst kan bruge ethvert typisk inline HTML-element (det være sig et <small>, <span> eller noget andet) med intet andet end en hjælpeklasse.

deaktiverede formularer

Tilføjdisabled boolsk attribut på et input for at forhindre brugerinteraktioner og få det til at virke lettere.,

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

Tilføj disabled – attributten til <fieldset> for at deaktivere alle funktioner i.

Validering

Give værdifulde, handlingsrettede feedback til dine brugere med HTML5 form validering–tilgængelig i alle vores understøttede browsere. Vælg fra bro .ser standard Validering feedback, eller gennemføre brugerdefinerede meddelelser med vores indbyggede klasser og starter JavaScript.,

Hvordan det virker

Her er hvordan form validering arbejder med Bootstrap:

• HTML-form-validering er anvendt via CSS er to pseudo-klasser, :invalid og :valid. Det gælder <input> <select> og <textarea> – elementer.,
• Bootstrap scopes :invalid og :valid styles til parent .was-validated class, der normalt anvendes til <form>. Ellers vises ethvert krævet felt uden en værdi som ugyldigt ved sidebelastning. På denne måde kan du vælge, hvornår de skal aktiveres (typisk efter at formularindsendelsen er forsøgt).
• for At nulstille udseende form (for eksempel, i tilfælde af dynamiske formularer ved hjælp af AJAX), skal du fjerne .was-validated klasse <form> igen efter indsendelse.,
• som tilbagefald kan.is-invalid og.is-valid klasser anvendes i stedet for pseudoklasserne til validering af serversiden. De kræver ikke en.was-validated forældreklasse.
• på grund af begrænsninger i, hvordan CSS fungerer, kan vi ikke (på nuværende tidspunkt) anvende stilarter til et <label>, der kommer før en formkontrol i DOM uden hjælp fra brugerdefineret JavaScript.
• alle moderne bro .sere understøtter constraint validation API, en række JavaScript-metoder til validering af formularkontroller.,
• Feedbackmeddelelser kan bruge bro .serens standardindstillinger (forskellige for hver bro .ser og ustylbare via CSS) eller vores brugerdefinerede feedback-stilarter med yderligere HTML og CSS.
• du kan angive brugerdefinerede validitetsmeddelelser med setCustomValidity i JavaScript.

med det i tankerne, overveje følgende demoer for vores brugerdefinerede formular Validering stilarter, valgfri server side klasser, og bro .ser standardindstillinger.,

Brugerdefinerede typografier

For brugerdefinerede Bootstrap form validering-beskeder, skal du tilføje novalidate boolean attribut til dine <form>. Dette deaktiverer bro .ser standard feedback tooltips, men stadig giver adgang til formularen Validering API ‘ er i JavaScript. Prøv at indsende nedenstående formular; vores JavaScript vil opfange sendeknappen og videresende feedback til dig. Når du forsøger at indsende, vil du se:invalid og:valid stilarter, der er anvendt på dine formularkontroller.,

brugerdefinerede feedback-stilarter Anvend brugerdefinerede farver, grænser, fokusstile og baggrundsikoner for bedre at kommunikere feedback. Baggrunden ikoner for <select>s er kun til rådighed med .custom-select og ikke .form-control.

bro ?ser defaults

ikke interesseret i brugerdefinerede Validering feedback beskeder eller skrive JavaScript til at ændre form adfærd? Alt godt, du kan bruge bro .serindstillingerne. Prøv at indsende nedenstående formular. Afhængigt af din bro .ser og OS, vil du se en lidt anden stil af feedback.,

selvom disse feedback-stilarter ikke kan styles med CSS, kan du stadig tilpasse feedback-teksten via JavaScript.

Server-side

Vi anbefaler, at du bruger client-side validering, men i tilfælde af at du kræve server-side validering, kan du angive, ugyldig, og gyldig form felter med .is-invalid og .is-valid. Bemærk, at .invalid-feedback også understøttes med disse klasser.,

Understøttede elementer

Validering stilarter er tilgængelige for nedenstående formular kontrol og komponenter:

Information

Hvis din form, layout gør det muligt, du kan bytte .{valid|invalid}-feedback klasser for .{valid|invalid}-tooltip klasser til at vise validering feedback i en stylet værktøjstip. Sørg for at have en forælder med position: relative på det for værktøjstip positionering. I eksemplet nedenfor har vores kolonneklasser dette allerede, men dit projekt kræver muligvis en alternativ opsætning.,

tilpasning

Valideringstilstande kan tilpasses via Sass med$form-validation-states kort. Placeret i vores _variables.scss fil, dette Sass kort er loopes over at generere standard valid/invalid validering stater. Inkluderet er et indlejret kort til at tilpasse hver stats farve og ikon. Mens ingen andre stater understøttes af bro .sere, kan dem, der bruger brugerdefinerede stilarter nemt tilføje mere komplekse formular feedback.,

bemærk, at vi ikke anbefaler at tilpasse disse værdier, uden også at ændre form-validation-state mixin.

Brugerdefinerede formularer

For endnu mere tilpasning og cross bro .ser konsistens, bruge vores helt brugerdefinerede formularelementer til at erstatte bro .ser standardindstillingerne. De er bygget oven på semantisk og tilgængelig markering, så de er solide erstatninger for enhver standardformkontrol.,

Afkrydsningsfelter og radioer

Hver checkbox and radio <input> og <label> parring er pakket ind i en <div> for at oprette vores brugerdefinerede kontrol. Strukturelt er dette den samme tilgang som vores standard .form-check.

Vi bruger sibling selector (~) til alle vores <input> stater—som :checked—til at style vores tilpassede form indikator., Når det kombineres med.custom-control-label klasse, kan vi også style teksten for hvert element baseret på <input>‘s tilstand.

Vi skjule den standard <input> med opacity og brug .custom-control-label for at bygge en ny brugerdefineret formular indikator på sin plads med ::before og ::after. Desværre kan vi ikke bygge en brugerdefineret én fra bare <input> fordi CSS s content virker ikke på, at element.,

i de markerede stater bruger vi base64 indlejrede SVG-ikoner fra Open Iconic. Dette giver os den bedste kontrol til styling og positionering på tværs af bro .sere og enheder.

afkrydsningsfelter

brugerdefinerede afkrydsningsfelter kan også bruge :indeterminate pseudoklasse, når manuelt indstilles via JavaScript (der er ingen tilgængelig HTML-attribut til angivelse af det).,

Hvis du bruger jQuery, noget som dette burde være nok:

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

Radioer

Inline

Deaktiveret

Brugerdefinerede bokse og radioer kan også deaktiveres., Tilføjdisabled boolsk attribut til <input>, og den brugerdefinerede indikator og etiketbeskrivelse vil automatisk blive stylet.

skifter

en s .itch har markeringen af et brugerdefineret afkrydsningsfelt, men bruger klassen .custom-switch til at gengive en vippekontakt. S .itches understøtter også attributten disabled.,

Vælg menu

Brugerdefineret <select> menuer er kun behov for en brugerdefineret klasse, .custom-select for at udløse den brugerdefinerede typografier. Brugerdefinerede typografier er begrænset til <select>‘s oprindelige udseende, og kan ikke ændre <option>s på grund af browseren begrænsninger.

Du kan også vælge mellem små og store brugerdefinerede valg for at matche vores tekstindgange i samme størrelse.,

multiple attribut er også understøttet:

Som det er size – attributten:

Range

Opret bruger <input type="range"> kontrol med .custom-range. Sporet (baggrunden) og tommelfingeren (værdien) er begge stylet til at vises ens på tværs af bro .sere. Da kun IE og Firefo.understøtter “udfyldning” af deres spor fra venstre eller højre for tommelfingeren som et middel til visuelt at indikere fremskridt, understøtter vi det i øjeblikket ikke.,

<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 at ændre dette kan du angive en step værdi. I eksemplet nedenfor fordobler vi antallet af trin ved at bruge step="0.5".

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

File-browser

filindgangen er den mest gnarly af bunken og kræver yderligere JavaScript, hvis du gerne vil tilslutte dem med funktionel Vælg fil… og valgt filnavn tekst.

Vi skjule den standard fil <input> via opacity og i stedet style <label>. Knappen genereres og placeres med ::after. Endelig erklærer vi en width og height om <input> for korrekt afstand til det omgivende indhold.,

oversættelse eller tilpasning af strengene med SCSS

:lang() pseudoklasse bruges til at tillade oversættelse af “Gennemse”-teksten til andre sprog. Overstyr eller tilføj poster til $custom-file-text Sass-variablen med det relevante sprogmærke og lokaliserede strenge. De engelske strenge kan tilpasses på samme måde., For eksempel, her er hvordan man kan tilføje en spansk oversættelse (spansk sprog koden es):

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

Her lang(es) i aktion på den brugerdefinerede fil input til en spansk oversættelse:

Du har brug for for at indstille sproget på dit dokument (eller undertræ heraf) er korrekt, for den rigtige tekst til at blive vist., Dette kan gøres ved hjælp af lang attribut på det <html> – element, eller Content-Language HTTP header, blandt andre metoder.

Oversættelse eller tilpasning af strengene med HTML

Bootstrap giver også en måde at oversætte på “Gennemse” – tekst i HTML med data-browse attribut som kan være tilføjet til brugerdefineret input label (eksempel på hollandsk):