Formulär

Exempel och användningsriktlinjer för formulärkontrollstilar, layoutalternativ och anpassade komponenter för att skapa en mängd olika former.

Översikt

Bootstraps formulärkontroller utökar våra omstartade formulärstilar med klasser. Använd dessa klasser för att välja sina anpassade skärmar för en mer konsekvent återgivning över webbläsare och enheter.

Var noga med att använda ett lämpligt type -attribut på alla ingångar (t.ex. , email för e-postadress eller number för numerisk information) för att dra nytta av nyare ingångskontroller som e-postverifiering, nummerval och mer.

Här är ett snabbt exempel för att visa Bootstraps formformat. Fortsätt läsa för dokumentation om obligatoriska klasser, formulärlayout och mer.

Formkontroller

Se till att utforska våra anpassade formulär för att ytterligare utforma <select> s.

För filingångar byter du .form-control mot .form-control-file.

Storlek

Ställ in höjder med klasser som .form-control-lg och .form-control-sm.

Läsbart

Lägg till readonly boolean attribut på en ingång för att förhindra ändring av ingångens värde. Skrivskyddade ingångar verkar ljusare (precis som inaktiverade ingångar), men behåll standardmarkören.

Skyddat klartext

Om du vill ha <input readonly> -element i din form utformad som vanlig text, använd .form-control-plaintext class för att ta bort standardformulärfältet och bevara rätt marginal och stoppning.

Kryssrutor och radioapparater

Standard kryssrutor och radioer förbättras med hjälp av .form-check, en enda klass för båda inmatningstyperna som förbättrar layouten och beteendet för deras HTML-element. Kryssrutor är för att välja ett eller flera alternativ i en lista, medan radioapparater är för att välja ett alternativ från många.

Inaktiverade kryssrutor och radioapparater stöds, men för att tillhandahålla en not-allowed markör på förälderns <label>, måste du lägga till attributet disabled till .form-check-input. Det inaktiverade attributet kommer att använda en ljusare färg för att indikera ingångens tillstånd.

Kryssrutor och radioapparater är byggda för att stödja HTML-baserad formulärvalidering och tillhandahålla kortfattade, tillgängliga etiketter. Som sådan är våra <input> s och <label> s syskonelement i motsats till en <input> inom en <label>. Det här är något mer detaljerat eftersom du måste ange id och for attribut för att relatera <input> och <label>.

Standard (staplad)

Som standard staplas valfritt antal kryssrutor och radio som är omedelbart syskon och lämpligt fördelat med .form-check.

Inbyggd

Gruppera kryssrutor eller radioer på samma horisontella rad genom att lägga till .form-check-inline till alla .form-check.

Utan etiketter

Lägg till .position-static till ingångar inom .form-check som inte har någon etiketttext. Kom ihåg att fortfarande tillhandahålla någon form av etikett för hjälptekniker (till exempel med aria-label).

Layout

Eftersom Bootstrap tillämpar display: block och width: 100% på nästan alla våra formulärkontroller , formulär staplas som standard vertikalt. Ytterligare klasser kan användas för att variera denna layout per form.

Formgrupper

.form-group -klassen är det enklaste sättet för att lägga till lite struktur i formulär. Det ger en flexibel klass som uppmuntrar till korrekt gruppering av etiketter, kontroller, valfri hjälptext och formvalideringsmeddelanden. Som standard gäller det bara margin-bottom, men det hämtar ytterligare stilar i .form-inline efter behov. Använd den med <fieldset> s, <div> s eller nästan vilket annat element som helst.

Formgaller

Mer komplexa former kan byggas med hjälp av våra rutnätklasser. Använd dessa för formulärlayouter som kräver flera kolumner, varierade bredder och ytterligare justeringsalternativ.

Formrad

Du kan också byta .row mot .form-row, en variant av vår standardnätrad som åsidosätter standardkolumnrännor för stramare och mer kompakta layouter.

Mer komplexa layouter kan också skapas med nätverket.

Horisontell form

Skapa horisontella former med rutnätet genom att lägga till klassen .row för att bilda grupper och använda .col-*-* klasser för att ange bredden på dina etiketter och kontroller. Var noga med att lägga till .col-form-label till dina <label> så att de är vertikalt centrerade med tillhörande formkontroller.

Ibland behöver du kanske använda marginal- eller vadderingsverktyg för att skapa den perfekta anpassningen du behöver. Vi har till exempel tagit bort padding-top på vår staplade radioingångsetikett för att bättre anpassa textbaslinjen.

Horisontell formetikett storlek

Kolumnstorlek

Som visas i de föregående exemplen tillåter vårt rutnät att placera valfritt antal .col s inom en .row eller .form-row. De delar den tillgängliga bredden lika mellan sig. Du kan också välja en delmängd av dina kolumner för att ta mer eller mindre utrymme, medan de återstående .col delar upp resten, med specifika kolumnklasser som .col-7.

Autostorlek

Exemplet nedan använder ett flexbox-verktyg för att vertikalt centrera innehållet och ändra .col till .col-auto så att dina kolumner bara tar upp så mycket utrymme som behövs. På ett annat sätt, kolumnstorlekarna i sig baserat på innehållet.

Du kan sedan remixa det igen med storleksspecifika kolumnklasser.

Och naturligtvis stöds anpassade formulärkontroller.

Inline-formulär

Använd .form-inline klass för att visa en serie etiketter, formulärkontroller och knappar på en enda horisontell rad. Formkontroller inom integrerade formulär skiljer sig något från deras standardtillstånd.

• Kontrollerna är display: flex, kollapsar alla HTML-vitt utrymmen och låter dig ge justeringskontroll med avstånds- och flexbox-verktyg.
• Kontroller och ingångsgrupper tar emot width: auto för att åsidosätta Bootstrap-standard width: 100%.
• Kontroller visas bara inbyggda i visningsportar som är minst 576 pixlar breda för att ta hänsyn till smala visningsportar på mobila enheter.

Du kan behöva adressera bredden och justeringen av enskilda formulärkontroller manuellt med avståndsverktyg (som visas nedan). Slutligen, se till att alltid inkludera en <label> med varje formulärkontroll, även om du behöver dölja den från icke-skärmläsare med .sr-only .

Anpassade formulärkontroller och val stöds också.

Hjälptext

Hjälptext på blocknivå i formulär kan skapas med .form-text (tidigare känd som .help-block i v3). Inbyggd hjälptext kan implementeras flexibelt med valfritt inbyggt HTML-element och verktygsklasser som .text-muted.

Hjälptexten nedan kan ingångarna utformas med .form-text. Den här klassen inkluderar display: block och lägger till lite toppmarginal för enkel avstånd från ingångarna ovan.

Inbyggd text kan använda vilket typiskt inbyggt HTML-element som helst (vare sig det är <small>, <span> eller något annat) med inget annat än en verktygsklass.

Inaktiverade formulär

Lägg till disabled boolesk attribut på en ingång för att förhindra användarinteraktioner och få den att visas lättare.

Lägg till disabled attribut till en <fieldset> för att inaktivera alla kontroller inom.

Validering

Ge värdefull, användbar återkoppling till dina användare med HTML5-formulärvalidering – tillgänglig i alla våra webbläsare som stöds. Välj från webbläsarens standardvalideringsfeedback, eller implementera anpassade meddelanden med våra inbyggda klasser och starta JavaScript.

Så fungerar det

Så här fungerar formvalidering med Bootstrap:

• HTML-formulärvalidering tillämpas via CSS: s två pseudoklasser, :invalid och :valid. Det gäller <input>, <select> och <textarea> -element.
• Bootstrap omfattar :invalid och :valid -klasserna till föräldern .was-validated -klassen <form>. I annat fall visas alla obligatoriska fält utan ett värde som ogiltigt vid sidinläsning. På det här sättet kan du välja när du vill aktivera dem (vanligtvis efter att formulärsändning har försökt).
• Som reserv, .is-invalid och .is-valid klasser kan användas istället för pseudoklasser för validering av serversidan. De kräver inte en .was-validated föräldraklass.
• På grund av begränsningar i hur CSS fungerar kan vi inte (för närvarande) tillämpa stilar på en <label> som kommer före en formulärkontroll i DOM utan hjälp av anpassad JavaScript.
• Alla moderna webbläsare stöder begränsningen validering API, en serie JavaScript-metoder för att validera formulärkontroller.
• Feedbackmeddelanden kan använda webbläsarens standardinställningar (olika för varje webbläsare, och unstylable via CSS) eller våra anpassade feedbackformat med ytterligare HTML och CSS.
• Du kan tillhandahålla anpassade giltighetsmeddelanden med setCustomValidity i JavaScript.

Med det i åtanke, överväga följande demos för våra anpassade formulärvalideringsstilar, valfria serversidklasser och webbläsarinställningar.

Anpassade formatmallar

För anpassade Bootstrap-formulärvalideringsmeddelanden måste du lägga till novalidate booleskt attribut till ditt <form>. Detta inaktiverar webbläsarens standardtips för återkoppling, men ger fortfarande åtkomst till API: er för formvalidering i JavaScript. Försök att skicka in formuläret nedan; vår JavaScript kommer att fånga upp skicka-knappen och vidarebefordra feedback till dig.

När du försöker skicka ser du :invalid och :valid -stilar tillämpas på dina formulärkontroller.

Standardinställningar för webbläsare

Är du inte intresserad av anpassade valideringsmeddelanden eller skriver JavaScript för att ändra formulärbeteenden? Allt bra, du kan använda standardinställningarna i webbläsaren. Försök att skicka in formuläret nedan. Beroende på din webbläsare och operativsystem ser du en lite annan typ av feedback.

Även om dessa feedbackformat inte kan utformas med CSS, kan du ändå anpassa feedbackstexten genom JavaScript.

Serversida

Vi rekommenderar att du använder validering på klientsidan, men om du behöver serversidan kan du ange ogiltiga och giltiga formulärfält med .is-invalid och .is-valid. Observera att .invalid-feedback också stöds med dessa klasser.

Element som stöds

Våra exempelformulär visar ursprungliga textliga <input> ovan, men formulärvalideringsstilar finns tillgängliga för våra anpassade formulärkontroller också.

Verktygstips

Om din formulärlayout tillåter det kan du byta .{valid|invalid}-feedback klasser för .{valid|invalid}-tooltip klasser för att visa valideringsåterkoppling i en utformad verktygstips. Se till att du har en förälder med position: relative för positionering av verktygstips. I exemplet nedan har våra kolumnklasser detta redan, men ditt projekt kan kräva en alternativ installation.

Anpassade formulär

För ännu mer anpassning och korsning webbläsarkonsistens, använd våra helt anpassade formulärelement för att ersätta webbläsarens standardinställningar. De är byggda ovanpå semantisk och tillgänglig markering, så de är solida ersättare för alla standardformulärskontroller.

Kryssrutor och radio

Varje kryssruta och radio är inslagna i en <div> med ett syskon <span> för att skapa vår anpassade kontroll och en <label> för den medföljande texten. Strukturellt är detta samma tillvägagångssätt som vår standard .form-check.

Vi använder syskonväljaren (~) för alla våra <input> stater – som :checked – för att utforma vår anpassade formulärindikator ordentligt. När det kombineras med klassen .custom-control-label kan vi också utforma texten för varje objekt baserat på <input> s tillstånd.

Vi döljer standard <input> med opacity och använder .custom-control-label för att bygga en ny anpassad formulärindikator i stället med ::before och ::after. Tyvärr kan vi inte bygga en anpassad från bara <input> eftersom CSS: s content inte fungerar på det elementet.

I de markerade tillstånden använder vi base64-inbäddade SVG-ikoner från Open Iconic. Detta ger oss den bästa kontrollen för styling och positionering över webbläsare och enheter.

Kryssrutor

Anpassade kryssrutor kan också använda :indeterminate pseudoklassen när manuellt ställs in via JavaScript (det finns inget tillgängligt HTML-attribut för att specificera det).

Om du använder jQuery borde något sådant räcka:

Radios

Inline

Inaktiverad

Anpassade kryssrutor och radio kan också inaktiveras. Lägg till disabled boolesk attribut till <input> och den anpassade indikatorn och etikettbeskrivningen utformas automatiskt.

Välj meny

Anpassad <select> menyer behöver bara en anpassad klass, .custom-select för att utlösa anpassade format.

Du kan också välja mellan små och stora anpassade val till matchar våra textinmatningar av samma storlek.

multiple attributet stöds också:

Så är attributet size:

Filwebbläsare

Filinmatningen är den mest gnarly av gruppen och kräver ytterligare JavaScript om du vill ansluta dem med funktionell Välj fil … och markerad filnamnstext.

Vi döljer standardfilen <input> via och istället utforma <label>. Knappen genereras och placeras med ::after. Slutligen förklarar vi en width och height på <input> för korrekt avstånd för omgivande innehåll .

Översättning eller anpassning av strängarna

:lang() pseudoklass används för att möjliggöra översättning av ”Bläddra” -texten till andra språk. Åsidosätt eller lägg till poster i $custom-file-text Sass-variabeln med relevant språktagg och lokaliserade strängar. De engelska strängarna kan anpassas på samma sätt.Så här kan du till exempel lägga till en spansk översättning (spanskas språkkod är es):

Här är lang(es) i aktion för den anpassade filinmatningen för en spansk översättning:

Du måste ställa in språket för ditt dokument (eller underträd därav) korrekt för att korrekt text ska visas. Detta kan göras med attributet lang på <html> -elementet eller Content-Language HTTP-rubrik , bland andra metoder.