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.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-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" placeholder="Password">
    </div>
  </div>
</form>

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

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.

Ebibokisi ebilemeddwa ne leediyo biwagirwa, naye okuwa not-allowedcursor ku hover y'omuzadde <label>, ojja kwetaaga okwongera ku disabledattribute ku .form-check-input. Ekintu ekiremeseddwa kijja kukozesa langi enzirugavu okuyamba okulaga embeera y'okuyingiza.

Ebibokisi ebikebera ne leediyo ezikozesa zizimbibwa okuwagira okukakasa foomu okwesigamiziddwa ku HTML n’okuwa 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.

Akabokisi akasooka okukebera

Akabokisi k'okukebera akalemeddwa

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

Leediyo eya bulijjo

Leediyo eyookubiri eya bulijjo

Leediyo eriko obulemu

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

3 (abaliko obulemu) .

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (abaliko obulemu) .

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

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.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

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.

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

<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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

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.

Erinnya erisooka

Looks good!

Erinnya erisemba

Looks good!

Erinnya ly'omukozesa

Please choose a username.

Ekibuga

Please provide a valid city.

Eggwanga

Please provide a valid state.

Zipu

Please provide a valid zip.

Kkiriza ebiragiro n’obukwakkulizo

You must agree before submitting.

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

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

Browser 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" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Oludda lwa seeva

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

Erinnya erisooka

Kirabika bulungi!

Erinnya erisemba

Kirabika bulungi!

Erinnya ly'omukozesa

Nsaba olonde erinnya ly'omukozesa.

Ekibuga

Nsaba okuwaayo ekibuga ekituufu.

Eggwanga

Nsaba okuwa embeera entuufu.

Zipu

Nsaba okuwaayo zipu entuufu.

Kkiriza ebiragiro n’obukwakkulizo

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" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ebintu ebiwagirwa

Ffoomu zaffe ez’ekyokulabirako ziraga ebiwandiiko ebizaaliranwa <input>waggulu, naye emisono gy’okukakasa foomu giriwo ku bifuga byaffe ebya foomu eby’ennono, nabyo.

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

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

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

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.

Erinnya erisooka

Erinnya erisemba

Erinnya ly'omukozesa

Ekibuga

Eggwanga

Zipu

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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 bizingibwa mu a <div>ne muganda <span>waffe okukola custom control yaffe ne a <label>ku biwandiiko ebiwerekerako. 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

Laga akabokisi kano ak'ennono

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

Laga akabokisi kano ak'ennono

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

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

Leediyo

Toggle leediyo eno eya custom

Oba toggle eno endala custom radio

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

Mu layini

Toggle leediyo eno eya custom

Oba toggle eno endala custom radio

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

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.

Laga akabokisi kano ak'ennono

Toggle leediyo eno eya custom

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

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

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.

Eky’okulabirako range

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

Eky’okulabirako range

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

Eky’okulabirako range

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

Okukebera fayiro

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.

Londa fayiro

<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

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:

Okulonda mu Archivo

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

Ffoomu

Okulaba okutwalira awamu

Ebifuga ffoomu

Okugerageranya obunene

Okusoma kwokka

Ebiwandiiko ebitaliimu bigambo byokka ebisomebwa

Ebiyingizibwa mu Range

Ebibokisi ebikebera ne leediyo

Ekisookerwako (ekitumbibwa) .

Mu layini

Awatali bipande

Okulambulula

Okukola ebibinja

Ffoomu grid

Olunyiriri lwa ffoomu

Ekifaananyi eky’okwebungulula

Okugerageranya obunene bw’akabonero ka foomu mu ngeri ey’okwebungulula

Okugerageranya obunene bw’empagi

Okukola sayizi mu ngeri ey’okwekolako

Ffoomu eziri mu layini

Ebikozesebwa ebirala okusinga ebiwandiiko ebikwekebwa

Ekiwandiiko ekiyamba

Okukwataganya ekiwandiiko ky'obuyambi n'ebifuga foomu

Ffoomu z’abalema

Okulabula nga olina ennanga

Okukwatagana kwa cross-browser

Okukakasa

Engeri gye kikola

Emisono egy’enjawulo

Browser esookera ddala

Oludda lwa seeva

Ebintu ebiwagirwa

Ebikozesebwa

Ffoomu ez’ennono

Ebibokisi ebikebera ne leediyo

Ebibokisi ebikebera

Leediyo

Mu layini

Obutesobola

Londa menu

Ebanga

Okukebera fayiro

Okuvvuunula oba okulongoosa ennyiriri