Source

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 typeattribut på alla ingångar (t.ex. emailför e-postadresser eller numberfö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.

Vi kommer aldrig att dela din e-post med någon annan. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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-controlklassen. 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-controlmot .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-lgoch .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 readonlybooleska 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-plaintextklassen 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" placeholder="Password">
    </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-checken 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, men för att ge en not-allowedmarkör på föräldern <label>måste du lägga till disabledattributet till .form-check-input. Attributet disabled kommer att tillämpa 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 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 idoch forattribut 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-inlinetill 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-statictill ingångar inom .form-checksom inte har någon etiketttext. Kom ihåg att fortfarande tillhandahålla någon form av märkning 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: blockoch 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-inlineefter 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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 .rowmot .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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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 .rowklassen 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-labeltill 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-topetiketten på våra staplade radioingångar för att bättre anpassa textens baslinje.

Radioapparater
Kryssruta 
<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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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-smeller .col-form-label-lgtill dina <label>s eller <legend>s för att korrekt följa storleken på .form-control-lgoch .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 .cols inom a .roweller .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 .cols 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 .colså .col-autoatt 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-inlineklassen 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: autoför att åsidosätta Bootstrap-standarden width: 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-onlyklassen. Det finns ytterligare alternativa metoder för att tillhandahålla en märkning för hjälpmedel, som aria-labelattributet eller aria-labelledby. titleOm ingen av dessa finns kan hjälpmedel använda placeholderattributet, om det finns, men observera att användning av placeholdersom 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-blocki 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-describedbyattributet. 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: blockoch lägger till en viss toppmarginal för enkelt avstånd från ingångarna ovan.

Ditt lösenord måste vara 8-20 tecken långt, innehålla bokstäver och siffror och får inte innehålla mellanslag, specialtecken eller emoji. 
<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.

Måste vara 8-20 tecken långt. 
<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 disabledbooleska 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 disabledattributet till a <fieldset>för att inaktivera alla kontroller inom.

<form>
  <fieldset disabled>
    <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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Varning med ankare

Som standard kommer webbläsare att behandla 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 också innehåller <a ... class="btn btn-*">element 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, och kommer inte att hindra tangentbordsanvändare från att vara kunna fokusera eller aktivera dessa länkar. Så för att vara säker, använd anpassad JavaScript för att inaktivera sådana länkar.

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 disabledattributet 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.

Vi rekommenderar för närvarande att du använder anpassade valideringsstilar, eftersom inbyggda webbläsares standardvalideringsmeddelanden inte konsekvent exponeras för hjälpmedelsteknik i alla webbläsare (främst Chrome på datorer och mobiler).

Hur det fungerar

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

  • HTML-formulärvalidering tillämpas via CSS:s två pseudoklasser, :invalidoch :valid. Det gäller <input>, <select>, och <textarea>element.
  • Bootstrap omfångar :invalidoch :validstilar till överordnad .was-validatedklass, 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-validatedklassen från klassen <form>igen efter inlämning.
  • Som en reserv, .is-invalidoch .is-validklasser kan användas istället för pseudoklasserna för validering på serversidan . De kräver ingen .was-validatedfö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 setCustomValidityi 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 novalidatebooleska 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 :invalidstilarna och :validsom tillämpas på dina formulärkontroller.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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 klientsidans validering, men om du behöver serversidan kan du ange ogiltiga och giltiga formulärfält med .is-invalidoch .is-valid. Observera att det .invalid-feedbackockså stöds med dessa klasser.

Ser bra ut!
Ser bra ut!
@
Välj ett användarnamn.
Ange en giltig stad.
Ange ett giltigt tillstånd.
Ange en giltig zip.
Du måste godkänna innan du skickar in. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

Element som stöds

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

Exempel på ogiltig feedbacktext
Fler exempel på ogiltig feedbacktext
Exempel på ogiltig feedback för anpassat val
Exempel på ogiltig feedback på anpassad fil 
<form class="was-validated">
  <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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</form>

Verktygstips

Om din formulärlayout tillåter det kan du byta ut .{valid|invalid}-feedbackklasserna mot .{valid|invalid}-tooltipklasser för att visa valideringsfeedback i ett formaterat verktygstips. Se till att ha en förälder med position: relativepå 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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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 är insvept 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 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-labelklassen kan vi även formatera texten för varje objekt baserat på <input>tillståndet 's.

Vi döljer standarden <input>med opacityoch använder för .custom-control-labelatt bygga en ny anpassad formulärindikator i dess ställe med ::beforeoch ::after. Tyvärr kan vi inte bygga en anpassad av bara <input>eftersom CSS contentinte 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 :indeterminatepseudoklassen 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="customRadioInline1" 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="customRadioInline1" 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 disabledbooleska 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="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Välj meny

Anpassade <select>menyer behöver bara en anpassad klass .custom-selectfö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 multiplestö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 sizeattributet:

<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 för att se 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 minrespektive max— 0och 100. Du kan ange nya värden för de som använder attributen minoch .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 stepvä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 opacityoch formaterar istället <label>. Knappen genereras och placeras med ::after. Slutligen deklarerar vi ett widthoch heightpå <input>för korrekt avstånd för omgivande innehåll.

Översätta eller anpassa strängarna

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-textSass-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 langattributet på <html>elementet eller Content-LanguageHTTP-huvudet , bland andra metoder.