Forms

exempel och användningsriktlinjer för formkontrollstilar, layoutalternativ och anpassade komponenter för att skapa en mängd olika former.

översikt

bootstraps Formulärkontroller expanderar på våra omstartade formatmallar med klasser. Använd dessa klasser för att välja sina anpassade skärmar för en mer konsekvent rendering över webbläsare och enheter.

var noga med att använda ett lämpligttype – 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 inmatningskontroller som e-postverifiering, nummerval och mer.

här är ett snabbt exempel för att visa Bootstraps formatmallar. Fortsätt läsa för dokumentation om nödvändiga klasser, formulärlayout och mer.

Formulärkontroller

var noga med att utforska våra anpassade formulär för att ytterligare stil<select>s.

för filingångar, byt.form-control för.form-control-file.,

dimensionering

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

Readonly

Lägg tillreadonly booleska attribut på en ingång för att förhindra ändring av inmatningens värde. Skrivskyddade ingångar visas lättare (precis som inaktiverade ingångar), men behåll standardmarkören.,

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

Readonly vanlig text

om du vill ha<input readonly> element i din form formaterad som vanlig text, använd.form-control-plaintext – klassen för att ta bort standardformfältsstyling och bevara rätt marginal och stoppning.

range ingångar

Ställ in horisontellt rullbara range ingångar med.form-control-range.,

kryssrutor och radioapparater

standard kryssrutor och radioapparater förbättras med hjälp av.form-check, en enda klass för båda ingångstyperna som förbättrar layouten och beteendet hos 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.

avaktiverade kryssrutor och radioapparater stöds. Attributetdisabled använder en ljusare färg för att indikera inmatningens tillstånd.,

kryssrutor och radioapparater används för att stödja HTML-baserad formulärvalidering och ge koncisa, tillgängliga etiketter. Som sådan är våra <input>s och <label>s syskon i motsats till en <input> inom en <label>. Detta är något mer utförligt eftersom du måste ange attributen id och for för att relatera attributen <input> och <label>.,

default (stacked)

som standard kommer valfritt antal kryssrutor och radioapparater som är omedelbara syskon att staplas vertikalt och placeras på lämpligt sätt med .form-check.

Inline

grupp kryssrutor eller radioapparater på samma horisontella rad genom att lägga till .form-check-inline till någon .form-check.,

utan etiketter

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

Layout

eftersom Bootstrap gällerdisplay: block ochwidth: 100% till nästan alla våra Formulärkontroller kommer formulär som standard att stapla vertikalt. Ytterligare klasser kan användas för att variera denna layout per formulär.

Formulärgrupper

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

Form grid

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

Formulärrad

Du kan också byta.row för.form-row, en variant av vår standard rutnätsrad som åsidosätter standardkolumnens takrännor för tätare och mer kompakta layouter.

mer komplexa layouter kan också skapas med gridsystemet.

horisontell form

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

ibland, du kanske behöver använda marginal eller stoppning verktyg för att skapa den perfekta anpassningen du behöver. Till exempel har vi tagit bort padding-top på vår staplade radioingångar etikett för att bättre anpassa textens baslinje.,

horisontell form etikett dimensionering

kolumn dimensionering

som visas i de tidigare exemplen, vår gridsystem kan du placera valfritt antal.cols inom en.row eller.form-row. De kommer att dela den tillgängliga bredden lika mellan dem. Du kan också välja en delmängd av dina kolumner för att ta upp mer eller mindre utrymme, medan det återstående.colär lika dela resten, med specifika kolumnklasser som.col-7.,

automatisk dimensionering

exemplet nedan använder ett flexbox-verktyg för att vertikalt centrera innehållet och ändringarna.col till.col-auto så att dina kolumner bara tar upp så mycket utrymme som behövs. Sätt ett annat sätt, kolumnstorlekarna själv baserat på innehållet.

Du kan sedan remixa det igen med storleksspecifika kolumnklasser.

och naturligtvis anpassade Formulärkontroller stöds.,

Inline forms

använd klassen.form-inline för att visa en serie etiketter, Formulärkontroller och knappar på en enda horisontell rad. Formulärkontroller inom inline-formulär varierar något från deras standardtillstånd.

• kontrollerna ärdisplay: flex, kollapsar någon HTML vitt utrymme och låter dig ge justeringskontroll med avstånd och flexbox verktyg.
• kontroller och ingångsgrupper tar emot width: autoför att åsidosätta Bootstrap-standard width: 100%.,
• kontroller visas bara inline i viewports som är minst 576px wide för att ta hänsyn till smala visningsportar på mobila enheter.

Du kan behöva manuellt ta itu med bredden och inriktningen av enskilda formulärkontroller 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 det från icke-screenreader besökare med.sr-only.

anpassade Formulärkontroller och markeringar stöds också.,

hjälptext

hjälptext på blocknivå i formulär kan skapas med hjälp av.form-text (tidigare känd som.help-block I v3). Inline help text kan implementeras flexibelt med hjälp av alla inline HTML-element och verktygsklasser som .text-muted.,

hjälptexten nedan ingångar kan formateras med.form-text. Den här klassen innehåller display: block och lägger till lite övre marginal för enkel avstånd från ingångarna ovan.,

Inline text kan använda någon typisk inline HTML-element (vare sig det är en <small>, <span>, eller något annat) med inget annat än ett verktyg klass.

inaktiverade formulär

Lägg tilldisabled booleska attribut på en ingång för att förhindra användarinteraktioner och få det att verka lättare.,

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

Lägg till attributetdisabled till ett<fieldset> för att inaktivera alla kontroller inom.

validering

ge värdefull, angripbar feedback till dina användare med HTML5–formvalidering-tillgänglig i alla våra webbläsare som stöds. Välj från webbläsaren standard validering feedback, eller genomföra anpassade meddelanden med våra inbyggda klasser och starter JavaScript.,

hur det fungerar

Så här fungerar formulärvalidering med Bootstrap:

• HTML-formulärvalidering tillämpas via CSS: s två pseudoklasser,:invalid och:valid. Det gäller<input>,<select> och<textarea> element.,
• Bootstrap scopes:invalid och:valid stilar till förälder.was-validated klass, vanligtvis tillämpas på<form>. Annars visas ett obligatoriskt fält utan ett värde som ogiltigt vid sidbelastning. På så sätt kan du välja när du vill aktivera dem (vanligtvis efter form inlämning försök).
• för att återställa utseendet på formuläret (till exempel när det gäller dynamiska formulärinlagor med AJAX), ta bort Klassen.was-validated från klassen<form> igen efter inlämning.,
• som reserv kan.is-invalid och.is-valid klasser användas istället för pseudoklasserna för validering av serversidan. De kräver inte en .was-validated överordnad klass.
• 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 constraint validation API, en serie JavaScript-metoder för att validera Formulärkontroller.,
• Feedbackmeddelanden kan använda webbläsarens standardvärden (olika för varje webbläsare, och unstylable via CSS) eller våra anpassade återkopplingsstilar med ytterligare HTML och CSS.
• Du kan tillhandahålla anpassade validitetsmeddelanden medsetCustomValidity I JavaScript.

med detta i åtanke, överväga följande demos för våra anpassade formvaliderings stilar, valfria server sidoklasser och webbläsare standard.,

anpassade stilar

För Anpassade Bootstrap-formulärvalideringsmeddelanden måste du lägga tillnovalidate booleska attributet till ditt<form>. Detta inaktiverar webbläsarens standardåterkopplingsverktygstips, men ger fortfarande tillgång till API: er för formulärvalidering i JavaScript. Försök att skicka in formuläret nedan; vår JavaScript kommer att avlyssna Skicka-knappen och vidarebefordra feedback till dig. När du försöker skicka in ser du formatmallarna :invalid och :valid som tillämpas på formulärkontrollerna.,

anpassade återkopplingsstilar använder anpassade färger, gränser, fokusstilar och bakgrundsikoner för att bättre kommunicera feedback. Bakgrundsikoner för <select>s är endast tillgängliga med .custom-select, och inte .form-control.

webbläsare standard

inte intresserad av anpassade valideringsresponsmeddelanden eller skriva JavaScript för att ändra formulärbeteenden? Allt bra, du kan använda webbläsarens standardvärden. Försök att skicka in formuläret nedan. Beroende på din webbläsare och operativsystem ser du en något annorlunda stil av feedback.,

även om dessa återkopplingsstilar inte kan formateras med CSS, kan du fortfarande anpassa återkopplingstexten via JavaScript.

serversidan

Vi rekommenderar att du använder validering på klientsidan, men om du behöver validering på 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

Valideringsstilar är tillgängliga för följande Formulärkontroller och komponenter:

verktygstips

om formulärlayouten tillåter det kan du byta.{valid|invalid}-feedback klasser för.{valid|invalid}-tooltip klasser för att visa valideringsåterkoppling i ett stilverktyg. Var noga med att ha en förälder med position: relative på den för tooltip positionering. I exemplet nedan har våra kolumnklasser detta redan, men ditt projekt kan kräva en alternativ inställning.,

anpassa

Valideringstillstånd kan anpassas via Sass med$form-validation-states kartan. Ligger i vår _variables.scss fil, loopas denna Sass-karta över för att generera standardvalid/invalid valideringstillstånd. Inkluderat är en kapslad karta för att anpassa varje stats färg och ikon. Medan inga andra stater stöds av webbläsare kan de som använder anpassade stilar enkelt lägga till mer komplex formåterkoppling.,

Observera att vi inte rekommenderar att du anpassar dessa värden utan att även ändraform-validation-state mixin.

anpassade formulär

använd våra helt anpassade formulärelement för att ersätta webbläsarens standardinställningar för ännu mer anpassning och enhetlighet. De är byggda ovanpå semantisk och tillgänglig markering, så de är solida ersättare för någon standardformkontroll.,

kryssrutor och radio

varje kryssruta och radio<input> och<label> parkopplingen är insvept i en<div> för att skapa vår egen kontroll. Strukturellt är detta samma tillvägagångssätt som vår standard .form-check.

vi använder syskon väljaren (~) för alla våra<input> stater—som:checked—för att korrekt formatera vår anpassade formulärindikator., I kombination med klassen.custom-control-label kan vi också formatera texten för varje objekt baserat på tillståndet<input>.

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

i de kontrollerade staterna använder vi base64 embedded SVG icons 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 pseudo-klassen när den ställs in manuellt via JavaScript (det finns inget tillgängligt HTML-attribut för att ange det).,

om du använder jQuery bör något liknande räcka:

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

Radior

inline

inaktiverad

anpassade kryssrutor och radioapparater kan också inaktiveras., Lägg tilldisabled booleska attributet till<input> och den anpassade indikatorn och etikettbeskrivningen kommer automatiskt att formateras.

växlar

en omkopplare har markeringen av en anpassad kryssruta men använder klassen.custom-switch för att göra en växelströmbrytare. Växlar stöder också attributetdisabled.,

Välj Meny

anpassade<select> menyer behöver bara en anpassad klass,.custom-select för att utlösa anpassade stilar. Anpassade stilar är begränsade till<select>ursprungliga utseende och kan inte ändra<option>s på grund av webbläsarbegränsningar.

Du kan också välja mellan små och stora anpassade val för att matcha våra textinmatningar med samma storlek.,

attributet multiple stöds också:

som är attributet size:

Range

Skapa anpassad <input type="range"> kontroller med .custom-range. Spåret (bakgrunden) och tummen (värdet) är båda formaterade för att visas samma över webbläsare. Eftersom endast IE och Firefox stöder ”fyllning” sitt spår från vänster eller höger om tummen som ett sätt att visuellt indikera framsteg, stöder vi för närvarande inte 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., För att ändra detta kan du ange ett värde step. I exemplet nedan dubblar vi antalet steg genom att använda step="0.5".

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

filbläddrare

filinmatningen är den mest gnarly av gänget och kräver ytterligare JavaScript om du vill koppla upp dem med funktionell Välj fil… och markerad filnamnstext.

vi döljer standardfilen <input> via opacity och istället formatera <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ätta eller anpassa strängarna med SCSS

:lang() pseudo-klass används för att tillåta översättning av texten ”Bläddra” till andra språk. Åsidosätt eller lägg till poster i variabeln $custom-file-text Sass med den relevanta språktaggen och lokaliserade strängar. De Engelska strängarna kan anpassas på samma sätt., Så här kan man till exempel lägga till en spansk översättning (Spaniens språkkod är es):

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

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

du måste ställa in språket i ditt dokument (eller underträd därav) korrekt för att korrekt text ska visas., Detta kan göras medlang – attributet på<html> – elementet ellerContent-Language HTTP-rubriken, bland andra metoder.

översätta eller anpassa strängarna med HTML

Bootstrap ger också ett sätt att översätta texten ”bläddra” i HTML med attributet data-browse som kan läggas till den anpassade inmatningsetiketten (exempel på nederländska):