Source

Fomu

Fa'ata'ita'iga ma ta'iala fa'aoga mo sitaili fa'atonutonu fomu, filifiliga fa'atulagaina, ma vaega fa'ale-aganu'u mo le fa'atupuina o le tele o fomu.

Vaaiga lautele

E fa'alautele le fa'atonutonuina o fomu a Bootstrap i la matou Sitaili fomu Toe fa'afouina ma vasega. Fa'aoga nei vasega e filifili ai i a latou fa'aaliga fa'apitoa mo se fa'aliliuga faifai pea i su'esu'ega ma masini.

Ia mautinoa e fa'aoga se typeuiga talafeagai i mea uma e fai (fa'ata'ita'iga, emailmo tuatusi imeli po'o numberfa'amatalaga numera) e fa'aoga lelei ai fa'atonuga fou e pei o fa'amaonia imeli, filifiliga numera, ma isi mea.

Ole fa'ata'ita'iga vave lea e fa'aalia ai sitaili fomu a Bootstrap. Fa'aauau le faitau mo fa'amaumauga i vasega mana'omia, fa'atulagaina o fomu, ma isi mea.

Matou te le fa'asoaina lau imeli i se isi. 
<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>

Pulea fomu

O fa'atonuga o fa'amatalaga tusitusia—pei o <input>le s, <select>s, ma <textarea>le s—o lo'o fa'avasega ma le .form-controlvasega. E aofia ai sitaili mo foliga lautele, tulaga taulaʻi, lapopoa, ma isi.

Ia mautinoa e su'esu'e a matou fomu fa'aaganu'u e fa'aopoopo atili ai sitaili <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>

Mo faila faila, sui le .form-controlmo .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>

Tele

Seti maualuga e fa'aaoga ai vasega pei o .form-control-lgma .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>

Faitau na'o

Fa'aopoopo le readonlyuiga o le boolean i luga o se mea fa'aoga e taofia ai le suia o le tau o le mea. O mea e fai na'o le faitau e foliga mama (pei lava o mea fa'aoga ua le atoatoa), ae taofi le fa'aupu masani.

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

Faitau na'o tusitusiga manino

Afai e te mana'o e <input readonly>fa'aigoa elemene i lau fomu e pei o ni tusitusiga manino, fa'aoga le .form-control-plaintextvasega e aveese ai le fa'ailoga fa'aletonu ole fa'ailoga fanua ma fa'asao le pito sa'o ma le fa'aofuofu.

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

Tulaga Fa'aulu

Seti fa'alava fa'alava fa'aoga fa'aoga fa'aoga .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>

Pusa siaki ma leitio

E fa'aleleia pusa siaki ma leitio fa'atasi ma le fesoasoani a .form-check, se vasega e tasi mo ituaiga fa'aoga uma e fa'aleleia ai le fa'atulagaina ma le amio a latou elemene HTML . O pusa siaki e mo le filifilia o se tasi po'o ni nai filifiliga i se lisi, ae o leitio e mo le filifilia o se tasi filifiliga mai le tele.

E lagolagoina pusa siaki ma leitio ua le atoatoa. O le disableduiga o le a faʻaogaina se lanu mama e fesoasoani e faʻaalia le tulaga o le mea e tuʻuina atu.

O pusa siaki ma fa'amau leitio e lagolagoina le fa'amaoniaina o pepa fa'avae HTML ma tu'u mai ai fa'ailoga pu'upu'u ma faigofie ona maua. O lea la, oa tatou <input>s ma <label>s o ni elemene uso e fa'afeagai ma se <input>i totonu o le <label>. E sili atu teisi atu upu e tatau ona e faʻamaonia idma foruiga e faʻatatau i le <input>ma <label>.

Fa'atonu (fa'aputu)

E le mafai, so'o se numera o pusa siaki ma leitio e vave ona fa'apipi'i fa'aputu i luga ma va'a talafeagai ma le .form-check.

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

I totonu

Fa'avae pusa siaki po'o leitio i luga o le laina fa'alava e tasi e ala i le fa'aopoopo .form-check-inlinei so'o se .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>

E aunoa ma ni fa'ailoga

Fa'aopoopo .position-statici mea fa'aoga i totonu .form-checke leai ni fa'ailoga tusitusia. Manatua e tu'u pea nisi ituaiga o fa'ailoga mo tekinolosi fesoasoani (mo se fa'ata'ita'iga, fa'aoga 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>

Fa'atulagaina

Talu ai e fa'aoga le Bootstrap display: blockma width: 100%toetoe o a tatou fa'atonuga uma, o le a le mafai ona fa'aputu fa'aputu i luga le sa'o o fomu. E mafai ona fa'aoga vasega fa'aopoopo e fesuia'i ai lea fa'atulagaina i luga ole fa'avae fa'avae.

Fausia vaega

O le .form-groupvasega o le auala pito sili lea ona faigofie e faʻaopoopo ai nisi fausaga i fomu. E maua ai se vasega fetu'utu'una'i e fa'amalosia le fa'avasegaina lelei o fa'ailoga, fa'atonuga, tusitusiga fesoasoani e filifili ai, ma fa'ailoga fe'au fa'amaonia. I le faaletonu e na'o le fa'aoga margin-bottom, ae na te pikiina isi sitaili .form-inlinepe a mana'omia. Fa'aoga i <fieldset>le s, <div>s, po'o le toetoe lava o isi elemene.

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

Fa'asologa o pepa

E mafai ona fausia ni fomu e sili atu ona lavelave e fa'aaoga ai a tatou vasega fa'avasega. Fa'aoga mea nei mo fa'asologa o fomu e mana'omia ai le tele o koluma, felafolafoa'iga lautele, ma isi fa'aogaga fa'aopoopo.

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

Fomu laina

E mafai fo'i ona e fa'afesuia'i .rowmo le .form-row, o se fesuiaiga o la matou laina fa'asologa masani e fa'amalo ai alavai o koluma fa'aletonu mo fa'ata'oto fa'apipi'i.

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

E mafai fo'i ona faia fa'atonuga sili atu ona lavelave i le faiga fa'ata.

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

Faiga faalava

Fausia fomu fa'ata'atia i le fa'asologa e ala i le fa'aopoopoina o le .rowvasega e fa'atupu vaega ma fa'aoga .col-*-*vasega e fa'ailoa ai le lautele o au fa'ailoga ma fa'atonuga. Ia mautinoa e fa'aopoopo .col-form-labelfo'i i lau <label>s ina ia fa'atotonugalemu i luga ma a latou fa'atonuga fa'atatau.

I nisi o taimi, atonu e te manaʻomia le faʻaogaina o le pito poʻo le padding utilities e fatu ai lena faʻaoga lelei e te manaʻomia. Mo se fa'ata'ita'iga, ua matou 'ave'esea le fa'ailoga o padding-toplo'o i luga o la matou fa'aputuga fa'aigoa o le leitio e fa'aoga lelei ai le laina fa'avae.

Leitio
Pusa siaki 
<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>
Fa'ailoga fa'ailoga fa'asaga'i

Ia mautinoa e fa'aoga .col-form-label-smpo'o .col-form-label-lglou <label>s po'o <legend>le s e mulimuli sa'o le tele o le .form-control-lgma .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>

Fa'avasegaina o koluma

E pei ona faʻaalia i faʻataʻitaʻiga muamua, o la matou faʻasologa faʻasologa e mafai ai ona e tuʻuina soʻo se numera o .cols i totonu ole .rowpoʻo .form-row. O le a latou vaevae tutusa le lautele avanoa i le va oi latou. E mafai fo'i ona e filifilia se vaega o au koluma e fa'aalu ai le tele pe itiiti le avanoa, ae o le vaega o totoe .cole vaelua tutusa le vaega o totoe, ma vasega fa'apitoa koluma e pei o .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>

Otometi-fa'atele

O le fa'ata'ita'iga o lo'o i lalo o lo'o fa'aogaina ai se fa'aoga flexbox e fa'atotonu tu'utonu ai mea i totonu ma suiga .colina .col-autoia na'o le tele o avanoa e fa'aoga ai e au koluma pe a mana'omia. I se isi auala, o le koluma e fua lava i luga o mea o loʻo i totonu.

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

E mafai ona e toe fa'afefiloi lea fa'atasi ma vasega o koluma fa'apitoa.

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

Ma o le mea moni o lo'o lagolagoina fa'atonuga fa'apitoa.

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

Fa'atumu laina

Fa'aoga le .form-inlinevasega e fa'aali ai se fa'asologa o fa'ailoga, fa'atonutonu fomu, ma fa'amau i luga o se laina fa'ata'atia e tasi. O fa'atonuga o fomu i totonu o fomu fa'asinomaga e ese la'ititi mai o latou tulaga fa'aletonu.

  • Pulea o display: flex, fa'alalo so'o se HTML avanoa paepae ma fa'atagaina oe e tu'uina atu fa'atonuga fa'atonuga ma fa'aoga avanoa ma flexbox .
  • E maua e pulega ma vaega fa'aoga e width: autofa'amalo le fa'aletonu Bootstrap width: 100%.
  • Na'o fa'atonuga e fa'aalia i totonu o va'aiga va'ai e le itiiti ifo i le 576px le lautele e fa'atatau mo va'ai va'ai va'ai i masini feavea'i.

Atonu e te manaʻomia le faʻaogaina ma le lima le lautele ma le faʻaogaina o faʻatonuga taʻitasi ma faʻaoga avanoa (e pei ona faʻaalia i lalo). I le mea mulimuli, ia mautinoa ia aofia ai i taimi uma le <label>faʻatasi ma faʻatonuga taʻitasi, tusa lava pe e te manaʻomia e natia mai tagata asiasi e le o ni screenreader ma .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>

E lagolagoina fo'i fa'atonuga fa'apitoa ma filifiliga.

<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>
Su'ega i igoa natia

Fa'atekonolosi fesoasoani e pei o le screen readers o le a iai fa'alavelave i au fomu pe afai e te le fa'aofiina se fa'ailoga mo mea uma e tu'uina atu. Mo nei fomu i totonu, e mafai ona e nanaina igoa e fa'aaoga ai le .sr-onlyvasega. O lo'o i ai isi auala fa'aopoopo e tu'uina atu ai se fa'ailoga mo tekinolosi fesoasoani, e pei o le aria-label, aria-labelledbypo'o le titleuiga. Afai e leai se tasi o nei mea o iai, e mafai e tekinolosi fesoasoani ona faʻaogaina le placeholderuiga, pe a iai, ae ia maitauina e placeholderle fautuaina le faʻaaogaina e suitulaga i isi metotia faʻailoga.

Fesoasoani tusitusiga

E mafai ona fa'aogaina tusitusiga fesoasoani tulaga poloka i fomu .form-text(na ta'ua muamua .help-blocki le v3). E mafai ona fetu'una'i le fa'atinoina o tusitusiga fesoasoani i totonu ole laiga e fa'aaoga ai so'o se elemene HTML ma vasega aoga e pei ole .text-muted.

Fa'afeso'ota'i tusitusiga fesoasoani ma fa'atonutonu fomu

O tusitusiga fesoasoani e tatau ona feso'ota'i manino ma le fa'atonutonuina o fomu e fa'atatau i le fa'aogaina o le aria-describedbyuiga. Ole mea lea ole a fa'amautinoa ai ole fesoasoani tekonolosi—e pei ole screen readers-o le a fa'asalalauina lenei tusitusiga fesoasoani pe a taula'i pe ulufale le tagata fa'aoga i le pule.

O tusitusiga fesoasoani o lo'o i lalo e mafai ona fa'avasega i le .form-text. O lenei vasega e aofia ai display: blockma fa'aopoopo nisi pito pito i luga mo le fa'afaigofieina o avanoa mai mea fa'aoga i luga.

O lau fa'aupuga e tatau ona 8-20 mataitusi le umi, e iai mataitusi ma numera, ma e le tatau ona i ai ni avanoa, mataitusi fa'apitoa, po'o 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>

E mafai ona fa'aogaina e tusitusiga i totonu so'o se elemene HTML masani (pe o se <small>, <span>, po'o se isi mea) e leai se mea e sili atu nai lo se vasega aoga.

E tatau ona 8-20 mataitusi le umi. 
<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>

Fomu fa'aletonu

Fa'aopoopo le disableduiga o le boolean i luga o se fa'aoga e taofia ai le fegalegaleai a tagata fa'aoga ma fa'aali mama.

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

Fa'aopoopo le disableduiga ile a <fieldset>e tape uma ai fa'atonuga i totonu.

<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>
Fa'ailo ma taula

Ona o le faaletonu, o le a faia e tagata su'esu'e ia fa'atonuga uma ( <input>, <select>ma <button>elemene) i totonu o se <fieldset disabled>fa'aletonu, e taofia ai feso'ota'iga i luga o le keyboard ma le isumu. Ae peita'i, afai o lau fomu e aofia ai fo'i <a ... class="btn btn-*">elemene, o le a na'o se sitaili o le pointer-events: none. E pei ona taʻua i le vaega e uiga i le tulaga faʻaletonu mo faʻamau (ma faʻapitoa i le vaega pito i lalo mo elemene taula), o lenei CSS meatotino e leʻi faʻasalaina ma e leʻo lagolagoina atoatoa i Internet Explorer 10, ma o le a le taofia ai tagata faʻaoga keyboard mai le mafai ona taula'i pe fa'agaoioia nei so'oga. O lea ina ia saogalemu, faʻaaoga le JavaScript masani e faʻamalo ai ia soʻotaga.

Fesoasoani cross-browser

E ui o Bootstrap o le a faʻaogaina nei sitaili i suʻesuʻega uma, Internet Explorer 11 ma lalo e le lagolagoina atoatoa le disableduiga ile <fieldset>. Fa'aoga le JavaScript masani e tape ai le seti fanua i nei su'esu'ega.

Fa'amaoniga

Tuuina atu ni fa'amatalaga taua, fa'atino i au fa'aoga fa'atasi ai ma le fa'amaoniaina o fomu HTML5– avanoa i a matou su'esu'ega uma e lagolagoina . Filifili mai le su'esu'ega fa'amaonia fa'amaonia manatu, po'o le fa'atinoina o fe'au fa'aaganu'u fa'atasi ma a tatou vasega faufale ma le JavaScript amata.

Matou te fautuaina i le taimi nei le faʻaogaina o sitaili faʻamaonia masani, ona o feʻau faʻamaonia le faʻaogaina o le browser e le o faʻaalia i taimi uma i tekinolosi fesoasoani i suʻesuʻega uma (aemaise lava, Chrome i luga o le desktop ma le telefoni feaveaʻi).

E faapefea ona galue

O le auala lenei e galue ai le faʻamaoniaina o pepa ma Bootstrap:

  • O le faʻamaoniaina o le HTML e faʻaaogaina e ala i le lua pseudo-vasega a le CSS, :invalidma :valid. E faatatau i <input>, <select>, ma <textarea>elemene.
  • O le Bootstrap o loʻo faʻaogaina le :invalidma :validsitaili i matua .was-validatedvasega, e masani ona faʻaoga i le <form>. A leai, so'o se fanua mana'omia e aunoa ma se tau e fa'aalia e le aoga ile utaina o itulau. I lenei auala, e mafai ona e filifili pe o afea e faʻagaoioia ai (e masani lava pe a maeʻa ona taumafai le tuʻuina atu).
  • Ina ia toe faʻafoʻi foliga o le fomu (mo se faʻataʻitaʻiga, i le tulaga o le tuʻuina atu o pepa faʻamalosi e faʻaaoga ai le AJAX), aveese le .was-validatedvasega mai le <form>toe tuʻuina atu.
  • I le avea ai o se faʻafouga, .is-invalidma .is-validvasega e mafai ona faʻaaogaina nai lo le pseudo-vasega mo le faʻamaoniaina o le itu a le server . Latou te le manaʻomia se .was-validatedvasega matua.
  • Ona o faʻalavelave i le auala e galue ai le CSS, e le mafai ona matou (i le taimi nei) faʻaoga sitaili i se <label>mea e sau i luma o le faʻatonutonuina o foliga i le DOM e aunoa ma le fesoasoani a le JavaScript masani.
  • O su'esu'ega fa'aonaponei uma e lagolagoina le API fa'amaonia fa'atapula'aina , o se fa'asologa o metotia JavaScript mo le fa'amaoniaina o fa'atonuga.
  • O fe'au fa'afofoga e mafai ona fa'aoga ai fa'aletonu ole su'esu'ega (ese'ese mo su'esu'ega ta'itasi, ma e le mafai ona fa'aogaina e ala i le CSS) po'o a tatou sitaili fa'aalia fa'apitoa fa'atasi ai ma HTML ma CSS fa'aopoopo.
  • E mafai ona e tu'uina atu fe'au fa'ale-aganu'u fa'atatau setCustomValidityile JavaScript.

Faatasi ai ma lena manatu, mafaufau i faʻataʻitaʻiga o loʻo mulimuli mai mo a tatou sitaili faʻamaonia pepa masani, vasega i le itu o le server, ma le faʻaogaina o suʻesuʻega.

Sitaili masani

Mo fe'au fa'amaonia aganu'u a Bootstrap, e mana'omia lou fa'aopoopoina o le novalidateuiga boolean i lau <form>. Ole mea lea e fa'amalo ai le browser default feedback tooltips, ae o lo'o maua pea le avanoa i le fa'amaoniga API i le JavaScript. Taumafai e tu'u le fomu i lalo; o le a fa'alavelaveina e le matou JavaScript le fa'amau tu'u mai ma fa'asalalau atu fa'amatalaga ia te oe. A e taumafai e tu'uina atu, o le a e va'ai i le :invalidma :validsitaili o lo'o fa'aoga i au fa'atonuga.

O sitaili fa'aalia fa'apitoa e fa'aoga ai lanu fa'aleaganu'u, tuaoi, sitaili taula'i, ma ata pito i tua e fa'afeso'ota'i lelei ai fa'amatalaga. O ata pito i tua mo <select>s e na'o avanoa i le .custom-select, ae le .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>

Fa'aletonu le browser

Le fiafia i fe'au tali fa'amaonia fa'ale-aganu'u po'o le tusiaina o le Javascript e sui ai le faiga o amio? Lelei mea uma, e mafai ona e faʻaogaina le faʻaogaina o le browser. Taumafai e lafo le fomu i lalo. Fa'alagolago i lau su'esu'ega ma le OS, o le a e va'ai i se sitaili la'ititi o fa'amatalaga.

E ui e le mafai ona sitaili nei sitaili faʻamatalaga i le CSS, e mafai lava ona e faʻavasegaina faʻamatalaga faʻamatalaga e ala i le 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>

Itu o le server

Matou te fautuaina le faʻaogaina o le faʻamaoniga a le tagata faʻatau, ae afai e te manaʻomia le faʻamaoniaina o le server-side, e mafai ona e faʻaalia le le aoga ma le aoga fomu .is-invalidma .is-valid. Manatua .invalid-feedbacko loʻo lagolagoina foi i nei vasega.

E foliga lelei!
E foliga lelei!
@
Fa'amolemole filifili se username.
Faamolemole aumai se aai aoga.
Fa'amolemole filifili se setete aoga.
Fa'amolemole tu'u mai se zip aoga.
E tatau ona e malilie ae e te leʻi tuʻuina atu. 
<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>

Elemene lagolago

O lo'o avanoa sitaili fa'amaonia mo fa'atonuga ma vaega nei:

  • <input>s ma <textarea>s faʻatasi ma .form-control(e aofia ai le oʻo atu i le tasi .form-controli vaega faʻapipiʻi)
  • <select>s ma .form-controlpe.custom-select
  • .form-checks
  • .custom-checkboxs ma .custom-radios
  • .custom-file
Fa'amolemole tu'u se fe'au ile textarea.
Fa'ata'ita'iga fa'amatalaga le sa'o
O isi fa'ata'ita'iga le sa'o o fa'amatalaga manatu
Fa'ata'ita'iga le sa'o aganu'u filifilia manatu faaalia
Fa'ata'ita'iga le sa'o o fa'amatalaga faila masani 
<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>

Mea faigaluega

Afai e fa'ataga e lau fomu, e mafai ona e fesuia'i .{valid|invalid}-feedbackvasega mo .{valid|invalid}-tooltipvasega e fa'aalia ai fa'amatalaga fa'amaonia i se fa'ailoga meafaigaluega. Ia mautinoa e iai se matua position: relativeo iai mo le fa'atulagaina o meafaigaluega. I le faʻataʻitaʻiga o loʻo i lalo, o matou vasega koluma ua uma ona iai lenei mea, ae o lau poloketi e ono manaʻomia se isi seti.

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>

Fa'asinomaga

O setete faʻamaonia e mafai ona faʻapitoa e ala i Sass ma le $form-validation-statesfaʻafanua. O loʻo i totonu o la matou _variables.scssfaila, o lenei faʻafanua Sass o loʻo faʻapipiʻiina e faʻatupuina tulaga faaletonu valid/ invalidfaʻamaonia. E aofia ai se fa'afanua fa'apipi'i mo le fa'avasegaina o lanu ma fa'ailoga a setete ta'itasi. E ui e leai se isi setete e lagolagoina e tagata suʻesuʻe, oi latou e faʻaaogaina sitaili masani e faigofie ona faʻaopoopo atili faʻamatalaga faʻamatalaga.

Faamolemole ia matau matou te le fautuaina le fa'avasegaina o nei tau e aunoa ma le suia o le 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));
}

Fa'ailoga fa'apitoa

Mo le tele o fa'aganu'u ma feso'ota'iga o su'esu'ega, fa'aoga a matou mea fa'aaganu'u atoa e sui ai mea fa'aletonu ole su'esu'e. O lo'o fausia i luga ole fa'ailoga fa'ailoga ma mafai ona maua, o lea e fa'amautu lelei ai mo so'o se fa'atonuga fa'aletonu.

Pusa siaki ma leitio

O pusa siaki ta'itasi ma leitio <input>ma <label>pa'aga e afifi i se <div>e fa'atupu ai la tatou fa'atonuga masani. I le faʻatulagaina, o le auala lava lea e tasi e pei o le matou faaletonu .form-check.

Matou te fa'aogaina le sibling fili ( ~) mo a matou <input>setete uma—pei-e fa'apena :checkedlelei le fa'ailoga fa'ailoga masani. Pe a tu'ufa'atasia ma le .custom-control-labelvasega, e mafai fo'i ona tatou fa'avasegaina tusitusiga mo mea ta'itasi e fa'atatau i le <input>'s state.

Matou te natia le faaletonu <input>ma opacityfaʻaaoga le .custom-control-labele fausia ai se faʻailoga fou masani i lona tulaga ma ::beforema ::after. Ae paga lea e le mafai ona tatou fausia se aganu'u mai na'o le <input>aua e le aoga le CSS contenti lena elemene.

I setete siaki, matou te faʻaogaina le base64 faʻapipiʻi SVG icons mai Open Iconic . E maua mai ai ia i matou le pule sili mo le fa'avasegaina ma le fa'atulagaina i luga o su'esu'ega ma masini.

Pusa siaki

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

E mafai fo'i e pusa siaki fa'apitoa ona fa'aoga le :indeterminatevasega fa'afoliga pe a fa'atulaga lima e ala i le JavaScript (e leai se uiga HTML avanoa e fa'ailoa ai).

Afai o loʻo e faʻaaogaina le jQuery, o se mea faʻapenei e tatau ona lava:

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

Leitio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

I totonu

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

Fa'aletonu

E mafai fo'i ona fa'aletonu pusa siaki ma leitio. Fa'aopoopo le disableduiga boolean i le <input>ma o le a otometi lava ona fa'ailoga le fa'ailoga masani ma fa'amatalaga igoa.

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

Suiga

O le ki o lo'o iai le fa'ailoga o se pusa siaki masani ae fa'aoga le .custom-switchvasega e fa'asolo ai le ki. E lagolagoina foi e sui le disableduiga.

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

Filifili le lisi

<select>E mana'omia e menus fa'apitoa na'o se vasega fa'aaganu'u, e .custom-selectfa'aoso ai sitaili masani. O sitaili fa'ale-aganu'u e fa'atapula'a ile <select>foliga muamua ma e le mafai ona suia le <option>s ona ole tapula'a ole su'esu'ega.

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

E mafai fo'i ona e filifili mai fa'aleaganu'u laiti ma lapopo'a e fa'afetauia a matou tusitusiga fa'atusa tutusa.

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

E multiplelagolagoina foi le uiga:

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

E pei o le sizeuiga:

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

Avanoa

Fausia ni <input type="range">fa'atonuga fa'apitoa i le .custom-range. O le ala (o le tua) ma le lima matua (le tau) o lo'o fa'atusa uma e foliga tutusa i su'esu'ega. Talu ai na'o le IE ma le Firefox e lagolagoina le "faatumuina" o latou ala mai le agavale po'o le taumatau o le limamatua o se auala e fa'aalia ai le alualu i luma, matou te le o lagolagoina i le taimi nei.

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

O mea fa'aoga lautele e iai fa'atauga fa'apitoa mo minma max- 0ma 100, fa'asologa. E mafai ona e fa'amaoti ni tau fou mo i latou o lo'o fa'aogaina le minma maxuiga.

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

E ala i le le mafai, fa'aogaina fa'aoga "snap" i tau aofa'i. Ina ia suia lenei mea, e mafai ona e faʻamaonia se steptau. I le faʻataʻitaʻiga o loʻo i lalo, matou te faʻaluaina le numera o laasaga e ala i le faʻaaogaina o step="0.5".

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

Su'e faila

Le fa'apipi'i fautuaina e fa'aola ai le tu'uina atu o faila fa'apitoa: bs-custom-file-input , o le mea lena o lo'o matou fa'aogaina i le taimi nei i totonu oa matou pepa.

O le faila faila e sili ona mata'utia o le fa'aputuga ma e mana'omia fa'aopoopo le Javascript pe a e mana'o e fa'afeso'ota'i i fa'agaioiga Filifili faila… ma le igoa faila filifilia.

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

Matou te natia le faila le aoga e <input>ala i opacityle faʻailogaina o le <label>. O le faamau e gaosia ma fa'atulagaina i le ::after. Ma le mea mulimuli, matou te ta'utino atu a widthma heightluga o le <input>mo avanoa talafeagai mo mea o lo'o siomia ai.

Fa'aliliuina po'o le fa'avasegaina o manoa ile SCSS

O le :lang()pseudo-class e fa'aogaina e fa'ataga ai le fa'aliliuina o le tusitusiga "Su'esu'e" i isi gagana. Fa'asolo pe fa'aopoopo fa'aulu i le $custom-file-textfesuiaiga Sass fa'atasi ai ma le fa'ailoga gagana talafeagai ma manoa fa'apitonu'u. O manoa Igilisi e mafai ona faʻapipiʻiina i le auala lava e tasi. Mo se faʻataʻitaʻiga, o le auala lenei e mafai ai e se tasi ona faʻaopoopoina se faʻaliliuga Sipaniolo (O le gagana Sipaniolo o le es):

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

O lo'o lang(es)fa'atino i luga o le tu'uina atu o faila masani mo se fa'aliliuga Sipaniolo:

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

E te mana'omia le setiina sa'o o le gagana o lau pepa (po'o le la'au o lo'o iai) ina ia fa'aalia le tusitusiga sa'o. E mafai ona faia lenei mea e faʻaaoga ai le languiga i luga o le <html>elemene poʻo le Content-Languageulutala HTTP , faʻatasi ai ma isi metotia.

Fa'aliliuina po'o le fa'avasegaina o manoa ile HTML

Ua saunia fo'i e Bootstrap se auala e fa'aliliu ai le tusitusiga "Su'esu'e" i le HTML ma le data-browseuiga e mafai ona fa'aopoopo i le fa'ailoga tu'ufa'atasi masani (fa'ata'ita'iga i le gagana Dutch):

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