Source

Ffoomu

Eby’okulabirako n’ebiragiro by’enkozesa y’emisono gy’okufuga foomu, ensengeka z’okulonda, n’ebitundu eby’enjawulo eby’okukola foomu ez’enjawulo.

Okulaba okutwalira awamu

Ebifuga foomu bya Bootstrap bigaziya ku sitayiro zaffe eza ffoomu eya Rebooted ne kiraasi. Kozesa kiraasi zino okulonda mu kwolesebwa kwazo okulongooseddwa okusobola okulaga okutambula obulungi mu bulawuzi n’ebyuma.

Kakasa nti okozesa ekintu ekituufu typeku biyingizibwa byonna (okugeza, emailku ndagiriro ya email oba numberku mawulire ag’omuwendo) okweyambisa ebifuga ebipya ebiyingizibwa nga okukakasa email, okulonda ennamba, n’ebirala.

Wano waliwo ekyokulabirako eky'amangu okulaga emisono gya Bootstrap egya ffoomu. Sigala ng’osoma okufuna ebiwandiiko ku bibiina ebyetaagisa, ensengeka ya foomu, n’ebirala.

Tetujja kugabana email yo na muntu mulala yenna. 
<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>

Ebifuga ffoomu

Ebifuga ffoomu y’ebiwandiiko —nga <input>s, <select>s, ne <textarea>s —bikolebwa sitayiro .form-controln’ekibiina. Mulimu emisono egy’endabika ey’awamu, embeera y’okussa essira, okupima obunene, n’ebirala.

Kakasa nti onoonyereza ku foomu zaffe ez’ennono okwongera sitayiro <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>

Ku biyingizibwa mu fayiro, kyusaamu .form-controlfor .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Okugerageranya obunene

Teeka obugulumivu ng'okozesa kiraasi nga .form-control-lgne .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>

Okusoma kwokka

Okwongerako ekintu kya readonlyboolean ku kiyingizibwa okuziyiza okukyusa omuwendo gw'ekiyingizibwa. Ebiyingizibwa ebisomebwa byokka birabika nga bitangaavu (nga ebiyingizibwa ebiremeseddwa), naye bikuume cursor eya bulijjo.

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

Ebiwandiiko ebitaliimu bigambo byokka ebisomebwa

Bw’oba ​​oyagala okuba <input readonly>n’ebintu mu ffoomu yo nga bikoleddwa mu sitayiro ng’ebiwandiiko ebya bulijjo, kozesa .form-control-plaintextekibiina okuggyawo sitayiro y’ennimiro ya foomu eya bulijjo n’okukuuma margin entuufu ne padding.

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

Ebiyingizibwa mu Range

Teeka ebiyingizibwa mu bbanga eriyinza okutambula mu bbanga ng'okozesa .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>

Ebibokisi ebikebera ne leediyo

Ebibokisi ebisookerwako ne leediyo bitereezebwa nga biyambibwako .form-check, kiraasi emu ey'ebika byombi eby'okuyingiza erongoosa ensengeka n'enneeyisa y'ebintu byabwe ebya HTML . Ebibokisi ebikebera biba bya kulonda ekintu kimu oba ebiwerako mu lukalala, ate leediyo za kulonda ekintu kimu okuva mu bingi.

Checkboxes ezilema ne leediyo ziwagirwa. Attribute disabledejja kukozesa langi eyaka okuyamba okulaga embeera y'okuyingiza.

Ebibokisi ebikebera ne obutambi bwa leediyo biwagira okukakasa foomu okwesigamiziddwa ku HTML era biwa ebiwandiiko ebimpimpi, ebituukirirwa. Nga bwe kiri, <input>s ne <label>s zaffe elementi za baganda okusinga an <input>munda mu a <label>. Kino kisingako katono verbose nga olina okulaga idne forattributes okukwataganya <input>ne <label>.

Ekisookerwako (ekitumbibwa) .

Nga bwekiba, omuwendo gwonna ogw'ebibokisi ebikebera ne leediyo ezibeera muganda ow'amangu zijja kuteekebwa mu vertikal era nga ziteekeddwa mu bbanga erisaanira ne .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>

Mu layini

Gamba ebibokisi ebikebera oba leediyo ku lunyiriri lwe lumu olw'okwebungulula ng'ogatta .form-check-inlineku yonna .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>

Awatali bipande

Yongera .position-staticku biyingizibwa munda mu .form-checkebyo ebitaliiko kiwandiiko kyonna kya label. Jjukira okukyawa engeri emu ey’akabonero ku tekinologiya ayamba (okugeza, okukozesa 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>

Okulambulula

Okuva Bootstrap bwekola display: blockera width: 100%kumpi ku bifuga byaffe byonna ebya ffoomu, foomu zijja by default stack vertically. Ebika ebirala bisobola okukozesebwa okukyusakyusa ensengeka eno ku musingi gwa buli ffoomu.

Okukola ebibinja

Ekibiina .form-groupy’engeri ennyangu ey’okwongerako ensengeka ezimu ku foomu. Ewa ekibiina ekikyukakyuka ekikubiriza okugatta obulungi ebiwandiiko, ebifuga, ebiwandiiko by’obuyambi eby’okwesalirawo, n’obubaka obukakasa foomu. By default it only applies margin-bottom, naye ekwata sitayiro endala mu .form-inlinenga bwe kyetaagisa. Kikozese ne <fieldset>s, <div>s, oba kumpi ekintu ekirala kyonna.

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

Ffoomu grid

Ffoomu ezisingako obuzibu zisobola okuzimbibwa nga tukozesa kiraasi zaffe eza grid. Kozesa bino ku nsengeka za foomu ezeetaaga empagi eziwera, obugazi obw'enjawulo, n'enkola endala ez'okulaganya.

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

Olunyiriri lwa ffoomu

Oyinza n'okukyusakyusa .rowku .form-row, enkyukakyuka y'olunyiriri lwaffe olwa giridi olwa bulijjo olusazaamu emidumu gy'ennyiriri egy'enjawulo okusobola ensengeka ennywevu era ennyimpi.

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

Ensengeka ezisingako obuzibu nazo zisobola okutondebwawo n’enkola ya grid.

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

Ekifaananyi eky’okwebungulula

Tonda foomu eziwanvuwa ne giridi ng’ogattako .rowkiraasi okukola ebibinja era ng’okozesa .col-*-*kiraasi okulaga obugazi bw’ebiwandiiko byo n’ebifuga. Kakasa nti oyongera .col-form-labelku <label>s zo nga bwe ziri vertically centered ne form controls zaabwe ezikwatagana.

Oluusi, oyinza okuba nga weetaaga okukozesa margin oba padding utilities okukola alignment eyo entuufu gye weetaaga. Okugeza, tuggyewo ku padding-topku stacked radio inputs label yaffe okusobola okukwataganya obulungi text baseline.

Leediyo
Akabokisi akalaga 
<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>
Okugerageranya obunene bw’akabonero ka foomu mu ngeri ey’okwebungulula

Kakasa nti okozesa .col-form-label-smoba .col-form-label-lgeri <label>s oba <legend>s yo okugoberera obulungi obunene bwa .form-control-lgne .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>

Okugerageranya obunene bw’empagi

Nga bwe kiragibwa mu byokulabirako ebiyise, enkola yaffe eya gridi ekusobozesa okuteeka omuwendo gwonna ogwa .cols munda mu a .rowoba .form-row. Bajja kugabanya obugazi obuliwo kyenkanyi wakati waabwe. Oyinza n’okulonda ekitundu ekitono eky’ennyiriri zo okutwala ekifo ekiwera oba ekitono, ate .cols ezisigadde ne zigabanya kyenkanyi ebisigadde, nga waliwo ebika by’ennyiriri ebitongole nga .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>

Okukola sayizi mu ngeri ey’okwekolako

Ekyokulabirako wansi kikozesa ekintu ekiyitibwa flexbox utility okuteeka ebirimu wakati mu vertikal era ne kikyuka .colokutuuka .col-autoennyiriri zo ne zitwala ekifo ekiwera kyokka nga bwe kyetaagisa. Mu ngeri endala, ennyiriri zeekula okusinziira ku birimu.

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

Olwo osobola okuddamu okutabula ekyo omulundi omulala ne size-specific column classes.

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

Era ddala custom form controls ziwagirwa.

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

Ffoomu eziri mu layini

Kozesa .form-inlineekibiina okulaga omuddirirwa gw’ebiwandiiko, ebifuga ffoomu, ne buttons ku lunyiriri lumu olw’okwebungulula. Ebifuga foomu munda mu foomu eziri mu layini byawukana katono okuva ku mbeera zaabwe ezisookerwako.

  • Ebifuga bye bino display: flex, okumenya ekifo kyonna ekyeru ekya HTML era ne kikusobozesa okuwa okufuga okulaganya n’ebikozesebwa mu bbanga n’ebikozesebwa mu flexbox .
  • Ebifuga n'ebibinja by'okuyingiza bifuna width: autookusazaamu Bootstrap default width: 100%.
  • Ebifuga birabika mu layini byokka mu bifo eby’okulaba ebirina obugazi waakiri 576px okusobola okubala ebifo ebifunda eby’okulaba ku byuma ebikozesebwa ku ssimu.

Oyinza okwetaaga okukola mu ngalo ku bugazi n’okulaganya kw’ebifuga bya ffoomu ssekinnoomu n’ebikozesebwa eby’okuteeka ebanga (nga bwe kiragibwa wansi). Ekisembayo, kakasa nti bulijjo ossaamu a <label>ne buli ffoomu control, ne bw’oba ​​weetaaga okugikweka abagenyi abatali screenreader ne .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>

Ebifuga foomu eya custom n'okulonda nabyo biwagirwa.

<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>
Ebikozesebwa ebirala okusinga ebiwandiiko ebikwekebwa

Tekinologiya ayamba nga screen readers ajja kuba n’obuzibu ne forms zo singa tossaamu label ku buli input. Ku foomu zino eziri mu layini, osobola okukweka ebiwandiiko ng’okozesa .sr-onlyekibiina. Waliwo enkola endala ez’okuwa akabonero ku tekinologiya ayamba, gamba nga aria-label, aria-labelledbyoba titleekintu. Singa tewali n’emu ku zino ebaawo, tekinologiya ayamba ayinza okuddukira mu kukozesa placeholderekintu ekyo, bwe kiba nga kiriwo, naye weetegereze nti okukozesa placeholderng’ekifo ky’enkola endala ez’okuwandiika obubonero tekiba kirungi.

Ekiwandiiko ekiyamba

Ebiwandiiko by’obuyambi eby’omutendera gwa bbulooka mu foomu bisobola okutondebwa nga tukozesa .form-text(eyali emanyiddwa nga .help-blockmu v3). Ebiwandiiko by'obuyambi ebiri mu layini bisobola okuteekebwa mu nkola mu ngeri ekyukakyuka nga tukozesa ekintu kyonna ekya HTML ekiri mu layini ne kiraasi z'omugaso nga .text-muted.

Okukwataganya ekiwandiiko ky'obuyambi n'ebifuga foomu

Ekiwandiiko ky’obuyambi kirina okukwatagana mu bulambulukufu n’okufuga foomu kye kikwatagana n’okukozesa aria-describedbyekintu. Kino kijja kukakasa nti tekinologiya ayamba —nga ebisoma ku ssirini —ajja kulangirira ekiwandiiko kino eky’obuyambi ng’omukozesa assa essira oba ng’ayingira mu kifuga.

Ebiwandiiko by'obuyambi wansi w'ebiyingizibwa bisobola okukolebwako sitayiro ne .form-text. Kiraasi eno erimu display: blockera n’eyongerako margin ezimu ez’okungulu okusobola okwanguyiza ebanga okuva ku biyingizibwa waggulu.

Ekigambo kyo eky’okuyingira kirina okuba nga kirimu ennukuta 8-20, nga kirimu ennukuta ne nnamba, era tekirina kubaamu bifo, ennukuta ez’enjawulo, oba 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>

Ebiwandiiko ebiri mu layini bisobola okukozesa ekintu kyonna ekya bulijjo ekya HTML ekiri mu layini (kabeere <small>, <span>, oba ekintu ekirala) nga tekirina kirala okuggyako kiraasi y’omugaso.

Alina okuba n’obuwanvu bw’ennukuta 8-20. 
<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>

Ffoomu z’abalema

Okwongerako ekintu kya disabledboolean ku kiyingizibwa okuziyiza enkolagana z'abakozesa n'okukifuula okulabika ng'ekitangaala.

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

Okwongerako disabledekintu ku a <fieldset>okulemesa ebifuga byonna ebiri munda.

<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>
Okulabula nga olina ennanga

Nga bwekiba, browsers zijja kutwala byonna ebifuga ffoomu enzaaliranwa ( <input>, <select>ne <button>elements) munda mu a <fieldset disabled>nga ebiremeseddwa, okulemesa byombi keyboard ne mouse enkolagana ku byo. Naye singa ffoomu yo nayo erimu <a ... class="btn btn-*">ebintu, bino bijja kuweebwa sitayiro ya pointer-events: none. Nga bwe kyayogerwa mu kitundu ekikwata ku mbeera elemeseddwa ku buttons (n'okusingira ddala mu kitundu ekitono eky'ebintu anchor), ekintu kino ekya CSS tekinnaba ku mutindo era tekinnawagirwa mu bujjuvu mu Internet Explorer 10, era tekijja kulemesa bakozesa keyboard okubeera asobola okussa essira oba okukozesa enkolagana zino. Kale okusobola okuba n’obukuumi, kozesa JavaScript eya bulijjo okulemesa enkolagana ng’ezo.

Okukwatagana kwa cross-browser

Wadde nga Bootstrap ejja kukozesa emisono gino mu browser zonna, Internet Explorer 11 ne wansi tewagira mu bujjuvu disabledattribute ku a <fieldset>. Kozesa JavaScript eya bulijjo okulemesa fieldset mu browser zino.

Okukakasa

Okuwa endowooza ez’omuwendo, ezisobola okukolebwa eri abakozesa bo n’okukakasa foomu ya HTML5– esangibwa mu bulawuzi zaffe zonna eziwagirwa . Londa okuva mu browser default validation feedback, oba teeka mu nkola obubaka obw'ennono ne classes zaffe ezimbiddwamu ne JavaScript etandika.

Mu kiseera kino tukuwa amagezi okukozesa emisono gy’okukakasa egy’enjawulo, kubanga obubaka bw’okukakasa obusookerwako bwa bbulawuzi enzaaliranwa tebutera kwolesebwa tekinologiya ayamba mu bulawuzi zonna (okusinga, Chrome ku desktop ne ku ssimu).

Engeri gye kikola

Laba engeri okukakasa foomu gye kukola ne Bootstrap:

  • Okukakasa foomu ya HTML kukozesebwa okuyita mu CSS's two pseudo-classes, :invalidne :valid. Kikwata ku <input>, <select>, ne <textarea>elementi.
  • Bootstrap scopes the :invalidne :validstyles ku kiraasi y'omuzadde .was-validated, ebiseera ebisinga ekozesebwa ku <form>. Bwe kitaba ekyo, ennimiro yonna eyeetaagisa nga tewali muwendo eraga nga si ntuufu ku kutikka omuko. Mu ngeri eno, oyinza okusalawo ddi lw’ogenda okuzikola (ebiseera ebisinga oluvannyuma lw’okugezaako okuleeta foomu).
  • Okuddamu okuteekawo endabika ya foomu (okugeza, mu mbeera y’okuweereza foomu okukyukakyuka nga okozesa AJAX), ggyawo .was-validatedekibiina okuva mu <form>nate oluvannyuma lw’okuweereza.
  • Nga fallback, .is-invalidera .is-validclasses ziyinza okukozesebwa mu kifo kya pseudo-classes for server side validation . Tezeetaaga .was-validatedkibiina kya bazadde.
  • Olw'ebizibu mu ngeri CSS gy'ekola, tetusobola (mu kiseera kino) kukozesa sitayiro ku a <label>ejja nga tennabaawo kufuga ffoomu mu DOM awatali buyambi bwa JavaScript eya bulijjo.
  • Browser zonna ez’omulembe ziwagira constraint validation API , omuddirirwa gw’enkola za JavaScript ez’okukakasa ebifuga foomu.
  • Obubaka bw’okuddamu buyinza okukozesa ebisookerwako bya bbulawuzi (eby’enjawulo ku buli bbulawuzi, era nga tebiyinza kukolebwa nga biyita mu CSS) oba emisono gyaffe egy’okuddamu egy’ennono nga giriko HTML ne CSS ez’enjawulo.
  • Oyinza okuwa obubaka obw'obutuufu obw'ennono ne setCustomValiditymu JavaScript.

Nga olina ekyo mu birowoozo, lowooza ku demos zino wammanga ez’emisono gyaffe egy’okukakasa foomu egy’ennono, kiraasi z’oludda lwa seva ez’okwesalirawo, n’ebisookerwako bya bbulawuzi.

Emisono egy’enjawulo

Ku bubaka obw'okukakasa foomu ya Bootstrap eya bulijjo, ojja kwetaaga okwongerako ekintu kya novalidateboolean ku <form>. Kino kiremesa ebikozesebwa eby'okuddamu ebisookerwako ebya bbulawuzi, naye nga kikyawa olukusa ku API z'okukakasa foomu mu JavaScript. Gezaako okuleeta foomu eno wammanga; JavaScript yaffe ejja kukwata button y'okuweereza n'okukuweereza endowooza yo. Bw’oba ​​ogezaako okuleeta, ojja kulaba :invalidne :validsitayiro nga zikozesebwa ku bifuga foomu yo.

Emisono gy’okuddamu egy’enjawulo gikozesa langi ez’enjawulo, ensalosalo, emisono gy’okussa essira, n’ebifaananyi eby’emabega okusobola okuwuliziganya obulungi ebiteeso. Ebifaananyi eby'emabega ebya <select>s bifunibwa ne .custom-select, so si .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Browser esookera ddala

Tofaayo ku bubaka bw'okuddamu okukakasa obw'ennono oba okuwandiika JavaScript okukyusa enneeyisa za ffoomu? Byonna birungi, osobola okukozesa browser defaults. Gezaako okuleeta foomu eno wammanga. Okusinziira ku browser yo ne OS, ojja kulaba sitayiro ey’enjawulo katono ey’okuddamu.

Wadde nga emisono gino egy'okuddamu tegisobola kukola sitayiro na CSS, okyayinza okulongoosa ebiwandiiko by'okuddamu okuyita mu 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>

Oludda lwa seeva

Tukuwa amagezi okukozesa okukakasa ku ludda lwa kasitoma, naye mu mbeera nga weetaaga okukakasa ku ludda lwa seva, osobola okulaga ennimiro za foomu ezitali ntuufu era entuufu ne .is-invalidne .is-valid. Weetegereze nti .invalid-feedbacknakyo kiwagirwa ne kiraasi zino.

Kirabika bulungi!
Kirabika bulungi!
@
Nsaba olonde erinnya ly'omukozesa.
Nsaba okuwaayo ekibuga ekituufu.
Nsaba olonde embeera entuufu.
Nsaba okuwaayo zipu entuufu.
Olina okukkiriza nga tonnawaayo. 
<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>

Ebintu ebiwagirwa

Emisono gy'okukakasa giriwo ku bifuga n'ebitundu bya foomu bino wammanga:

  • <input>s ne <textarea>s nga mulimu .form-control(nga mw’otwalidde n’okutuuka ku kimu .form-controlmu bibinja by’ebiyingizibwa) .
  • <select>s nga balina .form-controloba.custom-select
  • .form-checks
  • .custom-checkboxs ne .custom-radios
  • .custom-file
Nsaba oyingize obubaka mu textarea.
Ekyokulabirako ekiwandiiko ky’okuddamu ekitali kituufu
More example ekiwandiiko ky'okuddamu ekitali kituufu
Eky'okulabirako ekitali kituufu custom select feedback
Eky'okulabirako ekitali kituufu eky'okuddamu kwa fayiro ey'ennono 
<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>

Ebikozesebwa

Singa ensengeka ya foomu yo ekkiriza, osobola okukyusakyusa .{valid|invalid}-feedbackkiraasi ne .{valid|invalid}-tooltipkiraasi okulaga ebiteeso by’okukakasa mu kigambo ky’ebikozesebwa ekiriko sitayiro. Kakasa nti olina omuzadde alina position: relativeku yo for tooltip positioning. Mu kyokulabirako wansi, kiraasi zaffe ez’ennyiriri kino zirina dda, naye pulojekiti yo eyinza okwetaaga okuteekawo okulala.

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>

Okulongoosa

Embeera z'okukakasa zisobola okulongoosebwa nga ziyita mu Sass ne $form-validation-statesmaapu. Esangibwa mu _variables.scssfayiro yaffe, maapu eno eya Sass ekolebwako loopu okukola embeera ezisookerwako valid/ invalidezikakasa. Mulimu maapu eteekeddwa mu kisenge okulongoosa langi n’akabonero ka buli ssaza. Wadde nga tewali masaza malala gawagirwa bbulawuzi, abo abakozesa emisono egy’enjawulo basobola bulungi okwongerako ebiteeso bya ffoomu ebizibu ennyo.

Nsaba omanye nti tetukuwa magezi kulongoosa miwendo gino nga tokyusizza na 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));
}

Ffoomu ez’ennono

Okusobola n’okusingawo okulongoosa n’okukwatagana kwa bbulawuzi okusalako, kozesa ebintu byaffe ebya ffoomu eby’enjawulo ddala okudda mu kifo ky’ebisookerwako ebya bbulawuzi. Zizimbibwa waggulu ku semantic ne accessible markup, kale zibeera solid replacements for any default form control.

Ebibokisi ebikebera ne leediyo

Buli checkbox ne radio <input>ne <label>pairing bizingibwa mu a <div>okukola custom control yaffe. Mu nsengeka, eno y’enkola y’emu n’enkola yaffe eya bulijjo .form-check.

Tukozesa ekisunsula baganda ( ~) ku masaza gaffe <input>gonna —nga :checked—okukola obulungi sitayiro y’ekiraga foomu yaffe ey’ennono. Bwe tugattibwa ne .custom-control-labelkiraasi, tusobola n’okukola sitayiro y’ekiwandiiko kya buli kintu okusinziira ku mbeera ya <input>'s.

Tukweka ekisookerwako <input>ne opacityera tukozesa .custom-control-labelokuzimba ekiraga foomu empya ey'ennono mu kifo kyakyo ne ::beforene ::after. Ebyembi tetusobola kuzimba custom one okuva just the <input>kubanga CSS's contenttekola ku element eyo.

Mu mbeera ezikebereddwa, tukozesa ebifaananyi bya SVG ebiteekeddwamu base64 okuva mu Open Iconic . Kino kituwa okufuga okusinga obulungi ku sitayiro n’okuteeka mu kifo mu bulawuzi n’ebyuma byonna.

Ebibokisi ebikebera

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

Ebibokisi ebikebera eby’enjawulo nabyo bisobola okukozesa :indeterminateekibiina eky’obulimba nga biteekeddwa mu ngalo nga biyita mu JavaScript (tewali kintu kya HTML ekiriwo eky’okukirambika).

Bw’oba ​​okozesa jQuery, ekintu nga kino kisaana okumala:

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

Leediyo

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

Mu layini

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

Obutesobola

Ebibokisi ebikebera eby’enjawulo ne leediyo nabyo bisobola okulemesa. Okwongerako ekintu kya disabledboolean ku <input>era ekiraga eky'ennono n'ennyonnyola y'akabonero bijja kukolebwa mu sitayiro mu ngeri ey'otoma.

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

Ebikyusakyusa

Sswiiki erina markup ya custom checkbox naye ekozesa .custom-switchclass okulaga toggle switch. Switches nazo ziwagira disabledattribute.

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

Londa menu

Menyu <select>eza custom zeetaaga kiraasi ya custom yokka, .custom-selectokutandika emisono egy'ennono. Emisono egy'enjawulo gikoma ku <select>ndabika ya 's esooka era tesobola kukyusa <option>s olw'obuzibu bwa bbulawuzi.

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

Oyinza n'okulonda okuva mu kulonda okutono n'okunene okw'ennono okukwatagana n'ebiwandiiko byaffe ebiyingizibwa mu sayizi y'emu.

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

Attribute multipleera ewagirwa:

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

Nga bwe kiri ku sizempisa:

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

Ebanga

Tonda <input type="range">ebifuga eby'ennono ne .custom-range. Oluyimba (emabega) n’engalo ensajja (omuwendo) byombi bikoleddwa mu sitayiro okulabika kye kimu mu bulawuzi zonna. Nga IE ne Firefox zokka bwe ziwagira “okujjuza” oluyimba lwabwe okuva ku kkono oba ku ddyo w’engalo ensajja ng’engeri y’okulaga mu maaso enkulaakulana, mu kiseera kino tetugiwagira.

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

Ebiyingizibwa mu bbanga birina emiwendo egy’enjawulo egya minne max— 0ne 100, mu kulondako. Oyinza okulaga emiwendo emipya eri abo abakozesa ebifaananyi minne max.

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

Nga bwekiba, ebiyingizibwa mu bbanga “snap” ku miwendo gya namba enzijuvu. Okukyusa kino, osobola okulaga stepomuwendo. Mu kyokulabirako wansi, tukubisaamu emirundi ebiri omuwendo gw’emitendera nga tukozesa step="0.5".

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

Okukebera fayiro

Plugin esengekeddwa okukola obulamu okuyingiza fayiro eya bulijjo: bs-custom-file-input , ekyo kye tukozesa mu kiseera kino wano mu docs zaffe.

Okuyingiza fayiro kwe kusinga gnarly mu kibinja era kyetaagisa JavaScript ey'okugattako bw'oba oyagala okuziyunga n'enkola Londa fayiro... n'ekiwandiiko ky'erinnya lya fayiro ekirondeddwa.

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

Tukweka fayiro eya bulijjo <input>nga tuyita mu opacityera mu kifo ky'ekyo tukola sitayiro ya <label>. Button ekolebwa era n'eteekebwa ne ::after. Ekisembayo, tulangirira a widthne heightku the <input>for proper spacing for surrounding content.

Okuvvuunula oba okulongoosa ennyiriri ne SCSS

Ekika :lang()ky’obulimba kikozesebwa okusobozesa okuvvuunula ekiwandiiko “Browse” mu nnimi endala. Ssa oba yongera ku biyingiziddwa ku $custom-file-textnkyukakyuka ya Sass n'akabonero k'olulimi akakwatagana n'ennyiriri eziteekeddwa mu kitundu . Ennyiriri z’Olungereza zisobola okulongoosebwa mu ngeri y’emu. Okugeza, wuuno engeri omuntu gy'ayinza okwongerako enzivuunula y'Olusipeyini (enkodi y'olulimi Olusipeyini eri es):

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

Wano lang(es)mu bikolwa ku kuyingiza fayiro eya bulijjo ey'okuvvuunula mu Lusipeyini:

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

Ojja kwetaaga okuteekawo olulimi lw'ekiwandiiko kyo (oba omuti omutono ogwakyo) mu butuufu okusobola ekiwandiiko ekituufu okulagibwa. Kino kiyinza okukolebwa nga okozesa ekintulang ekiri ku elementi<html> oba Content-Languageomutwe gwa HTTP , mu nkola endala.

Okuvvuunula oba okulongoosa ennyiriri ne HTML

Bootstrap era egaba engeri y’okuvvuunula ekiwandiiko “Browse” mu HTML n’ekintu data-browseekiyinza okugattibwa ku kiwandiiko ky’okuyingiza eky’ennono (okugeza mu Ludaaki):

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