Source

Formularer

Eksempler og brugsretningslinjer for formularkontroltypografier, layoutindstillinger og brugerdefinerede komponenter til oprettelse af en bred vifte af formularer.

Oversigt

Bootstraps formularkontrolelementer udvider vores genstartede formularstile med klasser. Brug disse klasser til at tilvælge deres tilpassede skærme for en mere ensartet gengivelse på tværs af browsere og enheder.

Sørg for at bruge en passende typeattribut på alle input (f.eks. emailtil e-mailadresse eller numbertil numerisk information) for at drage fordel af nyere inputkontroller som e-mailbekræftelse, nummervalg og mere.

Her er et hurtigt eksempel for at demonstrere Bootstraps formstile. Fortsæt med at læse for dokumentation om obligatoriske klasser, formularlayout og mere.

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

Form kontrolelementer

Tekstformularkontrolelementer - som <input>s, <select>s og <textarea>s - er stylet med .form-controlklassen. Inkluderet er stilarter til generelt udseende, fokustilstand, størrelse og mere.

Sørg for at udforske vores brugerdefinerede formularer for at yderligere style <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>

For filinput, skift .form-controltil .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

Indstil højder ved hjælp af 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>

Læs kun

Tilføj den readonlybooleske attribut på et input for at forhindre ændring af inputs værdi. Skrivebeskyttede input ser lysere ud (ligesom deaktiverede input), men bevarer standardmarkøren.

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

Skrivebeskyttet almindelig tekst

Hvis du vil have <input readonly>elementer i din formular stilet som almindelig tekst, skal du bruge .form-control-plaintextklassen til at fjerne standardformatet for formularfelter og bevare den korrekte margen og udfyldning.

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

Afkrydsningsfelter og radioer

Standard afkrydsningsfelter og radioer forbedres ved hjælp af .form-checken enkelt klasse for begge inputtyper, der forbedrer layoutet og adfærden af deres HTML-elementer . Afkrydsningsfelter er til at vælge en eller flere muligheder på en liste, mens radioer er til at vælge en mulighed blandt mange.

Deaktiverede afkrydsningsfelter og radioer understøttes, men for at give en not-allowedmarkør, når den forælder svæver <label>, skal du tilføje disabledattributten til .form-check-input. Attributten deaktiveret vil anvende en lysere farve for at hjælpe med at angive inputs tilstand.

Brug af afkrydsningsfelter og radioer er bygget til at understøtte HTML-baseret formularvalidering og give kortfattede, tilgængelige etiketter. Som sådan er vores <input>s og <label>s søskendeelementer i modsætning til et <input>inden for et <label>. Dette er lidt mere udførligt, da du skal specificere idog forattributter for at relatere <input>og <label>.

Standard (stablet)

Som standard vil et hvilket som helst antal afkrydsningsfelter og radioer, der er umiddelbare søskende, være lodret stablet og passende fordelt med .form-check.

Standard afkrydsningsfelt

Deaktiveret afkrydsningsfelt

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

Standard radio

Anden standard radio

Deaktiveret radio

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

Inline

Grupper afkrydsningsfelter eller radioer i den samme vandrette række ved at tilføje .form-check-inlinetil en hvilken som helst .form-check.

3 (deaktiveret)

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

3 (deaktiveret)

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

Uden etiketter

Føj .position-statictil input inden for .form-check, der ikke har nogen etikettekst. Husk stadig at give en form for etiket til hjælpeteknologier (f.eks. ved at bruge 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

Da Bootstrap gælder display: blockog width: 100%for næsten alle vores formularkontrolelementer, vil formularer som standard stables lodret. Yderligere klasser kan bruges til at variere dette layout på en per-form basis.

Form grupper

Klassen .form-grouper den nemmeste måde at tilføje noget struktur til formularer. Det giver en fleksibel klasse, der tilskynder til korrekt gruppering af etiketter, kontroller, valgfri hjælpetekst og formularvalideringsmeddelelser. Som standard gælder det kun margin-bottom, men det henter yderligere stilarter .form-inlineefter behov. Brug det med <fieldset>s, <div>s eller næsten ethvert andet 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 gitter

Mere komplekse formularer kan bygges ved hjælp af vores gitterklasser. Brug disse til formularlayout, der kræver flere kolonner, varierede bredder og yderligere justeringsmuligheder.

<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 række

Du kan også bytte .rowtil .form-row, en variant af vores standard gitterrække, der tilsidesætter standard søjlerrender for strammere og mere kompakte layouts.

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

Mere komplekse layouts kan også oprettes med gittersystemet.

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

Vandret form

Opret vandrette formularer med gitteret ved at tilføje .rowklassen til formgrupper og bruge .col-*-*klasserne til at angive bredden af dine etiketter og kontrolelementer. Sørg også for at tilføje .col-form-labeltil dine <label>s, så de er lodret centreret med deres tilknyttede formularkontrolelementer.

Til tider skal du måske bruge margen- eller polstringsværktøjer for at skabe den perfekte justering, du har brug for. For eksempel har vi fjernet padding-topetiketten på vores stablede radioindgange for bedre at justere tekstens grundlinje.

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

Vandret formlabelstørrelse

Sørg for at bruge .col-form-label-smeller .col-form-label-lgtil dine <label>s eller <legend>s for korrekt at 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>

Søjlestørrelse

Som vist i de foregående eksempler giver vores gittersystem dig mulighed for at placere et vilkårligt antal .cols inden for et .roweller .form-row. De deler den tilgængelige bredde ligeligt mellem sig. Du kan også vælge en delmængde af dine kolonner for at optage mere eller mindre plads, mens de resterende .cols lige deler resten, med specifikke 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 dimensionering

Eksemplet nedenfor bruger et flexbox-værktøj til lodret at centrere indholdet og ændringer .coltil .col-auto, så dine kolonner kun fylder så meget som nødvendigt. Sagt på en anden måde, størrelsen af kolonnen selv baseret på indholdet.

<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 derefter remixe det igen med størrelsesspecifikke 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 understøttes brugerdefinerede formularkontrolelementer .

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

Inline formularer

Brug .form-inlineklassen til at vise en række etiketter, formularkontrolelementer og knapper på en enkelt vandret række. Formularkontrolelementer i indlejrede formularer varierer lidt fra deres standardtilstande.

Kontrolelementer er display: flex, kollapser ethvert HTML-mellemrum og giver dig mulighed for at give justeringskontrol med mellemrum og flexbox- værktøjer.
Kontrolelementer og inputgrupper modtager width: autofor at tilsidesætte Bootstrap-standarden width: 100%.
Kontrolelementer vises kun inline i viewporte, der er mindst 576px brede for at tage højde for smalle viewports på mobile enheder.

Du skal muligvis manuelt adressere bredden og justeringen af individuelle formularkontrolelementer med mellemrumsfunktioner (som vist nedenfor). Til sidst skal du sørge for altid at inkludere en <label>med hver formularkontrol, selvom du har brug for at skjule den for besøgende, der ikke er skærmlæser 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>

Brugerdefinerede formularkontroller og valg understø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

Hjælpeteknologier såsom skærmlæsere vil have problemer med dine formularer, hvis du ikke inkluderer en etiket for hver input. For disse indlejrede formularer kan du skjule etiketterne ved hjælp af .sr-onlyklassen. Der er yderligere alternative metoder til at give en etiket for hjælpeteknologier, såsom aria-label, aria-labelledbyeller titleattributten. Hvis ingen af disse er til stede, kan hjælpeteknologier ty til at bruge placeholderattributten, hvis den findes, men bemærk, at brug af placeholdersom erstatning for andre mærkningsmetoder ikke tilrådes.

Hjælpetekst

Hjælpetekst på blokniveau i formularer kan oprettes ved hjælp af .form-text(tidligere kendt som .help-blocki v3). Inline hjælpetekst kan implementeres fleksibelt ved hjælp af ethvert inline HTML-element og hjælpeklasser som .text-muted.

Tilknytning af hjælpetekst med formularkontrolelementer

Hjælpeteksten skal være eksplicit forbundet med den formularkontrol, den relaterer til ved brug af aria-describedbyattributten. Dette vil sikre, at hjælpeteknologier – såsom skærmlæsere – annoncerer denne hjælpetekst, når brugeren fokuserer eller går ind i kontrollen.

Hjælpeteksten under input kan styles med .form-text. Denne klasse inkluderer display: blockog tilføjer en vis topmargin for nem afstand fra inputs ovenfor.

Adgangskode Dit kodeord skal være 8-20 tegn langt, indeholde bogstaver og tal og må ikke indeholde mellemrum, specialtegn 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-tekst kan bruge et hvilket som helst typisk inline HTML-element (det være sig et <small>, <span>, eller noget andet) med intet andet end en hjælpeklasse.

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

Deaktiverede formularer

Tilføj den disabledbooleske attribut på et input for at forhindre brugerinteraktioner og få det til at virke lettere.

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

Føj disabledattributten til a <fieldset>for at deaktivere alle kontrolelementerne indeni.

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

Forbehold med ankre

Som standard vil browsere behandle alle indbyggede formularkontrolelementer ( <input>, <select>og <button>elementer) inde i en <fieldset disabled>som deaktiveret, hvilket forhindrer både tastatur- og muse-interaktioner på dem. Men hvis din formular også indeholder <a ... class="btn btn-*">elementer, vil disse kun få en stil på pointer-events: none. Som nævnt i afsnittet om deaktiveret tilstand for knapper (og specifikt i underafsnittet for ankerelementer), er denne CSS-egenskab endnu ikke standardiseret og understøttes ikke fuldt ud i Opera 18 og derunder, eller i Internet Explorer 10, og vandt 't forhindrer tastaturbrugere i at kunne fokusere eller aktivere disse links. Så for at være sikker, brug tilpasset JavaScript til at deaktivere sådanne links.

Cross-browser kompatibilitet

Mens Bootstrap vil anvende disse stilarter i alle browsere, understøtter Internet Explorer 11 og derunder ikke fuldt ud disabledattributten på en <fieldset>. Brug tilpasset JavaScript til at deaktivere feltsættet i disse browsere.

Validering

Giv værdifuld, handlingsorienteret feedback til dine brugere med HTML5-formularvalidering – tilgængelig i alle vores understøttede browsere . Vælg fra browserens standardvalideringsfeedback, eller implementer tilpassede meddelelser med vores indbyggede klasser og start-JavaScript.

Vi anbefaler stærkt tilpassede valideringsstile, da native browserstandarder ikke annonceres til skærmlæsere.

Hvordan det virker

Sådan fungerer formularvalidering med Bootstrap:

HTML-formularvalidering anvendes via CSS's to pseudo-klasser :invalidog :valid. Det gælder for <input>, <select>, og <textarea>elementer.
Bootstrap omfavner :invalidog - :validstilene til overordnet .was-validatedklasse, normalt anvendt på <form>. Ellers vises ethvert påkrævet felt uden en værdi som ugyldigt ved sideindlæsning. På denne måde kan du vælge, hvornår du vil aktivere dem (typisk efter at formularindsendelse er forsøgt).
Som en fallback, .is-invalidog .is-validklasser kan bruges i stedet for pseudo-klasserne til serversidevalidering . De kræver ikke en .was-validatedforældreklasse.
På grund af begrænsninger i, hvordan CSS fungerer, kan vi (på nuværende tidspunkt) ikke anvende stilarter på en <label>, der kommer før en formularkontrol i DOM uden hjælp af tilpasset JavaScript.
Alle moderne browsere understøtter constraint validation API , en række JavaScript-metoder til validering af formularkontrolelementer.
Feedbackmeddelelser kan bruge browserens standardindstillinger (forskellige for hver browser og ikke-stilbar via CSS) eller vores tilpassede feedback-stile med ekstra HTML og CSS.
Du kan levere tilpassede gyldighedsmeddelelser setCustomValidityi JavaScript.

Med det i tankerne kan du overveje følgende demoer for vores tilpassede formularvalideringsstile, valgfri serversideklasser og browserstandarder.

Brugerdefinerede stilarter

For brugerdefinerede Bootstrap-formularvalideringsmeddelelser skal du tilføje den novalidatebooleske attribut til din <form>. Dette deaktiverer browserens standardfeedback-værktøjstip, men giver stadig adgang til formularvaliderings-API'erne i JavaScript. Prøv at indsende formularen nedenfor; vores JavaScript opsnapper indsend-knappen og videresender feedback til dig.

Når du forsøger at indsende, vil du se typografierne :invalidog :validanvendt på dine formularkontrolelementer.

Fornavn

Looks good!

Efternavn

Looks good!

Brugernavn

Please choose a username.

Please provide a valid city.

Stat

Please provide a valid state.

Lynlås

Please provide a valid zip.

Accepter vilkår og betingelser

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>

Browser standardindstillinger

Er du ikke interesseret i tilpassede valideringsfeedbackbeskeder eller at skrive JavaScript for at ændre formularadfærd? Alt godt, du kan bruge browserens standardindstillinger. Prøv at indsende formularen nedenfor. Afhængigt af din browser og OS, vil du se en lidt anderledes stil af feedback.

Selvom disse feedbackstile ikke kan styles med CSS, kan du stadig tilpasse feedbackteksten gennem 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 at bruge klientsidevalidering, men hvis du har brug for serverside, kan du angive ugyldige og gyldige formularfelter med .is-invalidog .is-valid. Bemærk, at .invalid-feedbackdet også understøttes med disse klasser.

Fornavn

Ser godt ud!

Efternavn

Ser godt ud!

Brugernavn

Vælg venligst et brugernavn.

Angiv venligst en gyldig by.

Stat

Angiv en gyldig tilstand.

Lynlås

Angiv venligst en gyldig zip.

Accepter vilkår og betingelser

Du skal acceptere, før du sender.

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

Understøttede elementer

Vores eksempelformularer viser oprindelige tekster <input>ovenfor, men formularvalideringsstile er også tilgængelige for vores brugerdefinerede formularkontrolelementer.

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

Værktøjstip

Hvis dit formularlayout tillader det, kan du udskifte .{valid|invalid}-feedbackklasserne med .{valid|invalid}-tooltipklasser for at vise valideringsfeedback i et stylet værktøjstip. Sørg for at have en forælder med position: relativepå den til placering af værktøjstip. I eksemplet nedenfor har vores kolonneklasser dette allerede, men dit projekt kræver muligvis en alternativ opsætning.

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

Brugerdefinerede formularer

For endnu mere tilpasning og ensartethed på tværs af browsere skal du bruge vores helt tilpassede formularelementer til at erstatte browserens standardindstillinger. De er bygget oven på semantisk og tilgængelig markup, så de er solide erstatninger for enhver standard formularkontrol.

Afkrydsningsfelter og radioer

Hvert afkrydsningsfelt og radio er pakket ind i en <div>med en søskende <span>for at skabe vores brugerdefinerede kontrol og en <label>til den medfølgende tekst. Strukturelt er dette den samme tilgang som vores standard .form-check.

Vi bruger søskendevælgeren ( ~) for alle vores <input>stater – f.eks . – for :checkedat style vores brugerdefinerede formularindikator korrekt. Når det kombineres med .custom-control-labelklassen, kan vi også style teksten for hvert element baseret på <input>'s-tilstanden.

Vi skjuler standarden <input>med opacityog bruger til .custom-control-labelat bygge en ny brugerdefineret formularindikator i stedet for ::beforeog ::after. Desværre kan vi ikke bygge en brugerdefineret en ud fra bare, <input>fordi CSS'er contentikke virker på det element.

I de afkrydsede tilstande bruger vi base64 indlejrede SVG-ikoner fra Open Iconic . Dette giver os den bedste kontrol til styling og positionering på tværs af browsere og enheder.

Afkrydsningsfelter

Marker dette tilpassede afkrydsningsfelt

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

Brugerdefinerede afkrydsningsfelter kan også bruge :indeterminatepseudoklassen, når de indstilles manuelt via JavaScript (der er ingen tilgængelig HTML-attribut til at angive den).

Marker dette tilpassede afkrydsningsfelt

Hvis du bruger jQuery, burde noget som dette være tilstrækkeligt:

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

Radioer

Skift denne brugerdefinerede radio

Eller skift denne anden brugerdefinerede radio

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

Inline

Skift denne brugerdefinerede radio

Eller skift denne anden brugerdefinerede radio

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

handicappet

Brugerdefinerede afkrydsningsfelter og radioer kan også deaktiveres. Tilføj den disabledbooleske attribut til <input>og den brugerdefinerede indikator og etiketbeskrivelse vil automatisk blive stylet.

Marker dette tilpassede afkrydsningsfelt

Skift denne brugerdefinerede radio

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

Brugerdefinerede <select>menuer behøver kun en brugerdefineret klasse .custom-selectfor at udløse de brugerdefinerede stilarter.

<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å vælge mellem små og store brugerdefinerede markeringer for at matche vores tekstinput af 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>

Attributten multipleunderstø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>

Filbrowser

Filinputtet er det mest knudrede af bunken og kræver yderligere JavaScript, hvis du gerne vil tilslutte dem med funktionel Vælg fil... og valgt filnavntekst.

Vælg fil

<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 styles i stedet for <label>. Knappen genereres og placeres med ::after. Til sidst erklærer vi en widthog heightpå <input>for korrekt afstand til omgivende indhold.

Oversættelse eller tilpasning af strengene

Pseudoklassen bruges til at give mulighed for oversættelse af "Gennemse"-teksten til andre sprog :lang(). Tilsidesæt eller tilføj indgange til $custom-file-textSass-variablen med det relevante sprogtag og lokaliserede strenge. De engelske strenge kan tilpasses på samme måde. For eksempel, her er, hvordan man kan tilføje en spansk oversættelse (spansks sprogkode er es):

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

Her er lang(es)i aktion på den brugerdefinerede filinput til en spansk oversættelse:

Valgt Arkiv

<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 skal indstille sproget for dit dokument (eller undertræet deraf) korrekt, for at den korrekte tekst kan vises. Dette kan gøres ved at bruge langattributten på <html>elementet eller Content-LanguageHTTP-headeren , blandt andre metoder.

Formularer

Oversigt

Form kontrolelementer

Dimensionering

Læs kun

Skrivebeskyttet almindelig tekst

Afkrydsningsfelter og radioer

Standard (stablet)

Inline

Uden etiketter

Layout

Form grupper

Form gitter

Form række

Vandret form

Vandret formlabelstørrelse

Søjlestørrelse

Automatisk dimensionering

Inline formularer

Alternativer til skjulte etiketter

Hjælpetekst

Tilknytning af hjælpetekst med formularkontrolelementer

Deaktiverede formularer

Forbehold med ankre

Cross-browser kompatibilitet

Validering

Hvordan det virker

Brugerdefinerede stilarter

Browser standardindstillinger

Server side

Understøttede elementer

Værktøjstip

Brugerdefinerede formularer

Afkrydsningsfelter og radioer

Afkrydsningsfelter

Radioer

Inline

handicappet

Vælg menu

Filbrowser

Oversættelse eller tilpasning af strengene