Source

Formulieren

Voorbeelden en gebruiksrichtlijnen voor formulierbesturingsstijlen, lay-outopties en aangepaste componenten voor het maken van een grote verscheidenheid aan formulieren.

Overzicht

De formulierbesturingselementen van Bootstrap breiden onze opnieuw opgestarte formulierstijlen uit met klassen. Gebruik deze klassen om u aan te melden voor hun aangepaste weergaven voor een consistentere weergave op verschillende browsers en apparaten.

Zorg ervoor dat u een geschikt typekenmerk gebruikt voor alle invoer (bijvoorbeeld emailvoor e-mailadres of numbervoor numerieke informatie) om te profiteren van nieuwere invoeropties zoals e-mailverificatie, nummerselectie en meer.

Hier is een snel voorbeeld om de formulierstijlen van Bootstrap te demonstreren. Blijf lezen voor documentatie over vereiste klassen, formulierlay-out en meer.

We zullen uw e-mailadres nooit met iemand anders delen. 
<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>

Formulierbesturingselementen

Tekstvormbesturingselementen, zoals <input>s, <select>s en <textarea>s, worden gestileerd met de .form-controlklasse. Inbegrepen zijn stijlen voor algemeen uiterlijk, focusstatus, maatvoering en meer.

Zorg ervoor dat u onze aangepaste formulieren bekijkt voor meer stijlen <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Voor bestandsinvoer, verwissel de .form-controlvoor .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>

Maatvoering

Stel hoogten in met klassen zoals .form-control-lgen .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>

Alleen lezen

Voeg het readonlybooleaanse kenmerk toe aan een invoer om wijziging van de invoerwaarde te voorkomen. Alleen-lezen ingangen lijken lichter (net als uitgeschakelde ingangen), maar behouden de standaardcursor.

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

Alleen-lezen platte tekst

Als u <input readonly>elementen in uw formulier als platte tekst wilt opmaken, gebruikt u de .form-control-plaintextklasse om de standaardopmaak van formuliervelden te verwijderen en de juiste marge en opvulling te behouden.

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

Bereik ingangen

Stel horizontaal verschuifbare bereikingangen in met .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>

Selectievakjes en radio's

Standaard selectievakjes en radio's zijn verbeterd met behulp van .form-checkeen enkele klasse voor beide invoertypes die de lay-out en het gedrag van hun HTML-elementen verbetert . Selectievakjes zijn voor het selecteren van een of meerdere opties in een lijst, terwijl radio's zijn voor het selecteren van één optie uit vele.

Uitgeschakelde selectievakjes en radio's worden ondersteund. Het disabledattribuut past een lichtere kleur toe om de status van de invoer aan te geven.

Selectievakjes en keuzerondjes ondersteunen op HTML gebaseerde formuliervalidatie en bieden beknopte, toegankelijke labels. Als zodanig zijn onze <input>s en <label>s broers en zussen, in tegenstelling tot een <input>binnen een <label>. Dit is iets uitgebreider omdat u iden attributen moet specificeren om de en forte relateren .<input><label>

Standaard (gestapeld)

Standaard wordt een willekeurig aantal selectievakjes en radio's die direct broer of zus zijn, verticaal gestapeld en op de juiste afstand geplaatst met .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>

In lijn

Groepeer selectievakjes of radio's op dezelfde horizontale rij door .form-check-inlineaan een willekeurig .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>

Zonder labels

Voeg toe .position-staticaan ingangen binnen .form-checkdie geen labeltekst hebben. Vergeet niet om nog steeds een of ander label op te geven voor ondersteunende technologieën (bijvoorbeeld het gebruik van 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>

Lay-out

Omdat Bootstrap van toepassing is display: blockop width: 100%bijna al onze formulierbesturingselementen, worden formulieren standaard verticaal gestapeld. Extra klassen kunnen worden gebruikt om deze lay-out per formulier te variëren.

Groepen vormen

De .form-groupklasse is de gemakkelijkste manier om wat structuur aan formulieren toe te voegen. Het biedt een flexibele klasse die de juiste groepering van labels, besturingselementen, optionele helptekst en formuliervalidatieberichten stimuleert. Standaard is het alleen van toepassing margin-bottom, maar het pikt .form-inlineindien nodig extra stijlen op. Gebruik het met <fieldset>s, <div>s of bijna elk ander 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>

Formulierraster

Meer complexe vormen kunnen worden gebouwd met behulp van onze rasterklassen. Gebruik deze voor formulierlay-outs waarvoor meerdere kolommen, verschillende breedtes en aanvullende uitlijningsopties nodig zijn.

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

Formulierrij

U kunt ook ruilen .rowvoor .form-row, een variant van onze standaard rasterrij die de standaard kolomgoten overschrijft voor strakkere en compactere lay-outs.

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

Met het rastersysteem kunnen ook complexere lay-outs worden gemaakt.

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

Horizontale vorm

Maak horizontale formulieren met het raster door de .rowklasse toe te voegen aan formuliergroepen en de .col-*-*klassen te gebruiken om de breedte van uw labels en besturingselementen op te geven. Zorg ervoor dat u ook .col-form-labelaan uw <label>s toevoegt, zodat ze verticaal gecentreerd zijn met de bijbehorende formulierbesturingselementen.

Soms moet u misschien marge- of opvulhulpprogramma's gebruiken om de perfecte uitlijning te creëren die u nodig hebt. We hebben bijvoorbeeld het padding-toplabel op onze gestapelde radio-ingangen verwijderd om de tekstbasislijn beter uit te lijnen.

Radio's
Selectievakje 
<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>
Horizontale formaatetiketten

Zorg ervoor dat u .col-form-label-smof .col-form-label-lgnaar uw <label>s of s gebruikt om de grootte van en <legend>correct te volgen ..form-control-lg.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>

Kolomgrootte

Zoals in de vorige voorbeelden te zien is, kunt u met ons rastersysteem een ​​willekeurig aantal .cols binnen a .rowof plaatsen .form-row. Ze verdelen de beschikbare breedte gelijkelijk tussen hen. U kunt ook een subset van uw kolommen kiezen om meer of minder ruimte in te nemen, terwijl de resterende .cols de rest gelijkelijk verdelen, met specifieke kolomklassen zoals .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>

Auto-sizing

Het onderstaande voorbeeld gebruikt een flexbox-hulpprogramma om de inhoud verticaal te centreren en verandert .colin .col-autozodat uw kolommen slechts zoveel ruimte innemen als nodig is. Anders gezegd, de kolomgrootte zelf op basis van de inhoud.

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

U kunt dat vervolgens opnieuw mixen met maatspecifieke kolomklassen.

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

En natuurlijk worden aangepaste formulierbesturingselementen ondersteund.

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

Gebruik de .form-inlineklasse om een ​​reeks labels, formulierbesturingselementen en knoppen op een enkele horizontale rij weer te geven. Formulierbesturingselementen binnen inline formulieren wijken enigszins af van hun standaardstatussen.

  • Besturingselementen zijn display: flex, het samenvouwen van elke HTML-spatie en u in staat stellen om uitlijningscontrole te bieden met spatiëring en flexbox - hulpprogramma's.
  • Besturingselementen en invoergroepen ontvangen width: autoom de Bootstrap-standaard te overschrijven width: 100%.
  • Bedieningselementen verschijnen alleen inline in kijkvensters die ten minste 576 px breed zijn om rekening te houden met smalle kijkvensters op mobiele apparaten.

Mogelijk moet u de breedte en uitlijning van afzonderlijke formulierbesturingselementen handmatig aanpassen met hulpprogramma's voor spatiëring (zoals hieronder weergegeven). Zorg er ten slotte voor dat u altijd een a <label>toevoegt aan elk formulierbesturingselement, zelfs als u het moet verbergen voor bezoekers zonder schermlezer met .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>

Aangepaste formulierbesturingselementen en selecties worden ook ondersteund.

<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>
Alternatieven voor verborgen labels

Hulptechnologieën zoals schermlezers zullen problemen hebben met uw formulieren als u niet voor elke invoer een label opneemt. Voor deze inline-formulieren kunt u de labels verbergen met behulp van de .sr-onlyklasse. Er zijn nog meer alternatieve methoden om een ​​label te geven voor ondersteunende technologieën, zoals het attribuut aria-label, aria-labelledbyof . titleAls geen van deze aanwezig is, kunnen ondersteunende technologieën hun toevlucht nemen tot het gebruik van het placeholderattribuut, indien aanwezig, maar houd er rekening mee dat het gebruik van placeholderals vervanging voor andere etiketteringsmethoden niet wordt aanbevolen.

Hulp tekst

Help-tekst op blokniveau in formulieren kan worden gemaakt met .form-text(voorheen bekend als .help-blockin v3). Inline Help-tekst kan flexibel worden geïmplementeerd met behulp van elk inline HTML-element en hulpprogrammaklassen zoals .text-muted.

Help-tekst koppelen aan formulierbesturingselementen

Help-tekst moet expliciet worden geassocieerd met het formulierbesturingselement waarop het betrekking heeft met behulp van het aria-describedbyattribuut. Dit zorgt ervoor dat ondersteunende technologieën, zoals schermlezers, deze helptekst aankondigen wanneer de gebruiker zich concentreert of de besturing betreedt.

Help-tekst onder invoer kan worden gestyled met .form-text. Deze klasse bevat display: blocken voegt wat bovenmarge toe voor gemakkelijke afstand van de bovenstaande invoer.

Uw wachtwoord moet 8-20 tekens lang zijn, letters en cijfers bevatten en mag geen spaties, speciale tekens of emoji bevatten. 
<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 elk typisch inline HTML-element gebruiken (of het nu een <small>, <span>, of iets anders is) met niets meer dan een utility-klasse.

Moet 8-20 tekens lang zijn. 
<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>

Uitgeschakelde formulieren

Voeg het disabledbooleaanse kenmerk toe aan een invoer om gebruikersinteracties te voorkomen en deze lichter te laten lijken.

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

Voeg het disabledkenmerk toe aan a <fieldset>om alle besturingselementen binnen uit te schakelen.

<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>
Waarschuwing met ankers

Standaard behandelen browsers alle native formulierbesturingselementen ( <input>, <select>en <button>elementen) binnen a <fieldset disabled>als uitgeschakeld, waardoor zowel toetsenbord- als muisinteracties worden voorkomen. Als uw formulier echter ook <a ... class="btn btn-*">elementen bevat, krijgen deze alleen de stijl pointer-events: none. Zoals opgemerkt in de sectie over uitgeschakelde status voor knoppen (en specifiek in de subsectie voor ankerelementen), is deze CSS-eigenschap nog niet gestandaardiseerd en niet volledig ondersteund in Internet Explorer 10, en zal niet voorkomen dat toetsenbordgebruikers in staat om deze links te focussen of te activeren. Gebruik dus voor de zekerheid aangepast JavaScript om dergelijke links uit te schakelen.

Compatibiliteit tussen verschillende browsers

Hoewel Bootstrap deze stijlen in alle browsers zal toepassen, ondersteunen Internet Explorer 11 en lager het disabledkenmerk op een <fieldset>. Gebruik aangepast JavaScript om de veldset in deze browsers uit te schakelen.

Geldigmaking

Geef waardevolle, bruikbare feedback aan uw gebruikers met HTML5-formuliervalidatie, beschikbaar in al onze ondersteunde browsers . Kies uit de standaard validatiefeedback van de browser of implementeer aangepaste berichten met onze ingebouwde klassen en JavaScript voor starters.

We raden momenteel aan om aangepaste validatiestijlen te gebruiken, omdat standaard validatieberichten van de browser niet consistent worden blootgesteld aan ondersteunende technologieën in alle browsers (met name Chrome op desktop en mobiel).

Hoe het werkt

Zo werkt formuliervalidatie met Bootstrap:

  • HTML-formuliervalidatie wordt toegepast via de twee pseudo-klassen van CSS, :invaliden :valid. Het is van toepassing op <input>, <select>, en <textarea>elementen.
  • Bootstrap dekt de :invaliden :validstijlen naar bovenliggende .was-validatedklasse, meestal toegepast op de <form>. Anders wordt elk verplicht veld zonder waarde als ongeldig weergegeven bij het laden van de pagina. Op deze manier kunt u kiezen wanneer u ze wilt activeren (meestal nadat het formulier is ingediend).
  • Om het uiterlijk van het formulier opnieuw in te stellen (bijvoorbeeld in het geval van dynamische formulierinzendingen met AJAX), verwijdert u de .was-validatedklas <form>opnieuw uit het formulier na het indienen.
  • Als fallback kunnen .is-invalidklassen .is-validworden gebruikt in plaats van de pseudo-klassen voor validatie aan de serverzijde . Ze hebben geen ouderklas nodig .was-validated.
  • Vanwege beperkingen in de manier waarop CSS werkt, kunnen we (momenteel) geen stijlen toepassen op een <label>die vóór een formulierbesturingselement in de DOM komt zonder de hulp van aangepast JavaScript.
  • Alle moderne browsers ondersteunen de beperkingsvalidatie-API , een reeks JavaScript-methoden voor het valideren van formulierbesturingselementen.
  • Feedbackberichten kunnen gebruikmaken van de standaardinstellingen van de browser (verschillend voor elke browser en niet-styleerbaar via CSS) of onze aangepaste feedbackstijlen met aanvullende HTML en CSS.
  • U kunt aangepaste geldigheidsberichten verstrekken setCustomValidityin JavaScript.

Overweeg met dat in gedachten de volgende demo's voor onze aangepaste formuliervalidatiestijlen, optionele serverside-klassen en browserstandaarden.

Aangepaste stijlen

Voor aangepaste Bootstrap-formuliervalidatieberichten moet u het novalidateboolean-kenmerk toevoegen aan uw <form>. Dit schakelt de standaard feedbacktooltips van de browser uit, maar biedt nog steeds toegang tot de formuliervalidatie-API's in JavaScript. Probeer het onderstaande formulier in te dienen; onze JavaScript zal de verzendknop onderscheppen en feedback aan u doorgeven. Wanneer u probeert in te dienen, ziet u de stijlen :invaliden :validtoegepast op uw formulierbesturingselementen.

Aangepaste feedbackstijlen passen aangepaste kleuren, randen, focusstijlen en achtergrondpictogrammen toe om feedback beter te communiceren. Achtergrondpictogrammen voor <select>s zijn alleen beschikbaar met .custom-select, en niet .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>

Standaardinstellingen van de browser

Niet geïnteresseerd in aangepaste validatiefeedbackberichten of het schrijven van JavaScript om formuliergedrag te veranderen? Allemaal goed, u kunt de standaardinstellingen van de browser gebruiken. Probeer het onderstaande formulier in te dienen. Afhankelijk van uw browser en besturingssysteem ziet u een iets andere stijl van feedback.

Hoewel deze feedbackstijlen niet kunnen worden gestileerd met CSS, kunt u de feedbacktekst nog steeds aanpassen via 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>

Serverkant

We raden u aan validatie aan de clientzijde te gebruiken, maar als u validatie aan de serverzijde nodig hebt, kunt u ongeldige en geldige formuliervelden aangeven met .is-invaliden .is-valid. Merk op dat .invalid-feedbackdit ook wordt ondersteund met deze klassen.

Ziet er goed uit!
Ziet er goed uit!
@
Kies een gebruikersnaam.
Geef een geldige stad op.
Selecteer een geldige staat.
Geef een geldige zip op.
U moet akkoord gaan voordat u het verzendt. 
<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>

Ondersteunde elementen

Er zijn validatiestijlen beschikbaar voor de volgende formulierbesturingselementen en componenten:

  • <input>s en <textarea>s met .form-control(inclusief maximaal één .form-controlin invoergroepen)
  • <select>s met .form-controlof.custom-select
  • .form-checks
  • .custom-checkboxs en .custom-radios
  • .custom-file
Voer een bericht in het tekstveld in.
Voorbeeld ongeldige feedbacktekst
Meer voorbeeld ongeldige feedbacktekst
Voorbeeld ongeldige aangepaste selectie-feedback
Voorbeeld ongeldige feedback over aangepast bestand 
<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>

Knopinfo

Als uw formulierlay-out dit toelaat, kunt u de .{valid|invalid}-feedbackklassen omwisselen voor .{valid|invalid}-tooltipklassen om validatiefeedback weer te geven in een gestileerde knopinfo. Zorg ervoor dat je een ouder hebt met position: relativeerop voor de positionering van de tooltip. In het onderstaande voorbeeld hebben onze kolomklassen dit al, maar voor uw project is mogelijk een alternatieve opstelling vereist.

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>

Aanpassen

Validatiestatussen kunnen via Sass met de $form-validation-stateskaart worden aangepast. Deze Sass-kaart bevindt zich in ons _variables.scssbestand en wordt doorgelust om de standaard- valid/ invalidvalidatiestatussen te genereren. Inbegrepen is een geneste kaart voor het aanpassen van de kleur en het pictogram van elke staat. Hoewel er geen andere statussen worden ondersteund door browsers, kunnen degenen die aangepaste stijlen gebruiken eenvoudig meer complexe formulierfeedback toevoegen.

Houd er rekening mee dat we niet aanbevelen om deze waarden aan te passen zonder ook de form-validation-statemixin te wijzigen.

// 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));
}

Aangepaste formulieren

Voor nog meer maatwerk en consistentie tussen verschillende browsers, gebruikt u onze volledig aangepaste formulierelementen om de standaardinstellingen van de browser te vervangen. Ze zijn gebouwd op semantische en toegankelijke markeringen, dus ze zijn solide vervangingen voor elk standaard formulierbesturingselement.

Selectievakjes en radio's

Elk selectievakje en elke radio <input>en <label>koppeling is verpakt in een <div>om onze aangepaste bediening te creëren. Structureel is dit dezelfde benadering als onze standaard .form-check.

We gebruiken de broer of zus-selector ( ~) voor al onze <input>statussen, zoals :checked- om onze aangepaste formulierindicator op de juiste manier te stylen. In combinatie met de .custom-control-labelklasse kunnen we de tekst voor elk item ook opmaken op basis van de <input>'status.

We verbergen de standaard <input>met opacityen gebruiken de .custom-control-labelom een ​​nieuwe aangepaste formulierindicator op zijn plaats te maken met ::beforeen ::after. Helaas kunnen we geen aangepaste maken van alleen de <input>omdat CSS'en contentniet werken op dat element.

In de aangevinkte statussen gebruiken we base64 embedded SVG-pictogrammen van Open Iconic . Dit biedt ons de beste controle voor styling en positionering op verschillende browsers en apparaten.

Selectievakjes

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

Aangepaste selectievakjes kunnen ook gebruikmaken van de :indeterminatepseudo-klasse wanneer ze handmatig worden ingesteld via JavaScript (er is geen HTML-kenmerk beschikbaar om het te specificeren).

Als je jQuery gebruikt, zou zoiets als dit moeten volstaan:

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

Radio's

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

In lijn

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

Gehandicapt

Aangepaste selectievakjes en radio's kunnen ook worden uitgeschakeld. Voeg het disabledbooleaanse attribuut toe aan de <input>en de aangepaste indicator en labelbeschrijving worden automatisch opgemaakt.

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

Schakelaars

Een schakelaar heeft de opmaak van een aangepast selectievakje, maar gebruikt de .custom-switchklasse om een ​​tuimelschakelaar weer te geven. Switches ondersteunen ook het disabledattribuut.

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

Selecteer menu

Aangepaste <select>menu's hebben alleen een aangepaste klasse .custom-selectnodig om de aangepaste stijlen te activeren. Aangepaste stijlen zijn beperkt tot het <select>oorspronkelijke uiterlijk en kunnen de stijlen niet wijzigen <option>vanwege browserbeperkingen.

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

U kunt ook kiezen uit kleine en grote aangepaste selecties die passen bij onze tekstinvoer van vergelijkbare grootte.

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

Het multipleattribuut wordt ook ondersteund:

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

Zoals het sizeattribuut:

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

Bereik

Maak aangepaste <input type="range">besturingselementen met .custom-range. De track (de achtergrond) en thumb (de waarde) zijn beide zo gestileerd dat ze er in alle browsers hetzelfde uitzien. Omdat alleen IE en Firefox het "vullen" van hun track vanaf de linker- of rechterkant van de duim ondersteunen als een middel om de voortgang visueel aan te geven, ondersteunen we dit momenteel niet.

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

Bereikingangen hebben impliciete waarden voor respectievelijk minen max— 0en 100. U kunt nieuwe waarden specificeren voor degenen die de minen maxattributen gebruiken.

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

Standaard wordt bij bereikinvoer "geklikt" op gehele waarden. Om dit te wijzigen, kunt u een stepwaarde opgeven. In het onderstaande voorbeeld verdubbelen we het aantal stappen door te gebruiken step="0.5".

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

Bestandsverkenner

De aanbevolen plug-in om aangepaste bestandsinvoer te animeren: bs-custom-file-input , dat is wat we momenteel hier in onze documenten gebruiken.

De bestandsinvoer is de meest lastige van het stel en vereist extra JavaScript als je ze wilt koppelen aan functioneel Kies bestand... en geselecteerde bestandsnaamtekst.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

We verbergen het standaardbestand <input>via opacityen in plaats daarvan stylen we de <label>. De knop wordt gegenereerd en gepositioneerd met ::after. Ten slotte verklaren we een widthen heightop de <input>voor de juiste spatiëring voor de omliggende inhoud.

De strings vertalen of aanpassen met SCSS

De :lang()pseudo-klasse wordt gebruikt om de "Bladeren"-tekst in andere talen te kunnen vertalen. Overschrijf of voeg items toe aan de $custom-file-textSass-variabele met de relevante taaltag en gelokaliseerde tekenreeksen. De Engelse snaren kunnen op dezelfde manier worden aangepast. Zo kunt u bijvoorbeeld een Spaanse vertaling toevoegen (de Spaanse taalcode is es):

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

Hier is lang(es)in actie op de aangepaste bestandsinvoer voor een Spaanse vertaling:

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

U moet de taal van uw document (of substructuur daarvan) correct instellen om de juiste tekst te laten zien. Dit kan onder andere worden gedaan met behulp van het langattribuut op het <html>element of de Content-LanguageHTTP-header .

De strings vertalen of aanpassen met HTML

Bootstrap biedt ook een manier om de "Bladeren"-tekst in HTML te vertalen met het data-browseattribuut dat kan worden toegevoegd aan het aangepaste invoerlabel (voorbeeld in het Nederlands):

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