Blanketter
Exempel och användningsriktlinjer för formulärkontrollstilar, layoutalternativ och anpassade komponenter för att skapa en mängd olika formulär.
Översikt
Bootstraps formulärkontroller expanderar på våra omstartade formulärstilar med klasser. Använd dessa klasser för att välja deras anpassade skärmar för en mer konsekvent rendering över webbläsare och enheter.
Se till att använda ett lämpligt type
attribut på alla ingångar (t.ex. email
för e-postadresser 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 demonstrera Bootstraps formstilar. Fortsätt läsa för dokumentation om obligatoriska klasser, formulärlayout och mer.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Formulärkontroller
Textformkontroller – som <input>
s, <select>
s och <textarea>
s – utformas med .form-control
klassen. Inkluderat är stilar för allmänt utseende, fokustillstånd, storlek och mer.
Var noga med att utforska våra anpassade formulär för att ytterligare styla <select>
s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
För filinmatning, byt ut .form-control
mot .form-control-file
.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Dimensionering
Ställ in höjder med klasser som .form-control-lg
och .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Skrivskyddad
Lägg till det readonly
booleska attributet på en ingång för att förhindra modifiering av ingångens värde. Skrivskyddade ingångar ser ljusare ut (precis som inaktiverade ingångar), men behåller standardmarkören.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Skrivskyddad vanlig text
Om du vill ha <input readonly>
element i ditt formulär utformade som vanlig text, använd .form-control-plaintext
klassen för att ta bort standardformatet för formulärfältet och bevara rätt marginal och utfyllnad.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Range Inputs
Ställ in horisontellt rullningsbara intervallingångar med .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Kryssrutor och radioapparater
Standardkryssrutor och radioapparater förbättras med hjälp av .form-check
en enda klass för båda inmatningstyperna som förbättrar layouten och beteendet hos deras HTML-element . Kryssrutorna är för att välja ett eller flera alternativ i en lista, medan radioapparater är för att välja ett alternativ bland många.
Inaktiverade kryssrutor och radioapparater stöds. Attributet disabled
kommer att tillämpa en ljusare färg för att indikera ingångens tillstånd.
Kryssrutor och alternativknappar stöder HTML-baserad formulärvalidering och ger kortfattade, tillgängliga etiketter. Som sådana är våra <input>
s och <label>
s syskonelement i motsats till ett <input>
inom en <label>
. Detta är något mer utförligt eftersom du måste specificera id
och for
attribut för att relatera <input>
och <label>
.
Standard (staplad)
Som standard kommer valfritt antal kryssrutor och radioapparater som är direkta syskon att vara vertikalt staplade och på lämpligt avstånd med .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
I kö
Gruppera kryssrutor eller radioapparater på samma horisontella rad genom att lägga .form-check-inline
till någon .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Utan etiketter
Lägg .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 tillgängligt namn för hjälpmedel (till exempel genom att använda aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
Layout
Eftersom Bootstrap gäller display: block
och width: 100%
för nästan alla våra formulärkontroller, staplas formulär som standard vertikalt. Ytterligare klasser kan användas för att variera denna layout på per-form-basis.
Bilda grupper
Klassen .form-group
är det enklaste sättet att lägga till lite struktur till formulär. Den tillhandahåller en flexibel klass som uppmuntrar korrekt gruppering av etiketter, kontroller, valfri hjälptext och formulärvalideringsmeddelanden. Som standard gäller det bara margin-bottom
, men det plockar upp ytterligare stilar .form-inline
efter behov. Använd den med <fieldset>
s, <div>
s eller nästan vilket annat element som helst.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
Form rutnät
Mer komplexa former kan byggas med hjälp av våra rutnätsklasser. Använd dessa för formulärlayouter som kräver flera kolumner, varierade bredder och ytterligare justeringsalternativ.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Form rad
Du kan också byta .row
mot .form-row
, en variant av vår standardrasterrad som åsidosätter standardkolumnrännorna för tätare och mer kompakta layouter.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Mer komplexa layouter kan också skapas med rutsystemet.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Horisontell form
Skapa horisontella formulär med rutnätet genom att lägga till .row
klassen i formulärgrupper och använda .col-*-*
klasserna för att ange bredden på dina etiketter och kontroller. Se till att lägga .col-form-label
till dina <label>
s också så att de är vertikalt centrerade med tillhörande formulärkontroller.
Ibland behöver du kanske använda marginal- eller utfyllnadsverktyg för att skapa den perfekta justeringen du behöver. Till exempel har vi tagit bort padding-top
etiketten på våra staplade radioingångar för att bättre anpassa textens baslinje.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Horisontell formetikettstorlek
Se till att använda .col-form-label-sm
eller .col-form-label-lg
till dina <label>
s eller <legend>
s för att korrekt följa storleken på .form-control-lg
och .form-control-sm
.
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
Kolumnstorlek
Som framgår av de föregående exemplen låter vårt rutsystem dig placera valfritt antal .col
s inom a .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 upp mer eller mindre utrymme, medan de återstående .col
s delar lika upp resten, med specifika kolumnklasser som .col-7
.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
Automatisk dimensionering
Exemplet nedan använder ett flexbox-verktyg för att vertikalt centrera innehållet och ändringar .col
så .col-auto
att dina kolumner bara tar upp så mycket utrymme som behövs. Uttryckt på ett annat sätt, storleken på kolumnen själv baserat på innehållet.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Du kan sedan remixa det igen med storleksspecifika kolumnklasser.
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Och naturligtvis stöds anpassade formulärkontroller .
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Inline-formulär
Använd .form-inline
klassen för att visa en serie etiketter, formulärkontroller och knappar på en enda horisontell rad. Formulärkontroller i infogade formulär skiljer sig något från standardtillstånden.
- Kontroller är
display: flex
, kollapsar alla HTML-blankutrymmen och låter dig tillhandahålla anpassningskontroll med avstånd och flexbox- verktyg. - Kontroller och inmatningsgrupper tar emot
width: auto
för att åsidosätta Bootstrap-standardenwidth: 100%
. - Kontroller visas bara inline i vyportar som är minst 576px breda för att ta hänsyn till smala visningsportar på mobila enheter.
Du kan behöva adressera bredden och justeringen av individuella 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 för besökare som inte är skärmläsare med .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Anpassade formulärkontroller och val stöds också.
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternativ till dolda etiketter
Hjälpmedel som skärmläsare kommer att få problem med dina formulär om du inte inkluderar en etikett för varje inmatning. För dessa infogade formulär kan du dölja etiketterna med hjälp av .sr-only
klassen. Det finns ytterligare alternativa metoder för att tillhandahålla en märkning för hjälpmedel, som aria-label
attributet eller aria-labelledby
. title
Om ingen av dessa finns kan hjälpmedel använda placeholder
attributet, om det finns, men observera att användning av placeholder
som ersättning för andra märkningsmetoder inte rekommenderas.
Hjälp text
Hjälptext på blocknivå i formulär kan skapas med .form-text
(tidigare känt som .help-block
i v3). Inline hjälptext kan implementeras flexibelt med hjälp av alla inline HTML-element och verktygsklasser som .text-muted
.
Associera hjälptext med formulärkontroller
Hjälptext bör uttryckligen associeras med formulärkontrollen den relaterar till med aria-describedby
attributet. Detta säkerställer att hjälpmedel – som skärmläsare – kommer att meddela denna hjälptext när användaren fokuserar eller går in i kontrollen.
Hjälptexten nedanför ingångar kan formateras med .form-text
. Denna klass inkluderar display: block
och lägger till en viss toppmarginal för enkelt avstånd från ingångarna ovan.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
Inline-text kan använda vilket typiskt inline HTML-element som helst (vare sig det är en <small>
, <span>
, eller något annat) med inget annat än en verktygsklass.
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
Inaktiverade formulär
Lägg till det disabled
booleska attributet på en ingång för att förhindra användarinteraktioner och få den att se lättare ut.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Lägg till disabled
attributet till a <fieldset>
för att inaktivera alla kontroller inom.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Varning med ankare
Webbläsare behandlar alla inbyggda formulärkontroller ( <input>
, <select>
, och <button>
element) i en <fieldset disabled>
som inaktiverade, vilket förhindrar interaktion med både tangentbord och mus på dem.
Men om ditt formulär även innehåller anpassade knappliknande element som <a ... class="btn btn-*">
, kommer dessa bara att få stilen pointer-events: none
. Som nämnts i avsnittet om inaktiverat tillstånd för knappar (och specifikt i underavsnittet för ankarelement), är denna CSS-egenskap ännu inte standardiserad och stöds inte fullt ut i Internet Explorer 10. De ankarbaserade kontrollerna kommer också fortfarande att vara fokuserbar och manövrerbar med tangentbordet. Du måste manuellt ändra dessa kontroller genom att lägga tabindex="-1"
till för att förhindra att de får fokus och aria-disabled="disabled"
för att signalera deras tillstånd till hjälpmedelstekniker.
Kompatibilitet över webbläsare
Även om Bootstrap kommer att tillämpa dessa stilar i alla webbläsare, stöder Internet Explorer 11 och lägre inte helt disabled
attributet på en <fieldset>
. Använd anpassad JavaScript för att inaktivera fältuppsättningen i dessa webbläsare.
Godkännande
Ge dina användare värdefull feedback till dina användare med HTML5-formulärvalidering – tillgängligt 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 start-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 omfångar
:invalid
och:valid
stilar till överordnad.was-validated
klass, vanligtvis tillämpad på<form>
. Annars visas alla obligatoriska fält utan värde som ogiltiga vid sidladdning. På så sätt kan du välja när du vill aktivera dem (vanligtvis efter att formuläret har skickats in). - För att återställa utseendet på formuläret (till exempel i fallet med dynamiska formulärinlämningar med AJAX), ta bort
.was-validated
klassen från<form>
igen efter inlämning. - Som en reserv,
.is-invalid
och.is-valid
klasser kan användas istället för pseudoklasserna för validering på serversidan . De kräver ingen.was-validated
föräldraklass. - På grund av begränsningar i hur CSS fungerar kan vi (för närvarande) inte 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 ostylbar via CSS) eller våra anpassade feedbackstilar med ytterligare HTML och CSS.
- Du kan tillhandahålla anpassade giltighetsmeddelanden
setCustomValidity
i JavaScript.
Med det i åtanke, överväg följande demos för våra anpassade formulärvalideringsstilar, valfria serversideklasser och webbläsarstandarder.
Anpassade stilar
För anpassade Bootstrap-formulärvalideringsmeddelanden måste du lägga till det novalidate
booleska attributet till din <form>
. Detta inaktiverar webbläsarens standardverktygstips för feedback, men ger fortfarande åtkomst till API:erna för formulärvalidering i JavaScript. Försök att skicka in formuläret nedan; vår JavaScript kommer att fånga upp knappen Skicka och vidarebefordra feedback till dig. När du försöker skicka in ser du :invalid
stilarna och :valid
som tillämpas på dina formulärkontroller.
Anpassade feedbackstilar tillämpar anpassade färger, ramar, 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
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Webbläsarens standardinställningar
Inte intresserad av anpassade valideringsfeedbackmeddelanden eller att skriva JavaScript för att ändra formulärbeteenden? Allt bra, du kan använda webbläsarens standardinställningar. Prova att skicka in formuläret nedan. Beroende på din webbläsare och operativsystem kommer du att se en lite annorlunda typ av feedback.
Även om dessa feedbackstilar inte kan utformas med CSS, kan du fortfarande anpassa feedbacktexten genom JavaScript.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
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 det .invalid-feedback
också stöds med dessa klasser.
För ogiltiga fält, se till att det ogiltiga feedback-/felmeddelandet är kopplat till det relevanta formulärfältet med hjälp av aria-describedby
. Detta attribut gör att mer än en id
kan refereras, om fältet redan pekar på ytterligare formulärtext.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Element som stöds
Valideringsstilar är tillgängliga för följande formulärkontroller och komponenter:
<input>
s och<textarea>
s med.form-control
<select>
s med.form-control
eller.custom-select
.form-check
s.custom-checkbox
s och.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Verktygstips
Om din formulärlayout tillåter det kan du byta ut .{valid|invalid}-feedback
klasserna mot .{valid|invalid}-tooltip
klasser för att visa valideringsfeedback i ett formaterat verktygstips. Se till att ha en förälder med position: relative
på den för positionering av verktygstips. I exemplet nedan har våra kolumnklasser detta redan, men ditt projekt kan kräva en alternativ inställning.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Anpassa
Valideringsstatus kan anpassas via Sass med $form-validation-states
kartan. Denna Sass-karta ligger i vår _variables.scss
fil och slingras över för att generera standard- valid
/ invalid
valideringstillstånden. Inkluderat är en kapslad karta för att anpassa varje delstats färg och ikon. Även om inga andra tillstånd stöds av webbläsare, kan de som använder anpassade stilar enkelt lägga till mer komplex formulärfeedback.
Observera att vi inte rekommenderar att du anpassar dessa värden utan att även ändra form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
Validering av ingångsgrupp
För att upptäcka vilka element som behöver rundade hörn inuti en indatagrupp med validering, kräver en indatagrupp en extra .has-validation
klass.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
Anpassade formulär
För ännu mer anpassning och enhetlighet över webbläsare, 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ärkontroller.
Kryssrutor och radioapparater
Varje kryssruta och radio <input>
och <label>
parning är insvept i en <div>
för att skapa vår anpassade kontroll. Strukturellt sett ä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 korrekt. När det kombineras med .custom-control-label
klassen kan vi även formatera texten för varje objekt baserat på <input>
tillståndet 's.
Vi döljer standarden <input>
med opacity
och använder för .custom-control-label
att bygga en ny anpassad formulärindikator i dess ställe med ::before
och ::after
. Tyvärr kan vi inte bygga en anpassad av bara <input>
eftersom CSS 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 mellan webbläsare och enheter.
Kryssrutor
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Anpassade kryssrutor kan också använda :indeterminate
pseudoklassen 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 borde något i stil med detta räcka:
$('.your-checkbox').prop('indeterminate', true)
Radioapparater
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
I kö
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Inaktiverad
Anpassade kryssrutor och radioapparater kan också inaktiveras. Lägg till det disabled
booleska attributet till så <input>
kommer den anpassade indikatorn och etikettbeskrivningen att formateras automatiskt.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Växlar
En switch har markeringen av en anpassad kryssruta men använder .custom-switch
klassen för att återge en vippbrytare. Omkopplare stöder också disabled
attributet.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Välj meny
Anpassade <select>
menyer behöver bara en anpassad klass .custom-select
för att utlösa de anpassade stilarna. Anpassade stilar är begränsade till det <select>
ursprungliga utseendet och kan inte ändras på <option>
grund av webbläsarbegränsningar.
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Du kan också välja mellan små och stora anpassade markeringar för att matcha våra textinmatningar i liknande storlek.
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Attributet multiple
stöds också:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Som är size
attributet:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Räckvidd
Skapa anpassade <input type="range">
kontroller med .custom-range
. Spåret (bakgrunden) och tummen (värdet) är båda utformade så att de ser likadana ut i alla webbläsare. Eftersom endast IE och Firefox stöder att "fylla" deras 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" id="customRange1">
Områdesingångar har implicita värden för min
respektive max
— 0
och 100
. Du kan ange nya värden för de som använder attributen min
och .max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Som standard "snap" intervallinmatningar till heltalsvärden. För att ändra detta kan du ange ett step
värde. I exemplet nedan fördubblar 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" id="customRange3">
Filhanterare
Filinmatningen är den mest knotiga av gänget och kräver ytterligare JavaScript om du vill koppla ihop dem med funktionell Välj fil... och vald filnamnstext.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Vi döljer standardfilen <input>
via opacity
och formaterar istället <label>
. Knappen genereras och placeras med ::after
. Slutligen deklarerar vi ett width
och height
på <input>
för korrekt avstånd för omgivande innehåll.
Översätta eller anpassa strängarna med SCSS
Pseudoklassen används för att möjliggöra översättning av "Bläddra"-texten till andra språk :lang()
. Å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 man till exempel lägga till en spansk översättning (spanskas 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:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Du måste ställa in språket för ditt dokument (eller underträd därav) korrekt för att rätt text ska visas. Detta kan göras med hjälp av lang
attributet på <html>
elementet eller Content-Language
HTTP-huvudet , bland andra metoder.
Översätta eller anpassa strängarna med HTML
Bootstrap tillhandahåller också ett sätt att översätta "Bläddra"-texten i HTML med data-browse
attributet som kan läggas till den anpassade inmatningsetiketten (exempel på holländska):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>