Source

Skjemaer

Eksempler og retningslinjer for bruk for skjemakontrollstiler, layoutalternativer og egendefinerte komponenter for å lage et bredt utvalg av skjemaer.

Oversikt

Bootstraps skjemakontroller utvider seg til våre Rebooted-skjemastiler med klasser. Bruk disse klassene til å velge de tilpassede skjermene deres for en mer konsistent gjengivelse på tvers av nettlesere og enheter.

Sørg for å bruke et passende typeattributt på alle inndata (f.eks. emailfor e-postadresse eller numberfor numerisk informasjon) for å dra nytte av nyere inndatakontroller som e-postbekreftelse, nummervalg og mer.

Her er et raskt eksempel for å demonstrere Bootstraps formstiler. Fortsett å lese for dokumentasjon om obligatoriske klasser, skjemaoppsett og mer.

Vi deler aldri e-posten din med noen andre. 
<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-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>

Skjemakontroller

Tekstformkontroller – som <input>s, <select>s og <textarea>s – er stilt med .form-controlklassen. Inkludert er stiler for generelt utseende, fokustilstand, størrelse og mer.

Sørg for å utforske våre tilpassede skjemaer for å utvikle stil <select>.

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

For filinndata, bytt ut .form-controlfor .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>

Dimensjonering

Angi høyder ved å bruke klasser som .form-control-lgog .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>

Skrivebeskyttet

Legg til det readonlyboolske attributtet på en inngang for å forhindre endring av inngangens verdi. Skrivebeskyttede innganger virker lettere (akkurat som deaktiverte innganger), men beholder standardmarkøren.

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

Skrivebeskyttet ren tekst

Hvis du vil ha <input readonly>elementer i skjemaet stilt som ren tekst, bruk .form-control-plaintextklassen til å fjerne standard skjemafeltstil og bevare riktig marg og utfylling.

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

Avmerkingsbokser og radioer

Standard avmerkingsbokser og radioer er forbedret ved hjelp av .form-checken enkelt klasse for begge inndatatyper som forbedrer layouten og oppførselen til HTML-elementene deres . Avmerkingsbokser er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.

Deaktiverte avmerkingsbokser og radioer støttes, men for å gi en not-allowedmarkør på overordnet peker <label>, må du legge til disabledattributtet til .form-check-input. Deaktivert-attributtet vil bruke en lysere farge for å indikere inngangens tilstand.

Avmerkingsbokser og radioer som brukes er bygget for å støtte HTML-basert skjemavalidering og gi konsise, tilgjengelige etiketter. Som sådan er våre <input>s og <label>s søskenelementer i motsetning til en <input>innenfor en <label>. Dette er litt mer detaljert ettersom du må spesifisere idog forattributter for å relatere <input>og <label>.

Standard (stablet)

Som standard vil et hvilket som helst antall avmerkingsbokser og radioer som er umiddelbare søsken, stables vertikalt og hensiktsmessig fordelt 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 disabled">
  <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>

På linje

Grupper avmerkingsbokser eller radioer på samme horisontale rad ved å legge .form-check-inlinetil en .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>

Uten merkelapper

Legg .position-statictil innganger innenfor .form-checksom ikke har noen etiketttekst. Husk å fortsatt gi en form for etikett for hjelpeteknologier (for eksempel ved å bruke 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>

Oppsett

Siden Bootstrap gjelder display: blockog width: 100%for nesten alle skjemakontrollene våre, vil skjemaer som standard stables vertikalt. Ytterligere klasser kan brukes til å variere dette oppsettet på en per-form basis.

Form grupper

Klassen .form-grouper den enkleste måten å legge til litt struktur i skjemaer. Den gir en fleksibel klasse som oppmuntrer til riktig gruppering av etiketter, kontroller, valgfri hjelpetekst og skjemavalideringsmeldinger. Som standard gjelder det bare margin-bottom, men det plukker opp flere stiler .form-inlineetter behov. Bruk den med <fieldset>s, <div>s eller nesten hvilket som helst annet element.

<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 rutenett

Mer komplekse skjemaer kan bygges ved hjelp av våre rutenettklasser. Bruk disse for skjemaoppsett som krever flere kolonner, varierte bredder og ekstra justeringsalternativer.

<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 også bytte .rowmot .form-row, en variant av vår standard rutenettrad som overstyrer standard søylerenner for strammere og mer kompakte oppsett.

<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 komplekse oppsett kan også lages med rutenettsystemet.

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

Horisontal form

Lag horisontale skjemaer med rutenettet ved å legge .rowklassen til formgrupper og bruke .col-*-*klassene til å spesifisere bredden på etikettene og kontrollene dine. Sørg for å legge .col-form-labeltil dine <label>s også slik at de er vertikalt sentrert med tilhørende skjemakontroller.

Noen ganger må du kanskje bruke margin- eller polstringsverktøy for å lage den perfekte justeringen du trenger. For eksempel har vi fjernet padding-topetiketten på våre stablede radioinnganger for å justere tekstens grunnlinje bedre.

Radioer
Avmerkingsboks 
<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>
Horisontal formetikettstørrelse

Pass på å bruke .col-form-label-smeller .col-form-label-lgtil dine <label>s eller <legend>s for å følge størrelsen på .form-control-lgog .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>

Kolonnestørrelse

Som vist i de foregående eksemplene, lar vårt rutenettsystem deg plassere et hvilket som helst antall .cols innenfor en .roweller .form-row. De deler den tilgjengelige bredden likt mellom seg. Du kan også velge et undersett av kolonnene dine for å ta opp mer eller mindre plass, mens de resterende .coldelene deler resten likt, med spesifikke kolonneklasser 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 størrelse

Eksemplet nedenfor bruker et flexbox-verktøy for å vertikalt sentrere innholdet og endringer .colslik .col-autoat kolonnene dine bare tar så mye plass som nødvendig. Sagt på en annen måte, kolonnen dimensjonerer seg selv basert på innholdet.

@ 
<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 deretter remikse det igjen med størrelsesspesifikke kolonneklasser.

@ 
<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>

Og selvfølgelig støttes tilpassede skjemakontroller .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" 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>

Innebygde skjemaer

Bruk .form-inlineklassen til å vise en rekke etiketter, skjemakontroller og knapper på en enkelt horisontal rad. Skjemakontroller i innebygde skjemaer varierer litt fra standardtilstandene.

  • Kontroller er display: flex, kollapser alle HTML-mellomrom og lar deg gi justeringskontroll med mellomrom og flexbox- verktøy.
  • Kontroller og inngangsgrupper mottar width: autofor å overstyre Bootstrap-standarden width: 100%.
  • Kontroller vises bare innebygd i visningsporter som er minst 576 piksler brede for å ta hensyn til smale visningsporter på mobile enheter.

Du må kanskje adressere bredden og justeringen av individuelle skjemakontroller manuelt med avstandsverktøy (som vist nedenfor). Til slutt, sørg for å alltid inkludere en <label>med hver skjemakontroll, selv om du trenger å skjule den for besøkende som ikke er skjermlesere 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>

Egendefinerte skjemakontroller og valg støttes også.

<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>
Alternativer til skjulte etiketter

Hjelpeteknologier som skjermlesere vil få problemer med skjemaene dine hvis du ikke inkluderer en etikett for hver inndata. For disse innebygde skjemaene kan du skjule etikettene ved å bruke .sr-onlyklassen. Det finnes flere alternative metoder for å gi en etikett for hjelpeteknologier, for eksempel aria-label, aria-labelledbyeller titleattributtet. Hvis ingen av disse er til stede, kan hjelpeteknologier ty til å bruke placeholderattributtet, hvis det finnes, men vær oppmerksom på at bruk av placeholdersom erstatning for andre merkingsmetoder ikke anbefales.

Hjelpetekst

Hjelpetekst på blokknivå i skjemaer kan opprettes ved å bruke .form-text(tidligere kjent som .help-blocki v3). Innebygd hjelpetekst kan implementeres fleksibelt ved å bruke alle innebygde HTML-elementer og verktøyklasser som .text-muted.

Knytte hjelpetekst til skjemakontroller

Hjelpeteksten skal eksplisitt assosieres med skjemakontrollen den er knyttet til ved bruk av aria-describedbyattributtet. Dette vil sikre at hjelpeteknologier – for eksempel skjermlesere – vil kunngjøre denne hjelpeteksten når brukeren fokuserer eller går inn i kontrollen.

Hjelpeteksten under innganger kan styles med .form-text. Denne klassen inkluderer display: blockog legger til en toppmargin for enkel avstand fra inngangene ovenfor.

Passordet ditt må være 8-20 tegn langt, inneholde bokstaver og tall, og må ikke inneholde mellomrom, spesialtegn 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>

Innebygd tekst kan bruke et hvilket som helst typisk innebygd HTML-element (det være seg en <small>, <span>, eller noe annet) med noe mer enn en verktøyklasse.

Må bestå av 8-20 tegn. 
<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>

Deaktiverte skjemaer

Legg til det disabledboolske attributtet på en inngang for å forhindre brukerinteraksjoner og få den til å virke lettere.

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

Legg til disabledattributtet til a <fieldset>for å deaktivere alle kontrollene innenfor.

<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>
Advarsel med ankere

Som standard vil nettlesere behandle alle innfødte skjemakontroller ( <input>, <select>og <button>elementer) i en <fieldset disabled>som deaktivert, og forhindrer både tastatur- og musinteraksjoner på dem. Men hvis skjemaet ditt også inneholder <a ... class="btn btn-*">elementer, vil disse kun få stilen pointer-events: none. Som nevnt i delen om deaktivert tilstand for knapper (og spesifikt i underdelen for ankerelementer), er denne CSS-egenskapen ennå ikke standardisert og støttes ikke fullt ut i Opera 18 og lavere, eller i Internet Explorer 10, og vant ikke hindre tastaturbrukere fra å kunne fokusere eller aktivere disse koblingene. Så for å være sikker, bruk tilpasset JavaScript for å deaktivere slike koblinger.

Kompatibilitet på tvers av nettlesere

disabledMens Bootstrap vil bruke disse stilene i alle nettlesere, støtter ikke Internet Explorer 11 og eldre attributtet fullt ut på en <fieldset>. Bruk tilpasset JavaScript for å deaktivere feltsettet i disse nettleserne.

Validering

Gi verdifull tilbakemelding til brukerne dine med HTML5-skjemavalidering – tilgjengelig i alle våre støttede nettlesere . Velg fra nettleserens standard valideringstilbakemelding, eller implementer tilpassede meldinger med våre innebygde klasser og start-JavaScript.

Vi anbefaler på det sterkeste egendefinerte valideringsstiler ettersom native nettleserstandarder ikke kunngjøres til skjermlesere.

Hvordan det fungerer

Slik fungerer skjemavalidering med Bootstrap:

  • HTML-skjemavalidering brukes via CSS sine to pseudo-klasser, :invalidog :valid. Det gjelder <input>, <select>, og <textarea>elementer.
  • Bootstrap dekker stilene :invalidog :validtil overordnet .was-validatedklasse, vanligvis brukt på <form>. Ellers vises ethvert obligatorisk felt uten verdi som ugyldig ved sideinnlasting. På denne måten kan du velge når du vil aktivere dem (vanligvis etter at skjemainnsending er forsøkt).
  • Som en reserve, .is-invalidog .is-validklasser kan brukes i stedet for pseudo-klassene for serversidevalidering . De krever ikke en .was-validatedforeldreklasse.
  • På grunn av begrensninger i hvordan CSS fungerer, kan vi (for øyeblikket) ikke bruke stiler på en <label>som kommer før en skjemakontroll i DOM uten hjelp av tilpasset JavaScript.
  • Alle moderne nettlesere støtter constraint validation API , en serie JavaScript-metoder for å validere skjemakontroller.
  • Tilbakemeldingsmeldinger kan bruke nettleserens standardinnstillinger (forskjellig for hver nettleser, og ustilbar via CSS) eller våre tilpassede tilbakemeldingsstiler med ekstra HTML og CSS.
  • Du kan gi tilpassede gyldighetsmeldinger setCustomValidityi JavaScript.

Med det i tankene bør du vurdere følgende demoer for våre egendefinerte skjemavalideringsstiler, valgfrie serversideklasser og nettleserstandarder.

Egendefinerte stiler

For egendefinerte Bootstrap-skjemavalideringsmeldinger, må du legge til det novalidateboolske attributtet til <form>. Dette deaktiverer nettleserens standard verktøytips for tilbakemelding, men gir fortsatt tilgang til API-ene for skjemavalidering i JavaScript. Prøv å sende inn skjemaet nedenfor; JavaScript vil avskjære send-knappen og sende tilbakemelding til deg.

Når du prøver å sende inn, ser du :invalidstilene og :validbrukt på skjemakontrollene dine.

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>

Nettleserstandarder

Ikke interessert i tilpassede tilbakemeldingsmeldinger for validering eller å skrive JavaScript for å endre skjemaatferd? Alt bra, du kan bruke nettleserens standardinnstillinger. Prøv å sende inn skjemaet nedenfor. Avhengig av nettleseren og operativsystemet din, vil du se en litt annen tilbakemeldingsstil.

Selv om disse tilbakemeldingsstilene ikke kan styles med CSS, kan du fortsatt tilpasse tilbakemeldingsteksten gjennom 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>

Server side

Vi anbefaler å bruke klientsidevalidering, men i tilfelle du trenger serverside, kan du angi ugyldige og gyldige skjemafelt med .is-invalidog .is-valid. Merk at .invalid-feedbackdet også støttes med disse klassene.

Ser bra ut!
Ser bra ut!
@
Vennligst velg et brukernavn.
Vennligst oppgi en gyldig by.
Oppgi en gyldig tilstand.
Vennligst oppgi en gyldig zip.
Du må godta før du sender inn. 
<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>

Støttede elementer

Eksempelskjemaene våre viser opprinnelige tekster <input>ovenfor, men skjemavalideringsstiler er også tilgjengelige for våre egendefinerte skjemakontroller.

Eksempel på ugyldig tilbakemeldingstekst
Mer eksempel på ugyldig tilbakemeldingstekst
Eksempel på ugyldig tilbakemelding om tilpasset utvalg
Eksempel på ugyldig egendefinert filtilbakemelding 
<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>

Verktøytips

Hvis skjemaoppsettet tillater det, kan du bytte .{valid|invalid}-feedbackklassene med .{valid|invalid}-tooltipklasser for å vise valideringstilbakemeldinger i et stilisert verktøytips. Sørg for å ha en forelder med position: relativepå den for plassering av verktøytips. I eksemplet nedenfor har kolonneklassene våre dette allerede, men prosjektet ditt kan kreve et alternativt oppsett.

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>

Egendefinerte skjemaer

For enda mer tilpasning og konsistens på tvers av nettlesere, bruk våre fullstendig tilpassede skjemaelementer for å erstatte nettleserstandardene. De er bygget på toppen av semantisk og tilgjengelig markering, så de er solide erstatninger for enhver standard skjemakontroll.

Avmerkingsbokser og radioer

Hver avmerkingsboks og radio er pakket inn i en <div>med et søsken <span>for å lage vår egendefinerte kontroll og en <label>for den medfølgende teksten. Strukturelt sett er dette den samme tilnærmingen som vår standard .form-check.

Vi bruker søskenvelgeren ( ~) for alle <input>delstatene våre – for eksempel :checked– for å style vår egendefinerte skjemaindikator. Når det kombineres med .custom-control-labelklassen, kan vi også style teksten for hvert element basert på <input>'s-tilstanden.

Vi skjuler standarden <input>med opacityog bruker til .custom-control-labelå bygge en ny tilpasset skjemaindikator i stedet for ::beforeog ::after. Dessverre kan vi ikke bygge en tilpasset en fra bare <input>fordi CSS- contenter ikke fungerer på det elementet.

I de avmerkede tilstandene bruker vi base64 innebygde SVG-ikoner fra Open Iconic . Dette gir oss den beste kontrollen for styling og plassering på tvers av nettlesere og enheter.

Avmerkingsbokser

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

Egendefinerte avmerkingsbokser kan også bruke :indeterminatepseudoklassen når den er satt manuelt via JavaScript (det er ingen tilgjengelig HTML-attributt for å spesifisere den).

Hvis du bruker jQuery, bør noe slikt være tilstrekkelig:

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

Radioer

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

På linje

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

Funksjonshemmet

Egendefinerte avmerkingsbokser og radioer kan også deaktiveres. Legg til det disabledboolske attributtet til <input>og den tilpassede indikatoren og etikettbeskrivelsen vil bli stilt automatisk.

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

Velg meny

Egendefinerte <select>menyer trenger bare en egendefinert klasse .custom-selectfor å utløse de egendefinerte stilene.

<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 også velge mellom små og store tilpassede utvalg for å matche våre tekstinndata i samme størrelse.

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

multipleAttributtet støttes også :

<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 er sizeattributten:

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

Fil utforsker

Filinndataene er den mest kjipe av mengden og krever ekstra JavaScript hvis du vil koble dem opp med funksjonell Velg fil ... og valgt filnavntekst.

<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 skjuler standardfilen <input>via opacityog stiler i stedet <label>. Knappen er generert og plassert med ::after. Til slutt erklærer vi en widthog heightpå <input>for riktig avstand for omkringliggende innhold.

Oversette eller tilpasse strengene

Pseudoklassen brukes for å tillate oversettelse av "Bla gjennom"-teksten til andre språk :lang(). Overstyr eller legg til oppføringer i $custom-file-textSass-variabelen med den relevante språkkoden og lokaliserte strenger. De engelske strengene kan tilpasses på samme måte. For eksempel, her er hvordan man kan legge til en spansk oversettelse (spansks språkkode er es):

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

Her er lang(es)i aksjon på egendefinert filinndata for en spansk oversettelse:

<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å stille inn språket til dokumentet (eller undertreet til det) riktig for at riktig tekst skal vises. Dette kan gjøres ved å bruke langattributtet på <html>elementet eller Content-LanguageHTTP-headeren , blant andre metoder.