Formularer

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

Oversigt

Bootstraps formkontroller udvider vores genstartede formstilarter med klasser. Brug disse klasser til at vælge deres tilpassede skærme til en mere ensartet gengivelse på tværs af browsere og enheder.

Sørg for at bruge en passende type -attribut på alle indgange (f.eks. , email for e-mail-adresse eller number for numerisk information) for at drage fordel af nyere inputkontroller som e-mail-verifikation, nummervalg og mere.

Her er et hurtigt eksempel for at demonstrere Bootstraps formstile. Fortsæt med at læse for dokumentation om krævede klasser, formularlayout og mere.

Formularkontrol

Sørg for at udforske vores brugerdefinerede formularer til yderligere stil <select> s.

For filinput skal du bytte .form-control til .form-control-file.

Størrelse

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

Skrivebeskyttet

Tilføj readonly boolsk attribut på et input for at forhindre ændring af inputets værdi. Skrivebeskyttede indgange ser lysere ud (ligesom deaktiverede indgange), men bevarer standardmarkøren.

Skrivebeskyttet almindelig tekst

Hvis du vil have <input readonly> -elementer i din form, der er udformet som almindelig tekst, skal du bruge .form-control-plaintext class for at fjerne standardformularfeltstyling og bevare den korrekte margen og polstring.

Afkrydsningsfelter og radioer

Standard afkrydsningsfelter og radioer forbedres ved hjælp af .form-check, en enkelt klasse for begge inputtyper, der forbedrer layoutet og opførslen af deres HTML-elementer. Afkrydsningsfelter er til at vælge en eller flere indstillinger på en liste, mens radioer er til at vælge en indstilling blandt mange.

Deaktiverede afkrydsningsfelter og radioer understøttes, men for at give en not-allowed markør på musens svæver <label>, skal du tilføje attributten disabled til .form-check-input. Funktionen deaktiveret vil anvende en lysere farve for at hjælpe med at indikere inputets tilstand.

Brug af afkrydsningsfelter og radioer er bygget til at understøtte HTML-baseret formvalidering og give kortfattede, tilgængelige etiketter. Som sådan er vores <input> s og <label> s søskendeelementer i modsætning til en <input> inden for en <label>. Dette er lidt mere detaljeret, da du skal angive id og for attributter for at relatere <input> og <label>.

Standard (stablet)

Som standard vil et vilkårligt antal afkrydsningsfelter og radioer, der er søskende, stables lodret og passende afstand med .form-check.

Integreret

Gruppér afkrydsningsfelter eller radioer på samme vandrette række ved at tilføje .form-check-inline til enhver .form-check.

Uden etiketter

Tilføj .position-static til input inden for .form-check, der ikke har nogen etikettekst. Husk at stadig give en eller anden form for etiket til hjælpende teknologier (f.eks. Ved hjælp af aria-label).

Layout

Da Bootstrap anvender display: block og width: 100% til næsten alle vores formkontroller , formularer stables som standard lodret. Yderligere klasser kan bruges til at variere dette layout pr. Form.

Formgrupper

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

Formulargitter

Mere komplekse formularer kan bygges ved hjælp af vores gridklasser. Brug disse til formularlayouter, der kræver flere kolonner, varierede bredder og yderligere justeringsmuligheder.

Formularrække

Du kan også bytte .row til .form-row, en variation af vores standard gitter række, der tilsidesætter standard kolonne tagrender til strammere og mere kompakte layouts.

Mere komplekse layouts kan også oprettes med gittersystemet.

Horisontal form

Opret vandrette formularer med gitteret ved at tilføje .row klassen til at danne grupper og bruge .col-*-* klasser for at specificere bredden på dine etiketter og kontrolelementer. Sørg for også at tilføje .col-form-label til dine <label> så de er lodret centreret med deres tilknyttede formkontroller.

Til tider skal du måske bruge margen- eller polstringsværktøjer til at skabe den perfekte justering, du har brug for. For eksempel har vi fjernet padding-top på vores stablede radioindgangsetiket for bedre at justere tekstbaseline.

Vandret formetiket størrelse

Kolonnestørrelse

Som vist i de foregående eksempler giver vores gittersystem dig mulighed for at placere et vilkårligt antal .col s inden for en .row eller .form-row. De deler den tilgængelige bredde ligeligt mellem dem. Du kan også vælge et undersæt af dine kolonner for at tage mere eller mindre plads, mens de resterende .col er lige så opdelt resten med specifikke kolonneklasser som .col-7.

Automatisk størrelse

Eksemplet nedenfor bruger et flexbox-værktøj til at lodrette centrere indholdet og ændre .col til .col-auto, så dine kolonner kun tager så meget plads som nødvendigt. Sagt på en anden måde, størrelsen på selve søjlen er baseret på indholdet.

Du kan derefter remixe det igen med størrelsesspecifikke søjleklasser.

Og selvfølgelig understøttes brugerdefinerede formkontroller.

Integrerede formularer

Brug .form-inline klasse for at få vist en række etiketter, formkontroller og knapper på en enkelt vandret række. Formularstyringer inden for integrerede former varierer lidt fra deres standardtilstande.

• Kontrolelementer er display: flex, der skjuler ethvert HTML-hvidt mellemrum og giver dig mulighed for at give justeringskontrol med afstands- og flexbox-hjælpeprogrammer.
• Kontrolelementer og inputgrupper modtager width: auto for at tilsidesætte Bootstrap-standard width: 100%.
• Kontrolelementer vises kun indbygget i visningsporte, der er mindst 576 px brede for at tage højde for smalle visningsport på mobile enheder.

Det kan være nødvendigt at manuelt adressere bredden og justeringen af individuelle formkontroller med afstandsværktøjer (som vist nedenfor). Endelig skal du altid medtage en <label> med hver formkontrol, selvom du har brug for at skjule det for ikke-skærmlæser besøgende med .sr-only .

Brugerdefinerede formkontroller og markeringer understøttes også.

Hjælpstekst

Hjælpstekst på blokniveau i formularer kan oprettes ved hjælp af .form-text (tidligere kendt som .help-block i v3). Integreret hjælpetekst kan implementeres fleksibelt ved hjælp af ethvert indbygget HTML-element og hjælpeklasser som .text-muted.

Hjælpetekst nedenfor input kan styles med .form-text. Denne klasse inkluderer display: block og tilføjer noget topmargen for nem afstand fra input ovenfor.

Integreret tekst kan bruge et hvilket som helst typisk indbygget HTML-element (det være sig en <small>, <span> eller noget andet) med intet mere end en hjælpeklasse.

Deaktiverede formularer

Tilføj disabled boolesk attribut på et input for at forhindre brugerinteraktioner og få det til at vises lettere.

Tilføj disabled attribut til en <fieldset> for at deaktivere alle kontrollerne inden for.

Validering

Giv værdifuld, brugbar feedback til dine brugere med HTML5-formvalidering – tilgængelig i alle vores understøttede browsere. Vælg fra browserens standardvalideringsfeedback, eller implementer brugerdefinerede meddelelser med vores indbyggede klasser og start-JavaScript.

Sådan fungerer det

Sådan fungerer formularvalidering med Bootstrap:

• HTML-formularvalidering anvendes via CSSs to pseudoklasser, :invalid og :valid. Det gælder for <input>, <select> og <textarea> -elementer.
• Bootstrap afgrænser :invalid og :valid -klassen til forælder .was-validated -klassen, normalt anvendt på klassen <form>. Ellers vises ethvert obligatorisk felt uden en værdi som ugyldigt ved sideindlæsning. På denne måde kan du vælge, hvornår du vil aktivere dem (typisk efter at formularindsendelse er forsøgt).
• Som et tilbagefald skal .is-invalid og .is-valid klasser kan bruges i stedet for pseudoklasser til validering af serversiden. De kræver ikke en .was-validated overordnet klasse.
• På grund af begrænsninger i, hvordan CSS fungerer, kan vi ikke (i øjeblikket) anvende stilarter på en <label>, der kommer foran en formularkontrol i DOM uden hjælp fra brugerdefineret JavaScript.
• Alle moderne browsere understøtter begrænsningsvaliderings-APIet, en række JavaScript-metoder til validering af formkontroller.
• Feedbackmeddelelser kan bruge browserens standardindstillinger (forskellige for hver browser og ustabile via CSS) eller vores tilpassede feedback-stilarter med yderligere HTML og CSS.
• Du kan give brugerdefinerede gyldighedsmeddelelser med setCustomValidity i JavaScript.

Med det i tankerne skal du overveje følgende demoer for vores brugerdefinerede formvalideringsstile, valgfri serversideklasser og standardindstillinger for browseren.

Tilpassede stilarter

For brugerdefinerede Bootstrap-formularvalideringsmeddelelser skal du føje novalidate boolesk attribut til din <form>. Dette deaktiverer browserens standardværktøjstip til feedback, men giver stadig adgang til formvaliderings-APIerne i JavaScript. Prøv at indsende nedenstående formular; vores JavaScript opfanger sendeknappen og videresender feedback til dig.

Når du prøver at indsende, ser du :invalid og :valid stilarter anvendt på dine formularkontroller.

Browserstandarder

Er du ikke interesseret i brugerdefinerede valideringsfeedback-beskeder eller at skrive JavaScript for at ændre formadfærd? Alt godt, du kan bruge browserens standardindstillinger. Prøv at indsende nedenstående formular. Afhængigt af din browser og operativsystem vil du se en lidt anden typografi for feedback.

Selvom disse feedback-typografier ikke kan designes med CSS, kan du stadig tilpasse feedback-teksten via JavaScript.

Serverside

Vi anbefaler at bruge validering af klientsiden, men hvis du har brug for serversiden, kan du angive ugyldige og gyldige formularfelter med .is-invalid og .is-valid. Bemærk, at .invalid-feedback også understøttes af disse klasser.

Understøttede elementer

Vores eksempelformularer viser indfødte tekstlige <input> s ovenfor, men formvalideringsstile er tilgængelige også til vores brugerdefinerede formularkontroller.

Værktøjstip

Hvis dit formularlayout tillader det, kan du bytte .{valid|invalid}-feedback klasser til .{valid|invalid}-tooltip klasser for at få vist valideringsfeedback i et stylet værktøjstip. Sørg for at have en forælder med position: relative til positionering af værktøjstip. I eksemplet nedenfor har vores kolonneklasser dette allerede, men dit projekt kan kræve en alternativ opsætning.

Brugerdefinerede formularer

For endnu mere tilpasning og krydsning browser konsistens, brug vores helt tilpassede formelementer til at erstatte browserens standardindstillinger. De er bygget oven på semantisk og tilgængelig markering, så de er solide erstatninger for enhver standardformularstyring.

Afkrydsningsfelter og radioer

Hver afkrydsningsfelt og radio er pakket ind i en <div> med et søskende <span> for at oprette vores brugerdefinerede kontrol og en <label> til den ledsagende tekst. Strukturelt er dette den samme tilgang som vores standard .form-check.

Vi bruger søskendevælgeren (~) til alle vores <input> -tilstande – ligesom :checked – for at style vores tilpassede formindikator korrekt. Når det kombineres med .custom-control-label -klassen, kan vi også style teksten for hvert element baseret på <input> s tilstand.

Vi skjuler standard <input> med opacity og bruger .custom-control-label til at bygge en ny brugerdefineret formindikator på plads med ::before og ::after. Desværre kan vi ikke oprette en brugerdefineret fra bare <input>, fordi CSSs content ikke fungerer på dette element.

I de markerede tilstande bruger vi base64 integrerede SVG-ikoner fra Open Iconic. Dette giver os den bedste kontrol til styling og placering på tværs af browsere og enheder.

Afkrydsningsfelter

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

Hvis du bruger jQuery, skal noget som dette være tilstrækkeligt:

Radioer

Integreret

Deaktiveret

Brugerdefinerede afkrydsningsfelter og radioer kan også deaktiveres. Føj disabled boolesk attribut til <input>, og den tilpassede indikator og etiketbeskrivelse styles automatisk.

Vælg menu

Tilpasset <select> menuer behøver kun en brugerdefineret klasse .custom-select for at udløse de tilpassede typografier.

Du kan også vælge mellem små og store brugerdefinerede markeringer til matcher vores tekstinput med samme størrelse.

multiple attributten understøttes også:

Som size -attributten er:

Filbrowser

Filinput er den mest gnarly af gruppen og kræver yderligere JavaScript, hvis du vil tilslutte dem med funktionel Vælg fil … og valgt filnavnetekst.

Vi skjuler standardfilen <input> via og stil i stedet <label>. Knappen genereres og placeres med ::after. Endelig erklærer vi en width og height på <input> for korrekt afstand til omgivende indhold .

Oversættelse eller tilpasning af strengene

:lang() pseudoklassen bruges til at muliggøre oversættelse af “Gennemse” -teksten til andre sprog. Tilsidesæt 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 er her, hvordan man kan tilføje en spansk oversættelse (spansk sprogkode er es):

Her er lang(es) i aktion på det brugerdefinerede filinput til en spansk oversættelse:

Du bliver nødt til at indstille sproget i dit dokument (eller undertræ dertil) korrekt for at den korrekte tekst skal vises. Dette kan gøres ved hjælp af lang -attributten på <html> -elementet eller Content-Language HTTP-header , blandt andre metoder.