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.

Vi deler aldrig din e-mail med andre. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

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">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Range input

Indstil vandret rulbare områdeindgange ved hjælp af .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

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. Attributten disabledvil anvende en lysere farve for at hjælpe med at angive inputs tilstand.

Afkrydsningsfelter og alternativknapper understøtter HTML-baseret formularvalidering og giver 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.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline

Grupper afkrydsningsfelter eller radioer i den samme vandrette række ved at tilføje .form-check-inlinetil en hvilken som helst .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>

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 placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Form 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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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.

Radioer
Afkrydsningsfelt 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <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 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

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

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.

Skal være 8-20 tegn langt. 
<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-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
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 Internet Explorer 10 og forhindrer ikke tastaturbrugere i at blive i stand til at 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 i øjeblikket at bruge tilpassede valideringsstile, da native browser-standardvalideringsmeddelelser ikke konsekvent eksponeres for hjælpeteknologier i alle browsere (især Chrome på desktop og mobil).

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).
  • For at nulstille udseendet af formularen (for eksempel i tilfælde af dynamiske formularafsendelser ved hjælp af AJAX), skal du fjerne .was-validatedklassen fra <form>igen efter indsendelse.
  • 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.

Tilpassede feedbackstile anvender tilpassede farver, rammer, fokusstile og baggrundsikoner for bedre at kommunikere feedback. Baggrundsikoner for <select>s er kun tilgængelige med .custom-selectog ikke .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server side

Vi anbefaler at bruge validering på klientsiden, men hvis du har brug for validering på serversiden, kan du angive ugyldige og gyldige formularfelter med .is-invalidog .is-valid. Bemærk, at .invalid-feedbackdet også understøttes med disse klasser.

Ser godt ud!
Ser godt ud!
@
Vælg venligst et brugernavn.
Angiv venligst en gyldig by.
Vælg venligst en gyldig tilstand.
Angiv venligst en gyldig zip.
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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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

Valideringsstile er tilgængelige for følgende formularkontrolelementer og komponenter:

  • <input>s og <textarea>s med .form-control(inklusive op til én .form-controli inputgrupper)
  • <select>s med .form-controleller.custom-select
  • .form-checks
  • .custom-checkboxs og .custom-radios
  • .custom-file
Indtast venligst en besked i tekstområdet.
Eksempel på ugyldig feedbacktekst
Mere eksempel på ugyldig feedbacktekst
Eksempel på ugyldig feedback om tilpasset valg
Eksempel på ugyldig feedback til tilpasset fil 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select 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" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Tilpasning

Valideringstilstande kan tilpasses via Sass med $form-validation-stateskortet. Dette Sass-kort, som er placeret i vores _variables.scssfil, er sløjfet for at generere standard- valid/ invalidvalideringstilstandene. Inkluderet er et indlejret kort til at tilpasse hver stats farve og ikon. Selvom ingen andre tilstande understøttes af browsere, kan dem, der bruger brugerdefinerede stilarter, nemt tilføje mere kompleks formularfeedback.

Bemærk venligst, at vi ikke anbefaler at tilpasse disse værdier uden også at ændre form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

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 <input>og <label>parring er pakket ind i en <div>for at skabe vores brugerdefinerede kontrol. 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

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

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

$('.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>

Inline

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

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

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

Afbrydere

En switch har markeringen af ​​et brugerdefineret afkrydsningsfelt, men bruger .custom-switchklassen til at gengive en skiftekontakt. Switche understøtter også disabledattributten.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Vælg menu

Brugerdefinerede <select>menuer behøver kun en brugerdefineret klasse .custom-selectfor at udløse de brugerdefinerede stilarter. Brugerdefinerede stilarter er begrænset til <select>'s oprindelige udseende og kan ikke ændres på <option>grund af browserbegrænsninger.

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

Rækkevidde

Opret brugerdefinerede <input type="range">kontroller med .custom-range. Sporet (baggrunden) og tommelfingeren (værdien) er begge stylet til at se ens ud på tværs af browsere. Da kun IE og Firefox understøtter at "fylde" deres spor fra venstre eller højre for tommelfingeren som et middel til visuelt at indikere fremskridt, understøtter vi det ikke i øjeblikket.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Områdeinput har implicitte værdier for henholdsvis minog max— 0og 100. Du kan angive nye værdier for dem, der bruger attributterne minog .max

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Som standard "snap" interval-input til heltalsværdier. For at ændre dette kan du angive en stepværdi. I eksemplet nedenfor fordobler vi antallet af trin ved at bruge step="0.5".

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

Filbrowser

Det anbefalede plugin til at animere brugerdefineret filinput: bs-custom-file-input , det er det, vi i øjeblikket bruger her i vores dokumenter.

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.

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

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:

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

Oversættelse eller tilpasning af strenge med HTML

Bootstrap giver også en måde at oversætte "Gennemse"-teksten i HTML med den data-browseattribut, som kan tilføjes til den brugerdefinerede input-etiket (eksempel på hollandsk):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>