in English

Forms

Nimûne û rêwerzên karanîna ji bo şêwazên kontrolkirina form, vebijarkên sêwiranê, û hêmanên xwerû yên ji bo afirandina cûrbecûr forman.

Têgihiştinî

Kontrolên forma Bootstrap li ser şêwazên forma me yên Rebooted bi dersan berfireh dibin. Van dersan bikar bînin da ku hûn dîmenên xweyên xwerû hilbijêrin da ku li seranserê gerok û cîhazan danûstendinek domdartir bikin.

Bawer bikin ku hûn li ser hemî têketinan taybetmendiyek guncan bikar bînin type(mînak, emailji bo navnîşana e-nameyê an numberji bo agahdariya jimareyî) da ku ji kontrolên têketina nûtir ên mîna verastkirina e-nameyê, bijartina hejmarê, û hêj bêtir sûd werbigirin.

Li vir mînakek bilez heye ku şêwazên forma Bootstrap nîşan bide. Ji bo belgeyên li ser dersên pêwîst, sêwirana formê, û hêj bêtir bixwînin.

Em ê tu carî e-nameya we bi kesek din re parve nekin. 
<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>

Kontrolên formê

Kontrolên forma nivîsê-wek <input>s, <select>s û <textarea>s- bi polê re têne şêwaz kirin .form-control. Di nav de şêwazên ji bo xuyangkirina gelemperî, rewşa balê, mezinbûn, û hêj bêtir hene.

Jê bawer bin ku hûn formên xwerû yên meya xwerû bigerin da ku şêwaza pêşdetir <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>

Ji bo têketinên pelê, ji .form-controlbo biguherînin .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>

Mezinbûn

Bi karanîna çînên mîna .form-control-lgû bilindahiyan saz bikin .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>

Readonly

Taybetmendiya boolean li ser ketinek zêde readonlybikin da ku pêşî li guhertina nirxa têketinê bigirin. Têketinên tenê-xwendin siviktir xuya dikin (mîna têketinên neçalak), lê kursorê standard diparêzin.

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

Nivîsa sade tenê xwendin

Heke hûn dixwazin <input readonly>hêmanên di forma we de wekî nivîsek sade were şêwazkirin, .form-control-plaintextpolê bikar bînin da ku şêwaza qada forma xwerû jêbirin û marjînal û pêveka rast biparêzin.

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

Range Inputs

Têketinên rêza gerok ên horizontî bi karanîna .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>

Checkboxes û radyo

Qutikên kontrolê û radyoyên xwerû bi alîkariya .form-check, çînek yekane ji bo her du celebên têketinê ku layout û tevgera hêmanên wan ên HTML-ê çêtir dike têne çêtir kirin . Qutikên kontrolê ji bo hilbijartina yek an çend vebijarkan di navnîşek de ne, dema ku radyo ji bo hilbijartina yek vebijarkek ji gelekan in.

Qutik û radyoyên neçalak têne piştgirî kirin. Taybetmendî disableddê rengek siviktir bixebitîne da ku bibe alîkar ku rewşa têketinê nîşan bide.

Qutiyên kontrolê û bişkokên radyoyê pejirandina forma HTML-ê piştgirî dikin û etîketên kurt û gihîştî peyda dikin. Bi vî rengî, <input>s û <label>yên me hêmanên xwişk-bira ne ku li hember an <input>di hundurê de ne <label>. Ev hinekî devkîtir e ji ber ku divê hûn diyar bikin idû veqetînin da ku bi û for-yê re têkildar <input>bikin <label>.

Pêşbirk (lihevkirî)

Ji hêla xwerû ve, her jimarek qutiyên kontrolê û radyoyên ku xwişk û birayên yekser in dê bi rengek vertîkal werin berhev kirin û bi guncan ve bi .form-check.

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

Inline

Qutiyên kontrolê an radyoyan li ser heman rêza horizontî kom bikin û li her yekê zêde .form-check-inlinebikin .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>

Bê etîketan

Li têketinên ku .position-staticdi nav .form-checkwan de nivîsa etîketê tune ye zêde bikin. Bînin bîra xwe ku hûn hîn jî ji bo teknolojiyên arîkar hin formek navekî gihîştî peyda bikin (mînak, karanîna 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>

Rêz

Ji ber ku Bootstrap display: blockû width: 100%hema hema li ser hemî kontrolên forma me bicîh tîne, form dê ji hêla xwerû ve vertîkal werin berhev kirin. Dersên pêvek dikarin werin bikar anîn da ku vê sêwiranê li ser bingeha per-formê biguhezînin.

Koman ava dikin

Çîn .form-groupawayê herî hêsan e ku meriv hin avahî li formayan zêde bike. Ew çînek maqûl peyda dike ku komkirina rast a etîketan, kontrolê, nivîsa alîkariyê ya vebijarkî, û peyamên pejirandina formê teşwîq dike. Ji hêla xwerû ve ew tenê derbas dibe , lê li gorî hewcedariyê margin-bottomşêwazên din hildibijêre . .form-inlineWê bi <fieldset>s, <div>s, an hema hema hêmanek din bikar bînin.

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

Grid form

Formên tevlihevtir dikarin bi karanîna dersên torê yên me werin çêkirin. Vana ji bo sêwirana formên ku hewceyê pir stûnan, firehiyên cihêreng, û vebijarkên hevrêziyê yên din hewce dikin bikar bînin.

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

Rêzika formê

Di heman demê de hûn dikarin bi guhertoyek rêzika meya standard a torê ya ku ji .rowbo .form-rowsêwiranên hişktir û kompakttir gemarên stûnê yên xwerû vedigire biguherînin.

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

Di heman demê de bi pergala torê re sêwiranên tevlihevtir jî têne afirandin.

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

Forma Horizontal

.rowBi lêzêdekirina polê ji bo avakirina koman û bi karanîna .col-*-*çînan re ji bo diyarkirina firehiya etîket û kontrolên xwe bi tevrê re formên horizontî biafirînin . Jê bawer bin ku hûn li s-yên xwe jî zêde .col-form-labelbikin <label>da ku ew bi kontrolên formên xwe yên têkildar ve bi navendê verastî bin.

Carinan, dibe ku hûn hewce ne ku karûbarên marjînal an peldankê bikar bînin da ku ew hevrêziya bêkêmasî ya ku hûn hewce ne biafirînin. Mînakî, padding-topme etîketa li ser têketina radyoya xweya stêrk jê kir da ku xêza bingehîn a nivîsê çêtir birêkûpêk bike.

Radios 
<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 row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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>
Mezinahiya labelê forma Horizontal

Bawer bin ku bikar bînin .col-form-label-sman jî .col-form-label-lgs <label>an <legend>sên xwe rast bişopînin mezinahiya .form-control-lgû .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Mezinbûna stûnê

Wekî ku di mînakên berê de hate xuyang kirin, pergala meya torê dihêle hûn her jimarek .cols-yê di nav .rowan an de bi cîh bikin .form-row. Ew ê firehiya berdest di navbera xwe de wekhev parve bikin. Di heman demê de hûn dikarin binkeyek stûnên xwe hilbijêrin da ku pir an hindik cîh bigire, dema ku yên mayî yên mayî .colbi heman rengî, bi çînên stûnên taybetî yên mîna .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

Mînaka jêrîn karûbarek flexbox bikar tîne da ku naverok vertîkal bike naverok û diguhezîne da .colku .col-autostûnên we tenê bi qasî ku hewce bike cîh digirin. Bi awayek din, stûn li gorî naverokê xwe mezin dike.

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

Dûv re hûn dikarin wê carek din bi dersên stûnê yên bi pîvan-taybetî re tevlihev bikin.

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

Û bê guman kontrolên forma xwerû têne piştgirî kirin.

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

Formên inline

Dersê bikar bînin .form-inlineda ku rêzek etîketan, kontrolên formê, û bişkokên li ser rêzek yekalî nîşan bidin. Kontrolên formê yên di nav formên hundurîn de ji rewşên wan ên xwerû hinekî cûda dibe.

  • Kontrol ev in display: flex, ku her cîhê spî yê HTML-ê hilweşîne û destûrê dide te ku hûn bi karûbarên valahî û flexbox re kontrolkirina hevrêziyê peyda bikin .
  • Kontrol û komên têketinê werdigirin width: autoda ku pêşnumaya Bootstrap bişopînin width: 100%.
  • Kontrol tenê di dîmenderên ku bi kêmî ve 576 px fireh in de têne xuyang kirin ku ji bo dîtinên teng ên li ser cîhazên mobîl hesab bikin.

Dibe ku hûn hewce ne ku hûn bi destan firehî û lihevhatina kontrolên formên kesane bi karûbarên valahiyê (wek ku li jêr tê xuyang kirin) çareser bikin. Di paşiya paşîn de, pê ewle bin ku hûn her gav <label>bi her formek kontrolê re veşêrin, hetta ku hûn hewce ne ku wê ji mêvanên ne-ekranxwîner bi veşêrin .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>

Kontrolkirin û hilbijarkên forma xwerû jî têne piştgirî kirin.

<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>
Alternatîfên etîketên veşartî

Teknolojiyên arîkar ên wekî xwendevanên ekranê dê bi formên we re pirsgirêk derkevin heke hûn ji bo her têketinê etîketek negirin. Ji bo van formên hundurîn, hûn dikarin etîketan bi karanîna .sr-onlypolê veşêrin. Rêbazên din ên alternatîf ên peydakirina nîşanek ji bo teknolojiyên arîkar hene, wek mînak aria-label, aria-labelledbyan titletaybetmendî. Ger yek ji van tune be, dibe ku teknolojiyên arîkar bikar bînin ku placeholdertaybetmendiyê bikar bînin, heke hebe, lê bala xwe bidin ku karanîna placeholderwekî cîhgirek ji bo rêbazên din ên nîşankirinê nayê pêşniyar kirin.

Nivîsara alîkariyê

Nivîsara arîkariya asta blokê di formayan de dikare bi karanîna .form-text(berê wekî .help-blockdi v3 de dihat zanîn) were afirandin. Nivîsara arîkariyê ya hundurîn dikare bi rengek nermî bi karanîna her hêmanek HTML-a hundurîn û çînên karûbar ên mîna .text-muted.

Têkiliya nivîsa alîkariyê bi kontrolên formê re

Nivîsara alîkariyê divê bi eşkere bi forma kontrolê ya ku ew bi karanîna aria-describedbytaybetmendiyê ve girêdayî ye ve girêdayî be. Ev ê piştrast bike ku teknolojiyên arîkar - wek xwendevanên ekranê - dema ku bikarhêner balê dikişîne an têkeve kontrolê dê vê nivîsara alîkariyê ragihîne.

Nivîsara arîkariyê ya li jêr têketinan dikare bi şêwazê .form-text. Ev çîn ji display: blockbo veqetandina hêsan a ji têketinên jorîn hin marjînalek jorîn vedihewîne û lê zêde dike.

Divê şîfreya we ji 8-20 tîpan be, tîp û jimar hebin û valahî, tîpên taybet û emoji nebin. 
<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>

Nivîsara xêzkirî dikare her hêmanek HTML-a hundurîn a tîpîk bikar bîne (bibe ew <small>, <span>, an tiştek din) ji çînek bikêrhatî wêdetir tiştek tune.

Divê 8-20 tîpan be. 
<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>

Formên astengdar

disabledTaybetmendiya boolean li ser têketinê zêde bikin da ku pêşî li danûstendinên bikarhêner bigire û wê siviktir xuya bike .

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

disabledTaybetmendiyê li a zêde bikin <fieldset>da ku hemî kontrolên di hundurê de neçalak bikin.

Mînaka qada seqetkirî 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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>
Bi lengeran hişyar kirin

Gerok hemî kontrolên forma xwemalî ( <input>, <select>, û <button>hêmanên) di hundurê de <fieldset disabled>wekî neçalak dihesibîne, hem li ser wan danûstendinên klavyeyê û hem jî mişkî asteng dike.

Lêbelê, heke forma we di heman demê de hêmanên bişkojka xwerû yên mîna <a ... class="btn btn-*">, ji van re tenê şêwazek were dayîn pointer-events: none. Wekî ku di beşa di derbarê rewşa neçalak a bişkokan de (û bi taybetî di bin-beşa hêmanên ankerê de) hate destnîşan kirin, ev taybetmendiya CSS hîn ne standardkirî ye û di Internet Explorer 10-ê de bi tevahî nayê piştgirî kirin. Kontrolên li ser bingeha ankerê jî dê hîn bin. baldarî û bi karanîna klavyeyê tê xebitandin. Pêdivî ye ku hûn van kontrolan bi destan biguhezînin û lê zêde tabindex="-1"bikin da ku pêşî li wergirtina balê bigirin û aria-disabled="disabled"rewşa wan ji teknolojiyên arîkar re nîşan bidin.

Lihevhatina cross-browser

Dema ku Bootstrap dê van şêwazan di hemî gerokan de bicîh bîne, Internet Explorer 11 û jêrîn bi tevahî disabledtaybetmendiya li ser a <fieldset>. JavaScript-a xwerû bikar bînin da ku di van gerokan de berhevoka zeviyê neçalak bikin.

Validation

Bi erêkirina forma HTML5-ê ji bikarhênerên xwe re bertekên hêja û çalak peyda bikin - di hemî gerokên me yên piştgirîkirî de hene. Ji bergera erêkirina xwerû ya gerokê hilbijêrin, an jî bi dersên me yên çêkirî û JavaScript-a destpêkê re peyamên xwerû bicîh bînin.

Em dizanin ku naha şêwazên pejirandina xwerû yên ji hêla xerîdar û serişteyên amûran ve nayên gihîştin, ji ber ku ew li ber teknolojiyên arîkar nabin. Dema ku em li ser çareseriyekê dixebitin, em ê pêşniyar bikin ku vebijarka server-side an jî rêbaza pejirandina geroka xwerû bikar bînin.

Çawa dixebite

Li vir çawa pejirandina formê bi Bootstrap re dixebite:

  • Verastkirina forma HTML-ê bi navgîniya du pseudo-dersên CSS-ê ve tê sepandin, :invalidû :valid. Ew ji bo <input>, <select>, û <textarea>hêmanan derbas dibe.
  • Bootstrap li çîna dêûbav :invalidû şêwazên ku bi gelemperî li ser tê sepandin vedihewîne . Wekî din, her qada pêdivî ya bê nirx di barkirina rûpelê de nederbasdar xuya dike. Bi vî rengî, hûn dikarin hilbijêrin kengê wan çalak bikin (bi gelemperî piştî ku şandina formê tê ceribandin).:valid.was-validated<form>
  • Ji bo sifirkirina xuyangê formê (mînak, di rewşa radestkirina forma dînamîkî de ku AJAX bikar tînin), piştî radestkirinê dîsa .was-validatedpolê ji polê derxînin.<form>
  • Wekî paşveçûn, .is-invalidû .is-validçîn dikarin li şûna pseudo-dersan ji bo pejirandina aliyê serverê werin bikar anîn . Ew hewceyê .was-validatedpola dêûbav ne.
  • Ji ber astengiyên di çawaniya karkirina CSS de, em nikarin (niha) şêwazên ku <label>di DOM-ê de berî kontrolek formek tê bêyî arîkariya JavaScript-a xwerû bicîh bikin.
  • Hemî gerokên nûjen piştgirî didin API-ya pejirandina astengiyê , rêzek rêbazên JavaScript-ê ji bo rastkirina kontrolên formê.
  • Dibe ku peyamên nerînên pêşnumayên gerokê (ji bo her gerokek cihêreng, û bi CSS-ê veneguhêzbar) an şêwazên meya nerînên xwerû yên bi HTML û CSS-a zêde bikar bînin.
  • setCustomValidityHûn dikarin di JavaScriptê de peyamên derbasdariya xwerû peyda bikin .

Di hişê xwe de, demoyên jêrîn ji bo şêwazên pejirandina forma xwerû, dersên alîgirê serverê yên vebijarkî, û pêşnumayên gerokê binihêrin.

styles Custom

Ji bo peyamên pejirandina forma Bootstrap a xwerû, hûn ê hewce bikin ku novalidatetaybetmendiya boolean li xwe zêde bikin <form>. Ev serişteyên amûra bergera xwerû ya gerokê neçalak dike, lê dîsa jî gihîştina API-yên pejirandina formê di JavaScript de peyda dike. Biceribînin ku forma jêrîn bişînin; JavaScript-a me dê bişkoja şandinê bigire û bertekên xwe ji we re veguhezîne. Dema ku hûn hewl bidin ku radest bikin, hûn ê şêwaz :invalidû :validşêwazên ku li ser kontrolên forma we hatine bicîh kirin bibînin.

Şêweyên nerînên xwerû rengên xwerû, sînor, şêwazên baldarî û îkonên paşerojê bicîh dikin da ku nerînên çêtir ragihînin. Îkonên paşperdeya ji bo <select>s tenê bi .custom-select, û ne .form-control.

Baş xuya dike!
Baş xuya dike!
Ji kerema xwe bajarekî derbasdar peyda bikin.
Ji kerema xwe dewletek derbasdar hilbijêrin.
Ji kerema xwe zipek derbasdar peyda bikin.
Berî radestkirinê divê hûn razî bin. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Pêşniyarên gerokê

Ne eleqedar nabin ji peyamên nerînên pejirandî yên xwerû an jî nivîsandina JavaScript-ê ku tevgerên formê biguhezînin? Hemî baş, hûn dikarin pêşnumayên gerokê bikar bînin. Biceribînin ku forma jêrîn bişînin. Bi gerok û OS-ya xwe ve girêdayî, hûn ê şêwazek nerînek hinekî cûda bibînin.

Dema ku ev şêwazên bersivdayînê nekarin bi CSS-ê re şêwaz bikin, hûn dîsa jî dikarin bi JavaScript-ê nivîsa bersivê xweş bikin.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server aliyê

Em pêşniyar dikin ku erêkirina ji hêla xerîdar ve were bikar anîn, lê heke hûn hewceyê pejirandina ji hêla serverê bikin, hûn dikarin qadên forma nederbasdar û derbasdar bi .is-invalidû destnîşan .is-validbikin. Têbînî ku .invalid-feedbackbi van dersan jî tê piştgirî kirin.

Ji bo qadên nederbasdar, pê ewle bin ku berteka nederbasdar/peyama çewtiyê bi qada forma têkildar re bi karanîna aria-describedby. Ev taybetmendî dihêle ku bêtir ji yekê idwere referans kirin, ger ku zevî berê xwe bide nivîsa forma din.

Baş xuya dike!
Baş xuya dike!
Ji kerema xwe bajarekî derbasdar peyda bikin.
Ji kerema xwe dewletek derbasdar hilbijêrin.
Ji kerema xwe zipek derbasdar peyda bikin.
Berî radestkirinê divê hûn razî bin. 
<form>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

hêmanên piştgirî

Şêweyên erêkirinê ji bo kontrol û pêkhateyên jêrîn ên formê hene:

  • <input>s û <textarea>s bi.form-control
  • <select>s bi .form-controlan.custom-select
  • .form-checks
  • .custom-checkboxs û .custom-radios
  • .custom-file
Ji kerema xwe peyamek li qada nivîsê binivîse.
Mînak nivîsara nederbasdar
Nimûneya bêtir nivîsara nederbasdar
Nimûne bertekên hilbijartî yên nederbasdar
Nimûne bersiva pelê xwerû ya nederbasdar
@
Nimûne bersiva koma têketina nederbasdar
Nimûne bersiva koma têketina nederbasdar
Nimûne bersiva koma têketina nederbasdar 
<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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Tooltips

Ger sêwirana forma we destûrê dide, hûn dikarin .{valid|invalid}-feedbackdersan bi .{valid|invalid}-tooltipdersan biguhezînin da ku bertekên erêkirinê di navgînek şêwazê de nîşan bidin. position: relativeJi bo pozîsyona tooltip bawer bin ku dêûbavek li ser wê hebe. Di mînaka li jêr de, çînên stûna me jixwe vê yekê heye, lê dibe ku projeya we sazkirinek alternatîf hewce bike.

Baş xuya dike!
Baş xuya dike!
Ji kerema xwe bajarekî derbasdar peyda bikin.
Ji kerema xwe dewletek derbasdar hilbijêrin.
Ji kerema xwe zipek derbasdar peyda bikin. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Customizing

Dewletên erêkirinê dikarin bi $form-validation-statesnexşeyê ve bi riya Sass ve bêne xweş kirin. _variables.scssDi pelê me de cih girtiye, ev nexşeya Sass li ser tê xêzkirin da ku dewletên xwerû valid/ invalidpejirandinê çêbike. Di nav de nexşeyek hêlîn heye ku ji bo xweşkirina reng û îkona her dewletê ye. Digel ku ti dewletên din ji hêla gerokan ve nayên piştgirî kirin, yên ku şêwazên xwerû bikar tînin dikarin bi hêsanî bertekên forma tevlihevtir zêde bikin.

form-validation-stateJi kerema xwe bala xwe bidin ku em bêyî guheztina mixin xweşkirina van nirxan pêşniyar nakin .

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

Rastkirina koma têketinê

Ji bo tespîtkirina kîjan hêmanan di hundurê koma têketinê de bi erêkirinê re hewceyê quncikên dorpêçkirî ne, komek têketinê .has-validationçînek zêde hewce dike.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Ji kerema xwe navekî bikarhêner hilbijêrin.

formên Custom

Ji bo hê bêtir xwerûkirin û domdariya gerokê ya xaça, hêmanên forma meya bi tevahî xwerû bikar bînin da ku li şûna pêşnumayên gerokê biguhezînin. Ew li ser nîşana semantîkî û gihîştî hatine çêkirin, ji ber vê yekê ew ji bo her kontrolek forma xwerû veguherînek zexm in.

Checkboxes û radyo

Her qutiya kontrolê û radyo <input>û <label>hevberdanê di nav de tê pêçan <div>da ku kontrola xweya xwerû biafirîne. Ji hêla strukturî ve, ev heman nêzîkatiya xwerû ya me .form-checkye.

Em hilbijêra xwişk û bira ( ~) ji bo hemî <input>dewletên xwe bikar tînin - mîna - da :checkedku nîşana forma xweya xwerû bi rêkûpêk şêwaz bikin. Dema ku bi .custom-control-labelpolê re were berhev kirin, em dikarin nivîsê ji bo her babetê li ser bingeha <input>'dewletê jî şêwaz bikin.

Em xwerû bi veşêrin û <input>bi opacitykar tînin .custom-control-labelda ku li şûna wê nîşanek forma xwerû ya nû ava bikin bi ::beforeû ::after. Mixabin em nekarin ji tenê yek xwerû ava bikin ji <input>ber ku CSS li contentser wê hêmanê naxebite.

Di dewletên kontrolkirî de, em îkonên SVG-ê yên binavkirî yên base64 ji Open Iconic bikar tînin . Ev ji bo şêwaz û pozîsyona li seranserê gerok û cîhazan kontrola çêtirîn ji me re peyda dike.

Checkboxes

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

Di heman demê de qutiyên kontrolê yên xwerû dema ku bi destan bi JavaScript-ê ve hatî danîn dikarin çîna pseudo bikar bînin :indeterminate(ji bo diyarkirina wê taybetmendiyek HTML-ê ya berdest tune).

Heke hûn jQuery bikar tînin, tiştek mîna vê bes e:

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

Radios

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

Inline

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Bêmecel

Qutiyên kontrolê yên xwerû û radyo jî dikarin bêne asteng kirin. Taybetmendiya boolean li ser zêde disabledbikin û nîşana xwerû <input>û ravekirina labelê dê bixweber were şêwaz kirin.

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

Switches

Veguhezek nîşana qutiyek kontrolê ya xwerû heye lê .custom-switchpolê bikar tîne da ku veguhezek veguhezîne. Switches jî disabledtaybetmendiyê piştgirî dikin.

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

Menu hilbijêre

Pêşekên <select>xwerû tenê ji çînek xwerû hewce ne, .custom-selectda ku şêwazên xwerû bişopînin. Şêweyên <select>xwerû bi xuyangiya destpêkê ya '' ve têne sînorkirin û <option>ji ber sînorkirinên gerokê nikarin s-yê biguherînin.

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

Her weha hûn dikarin ji vebijarkên xwerû yên piçûk û mezin hilbijêrin da ku bi têketina nivîsa me ya bi pîvana wekhev re têkildar bin.

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

Taybetmendî multiplejî piştgirî ye:

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

Wekî ku sizetaybetmendiyê ye:

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

Dirêjahî

Kontrolên <input type="range">xwerû bi .custom-range. Track (paşxane) û tilikê (nirx) her du jî têne şêwaz kirin ku di nav gerokan de wekî hev xuya bibin. Ji ber ku tenê IE û Firefox piştgirî didin "dagirtina" şopa xwe ji çepê an rastê tilikê wekî amûrek ku bi dîtbarî pêşkeftinê nîşan bide, em aniha piştgirî nakin.

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

minTêketinên rêzê bi rêzdarî ji bo û max- 0û nirxên nepenî 100hene. minHûn dikarin ji bo yên ku taybetmendiyên û bikar tînin nirxên nû diyar bikin max.

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

Ji hêla xwerû ve, rêjeyê "snap" li nirxên yekjimar vedigire. Ji bo guhertina vê, hûn dikarin stepnirxek diyar bikin. Di mînaka jêrîn de, em bi karanîna jimareya gavan ducar dikin step="0.5".

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

Geroka pelê

Pêveka pêşniyarkirî ji bo zindîkirina têketina pelê xwerû: bs-custom-file-input , ya ku em niha li vir di belgeyên xwe de bikar tînin ev e.

Ketina pelê ya herî gewre ye û JavaScriptek din hewce dike heke hûn dixwazin wan bi pelê hilbijartî ve girêbidin… û nivîsa navê pelê hilbijartî.

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

Em pelê xwerû vedişêrin <input>û opacityli şûna wê şêwazê didin <label>. Bişkojk tê çêkirin û bi cih kirin ::after. Di paşiya paşîn de, em a widthû heightli ser cîhê <input>rast ji bo naveroka derdorê radigihînin.

Bi SCSS re werger an xweşkirina rêzan

The :lang()pseudo-class tê bikaranîn ku ji bo wergerandina nivîsa "Browse" ji bo zimanên din. Bi etîketa zimanî ya têkildar û rêzikên xwemalî ve navnîşan li $custom-file-textguherbara Sass bişopînin an lê zêde bikin. Têlên Îngilîzî dikarin bi heman rengî bêne xweş kirin. Mînakî, li vir meriv dikare wergerek spanî lê zêde bike (kodê zimanê spanî ye ):es

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

Li vir lang(es)di çalakiyê de li ser têketina pelê xwerû ya ji bo wergerek spanî heye:

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

Pêdivî ye ku hûn zimanê belgeya xwe (an jêrdara wê) rast saz bikin da ku nivîsa rast were xuyang kirin. Ev dikare bi karanîna taybetmendiya lilang ser <html>hêman an Content-Languagesernavê HTTP , di nav awayên din de were kirin.

Wergerandin an jî xweşkirina rêzan bi HTMLê

Bootstrap di heman demê de rêyek ji bo wergerandina nivîsa "Browse" di HTML-ê de bi data-browsetaybetmendiya ku dikare li etîketa têketina xwerû were zêdekirin peyda dike (mînakek bi Hollandî):

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