in English

Mafomu

Mienzaniso uye nhungamiro yekushandisa yemafomu ekudzora masitayipi, sarudzo dzemarongerwo, uye tsika zvikamu zvekugadzira akasiyana siyana mafomu.

Overview

Bootstrap's fomu inodzora inowedzera pane yedu Rebooted fomu masitayipi nemakirasi. Shandisa makirasi aya kuti usarudze mumaratidziro awo akagadziridzwa kuti awedzere kuenderana mumabhurawuza nemidziyo.

Iva nechokwadi chekushandisa typehunhu hwakakodzera pane zvese zvinopinda (semuenzaniso, emailyeemail kero kana numberyenhamba ruzivo) kutora mukana wezvitsva zvidzoreso zvekupinza sekuona email, kusarudza nhamba, nezvimwe.

Heino muenzaniso wekukurumidza kuratidza Bootstrap's fomu masitaera. Ramba uchiverengera zvinyorwa pamakirasi anodiwa, chimiro chemafomu, nezvimwe.

Hatife takagovera email yako nemumwe munhu. 
<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>

Zvidzoreso zvemafomu

Manyorerwo emafomu ekutonga-senge <input>s, <select>s, uye <textarea>s-akanyorwa .form-controlnekirasi. Inosanganisirwa masitayera echitarisiko chakajairwa, chimiro chekutarisa, saizi, nezvimwe.

Iva nechokwadi chekuongorora mafomu edu echinyakare kuti uwedzere maitiro <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>

Kuti uwane mamepu efaira, chinjanisa iyo .form-controlye .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>

Kukura

Seta hurefu uchishandisa makirasi akadai .form-control-lguye .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>

Read only

Wedzera iyo readonlyboolean hunhu pane yekuisa kudzivirira kugadziridzwa kweiyo kukosha kwekuisa. Zvekuverenga-chete zvinowoneka zvakareruka (sezvakangoita zvakadzimwa), asi chengetedza chiyero chekare.

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

Verenga chete mavara akajeka

Kana iwe uchida kuve <input readonly>nezvikamu mufomu yako zvakataera semavara akajeka, shandisa .form-control-plaintextkirasi kubvisa iyo yakasarudzika fomu yemunda styling uye chengetedza iyo chaiyo margin uye padding.

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

Range Inputs

Seta zvakachinjika zvinotenderedzwa siyana zvekushandisa uchishandisa .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 nemaredhiyo

Default checkboxes nemaredhiyo anovandudzwa nerubatsiro rwe .form-check, kirasi imwe chete yemhando mbiri dzekuisa inovandudza marongerwo nemaitiro ezvimiro zvavo zveHTML . Mabhokisi ekutarisa ndeekusarudza imwe kana akati wandei sarudzo mune runyorwa, nepo maredhiyo ari ekusarudza imwe sarudzo kubva kune akawanda.

Mabhokisi ekutarisa akaremara uye maredhiyo anotsigirwa. Hunhu disabledhuchaisa ruvara rwakareruka kubatsira kuratidza mamiriro ezvakaiswa.

Mabhokisi ekutarisa uye mabhatani eredhiyo anotsigira HTML-yakavakirwa fomu kusimbiswa uye inopa mapfupi, anowanikwa mavara. Saka nekudaro, yedu <input>uye isu <label>zvinhu zvehama zvinopesana nemukati <input>me <label>. Izvi zvine verbose zvishoma sezvaunofanirwa kutsanangura iduye forhunhu hune hukama <input>ne <label>.

Default (yakaturikidzana)

Nekumisikidza, chero nhamba yemabhokisi ekutarisa uye maredhiyo ari epedyo hama anozorongedzerwa akamira uye akapatsanurwa zvakafanira ne .form-check.

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

Inline

Boka mabhokisi ekutarisa kana maredhiyo pamutsara wakachinjika wakafanana nekuwedzera .form-check-inlinekune chero .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>

Pasina mavara

Wedzera .position-statickune zvinoiswa mukati .form-checkizvo hazvina chero mavara mavara. Rangarira uchiri kupa imwe nzira yezita rinowanikwa rekubatsira matekinoroji (semuenzaniso, kushandisa 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>

Layout

Sezvo Bootstrap ichishanda display: blockuye width: 100%kune angangoita ese emafomu edu anodzora, mafomu achaita nekusarudzika stack vertically. Makirasi ekuwedzera anogona kushandiswa kusiyanisa dhizaini iyi pane imwe-fomu.

Gadzira mapoka

Kirasi .form-groupndiyo nzira iri nyore yekuwedzera imwe chimiro kune mafomu. Inopa kirasi inochinjika inokurudzira kuunganidzwa kwakafanira kwemavara, zvinodzora, mameseji erubatsiro esarudzo, uye meseji yekusimbisa fomu. Nekusarudzika inongoshanda chete margin-bottom, asi inotora mamwe masitayera mukati .form-inlinesezvinodiwa. Ishandise ne <fieldset>s, <div>s, kana chero chimwe chinhu.

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

Fomu grid

Mamwe mafomu akaoma anogona kuvakwa pachishandiswa grid makirasi edu. Shandisa izvi kune zvimiro zvemafomu zvinoda makoramu akawanda, upamhi hwakasiyana, uye dzimwe sarudzo dzekugadzirisa.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Fomu mutsara

Iwe unogona zvakare kuchinjisa .row, .form-rowmutsauko weyakajairwa gidhi mutsara iyo inodarika iyo default column gutters kune yakasimba uye yakawanda compact marongero.

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

Mamwe magadzirirwo akaomarara anogona zvakare kugadzirwa neiyo grid system.

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

Horizontal fomu

Gadzira mafomu akachinjika ane gidhi nekuwedzera .rowkirasi kuti aumbe mapoka uye kushandisa .col-*-*makirasi kutsanangura hupamhi hwemavara ako uye zvidzoreso. Iva nechokwadi chekuwedzera .col-form-labelkune yako <label>zvakare kuitira kuti ivo vakamira pakati nepakati neavo vane hukama mafomu ekutonga.

Dzimwe nguva, iwe ungangoda kushandisa margin kana padding zvishandiso kuti ugadzire iyo yakakwana kurongeka kwaunoda. Semuyenzaniso, takabvisa padding-toplabel yeredhiyo yedu yakarongedzerwa kuti ienderane nemavara ekutanga.

Redhiyo 
<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>
Horizontal fomu label saizi

Iva nechokwadi chekushandisa .col-form-label-smkana .col-form-label-lgkune yako <label>kana <legend>s kutevedzera nemazvo saizi ye .form-control-lguye .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>

Column saizi

Sezvinoratidzwa mumienzaniso yapfuura, grid system yedu inokutendera kuti uise chero nhamba ye .cols mukati .rowkana .form-row. Vanozopatsanura hupamhi huripo zvakaenzana pakati pavo. Iwe unogona zvakare kutora subset yemakoramu ako kuti utore yakawanda kana shoma nzvimbo, nepo yasara .cols yakaenzana kupatsanura yasara, ine chaiwo makoramu makirasi senge .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-kukura

Muenzaniso uri pazasi unoshandisa flexbox utility kudzika pakati pezviri mukati uye shanduko .colkuitira .col-autokuti makoramu ako atore nzvimbo yakawanda sezvinodiwa. Isa imwe nzira, iyo column saizi pachayo zvichienderana nezviri mukati.

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

Iwe unogona ipapo kusanganisa izvo zvakare nehukuru-chaiyo makoramu makirasi.

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

Uye zvechokwadi maitiro ekugadzirisa fomu anotsigirwa.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline mafomu

Shandisa .form-inlinekirasi kuratidza nhevedzano yemavara, zvidzoreso zvemafomu, uye mabhatani pamutsara mumwe wakachinjika. Zvidzoreso zvemafomu mukati memafomu emukati zvinosiyana zvishoma kubva kune yavo yakasarudzika.

  • Zvidzoreso ndezve display: flex, kudonhedza chero HTML chena nzvimbo uye ichikubvumidza iwe kuti upe kurongeka kwekutonga ne spacing uye flexbox zvishandiso.
  • Zvinodzora uye mapoka width: autoekuisa anogashira kudarika iyo Bootstrap default width: 100%.
  • Zvidzoreso zvinongooneka zviri mukati mezviteshi zvekutarisa zvinosvika 576px pahupamhi kuzvidavirira kune nhete dzekutarisa pane nharembozha.

Ungangoda kugadzirisa nemaoko hupamhi uye kurongeka kwezvidzoreso zvemafomu ega ega nezvinzvimbo zvekushandisa (sezvinoratidzwa pazasi). Chekupedzisira, ive shuwa kuti unogara uchisanganisira a <label>ine yega yega fomu kutonga, kunyangwe iwe uchifanira kuiviga kubva kune vasiri-screenreader vashanyi vane .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>

Tsika mafomu ekudzora uye anosarudza anotsigirwa zvakare.

<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>
Zvimwe kune zvinyorwa zvakavanzwa

Matekinoroji ekubatsira akadai seaverengi ezvidzitiro anozonetseka nemafomu ako kana ukasabatanidza label yeese mapindiro. Kune aya inline mafomu, unogona kuvanza zvinyorwa uchishandisa .sr-onlykirasi. Kune dzimwe nzira dzekupa label yekubatsira tekinoroji, senge aria-label, aria-labelledbykana titlehunhu. Kana pasina chimwe cheizvi chiripo, tekinoroji dzekubatsira dzinogona kushandisa placeholderhunhu, kana huripo, asi cherechedza kuti kushandiswa placeholdersechinzvimbo chedzimwe nzira dzekunyora hakukurudzirwe.

Batsira mameseji

Mameseji erubatsiro eBlock-level mumafomu anogona kugadzirwa uchishandisa .form-text(yaimbozivikanwa sekuti .help-blockmuv3). Inline rubatsiro mameseji anogona kuitwa zviri nyore kushandisa chero inline HTML chinhu uye utility makirasi senge .text-muted.

Kubatanidza mavara erubatsiro nemafomu ekudzora

Rubatsiro runofanira kuenderana nefomu rekutonga rine chekuita nekushandisa aria-describedbyhunhu. Izvi zvinogonesa kuti tekinoroji dzinobatsira — dzakaita sezviverengi zvemasikirini — dzichazivisa mavara erubatsiro aya kana mushandisi akatarisa kana kupinda mukutonga.

Mavara ekubatsira ari pazasi anogona kunyorwa ne .form-text. Kirasi iyi inosanganisira display: blockuye inowedzera imwe yepamusoro margin kuitira nyore kupatsanura kubva kune zvinopinza pamusoro.

Pasiwedhi rako rinofanirwa kuita mavara 8-20 kureba, riine mavara nenhamba, uye harifanire kunge riine nzvimbo, mavara akasarudzika, kana 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>

Inline text inogona kushandisa chero yakajairwa inline HTML element (ingave a <small>, <span>, kana chimwewo chinhu) isina chimwe chinopfuura kirasi yekushandisa.

Inofanira kuva nemabhii 8-20 kureba. 
<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>

Mafomu akaremara

Wedzera iyo disabledboolean hunhu pane inopinza kudzivirira kusangana kwevashandisi uye kuita kuti iite seyakareruka.

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

Wedzera disabledhunhu kune a <fieldset>kudzima zvese zvinodzora mukati.

Yakaremara fieldset muenzaniso 
<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>
Caveat nezvibatiso

Mabhurawuza anobata ese ekuzvarwa mafomu ekutonga (,, <input>uye <select>zvinhu <button>) mukati <fieldset disabled>seakaremara, kudzivirira zvese zviri zviviri kiibhodhi nembeva kupindirana pazviri.

Nekudaro, kana fomu rako richisanganisira tsika bhatani-senge zvinhu senge <a ... class="btn btn-*">, izvi zvinongopihwa maitiro e pointer-events: none. Sezvakataurwa muchikamu pamusoro penzvimbo yevakaremara yemabhatani (uye kunyanya muchikamu chidiki chezvibatiso), ichi CSS chivakwa hachisati chamira uye hachisati chanyatso tsigirwa muInternet Explorer 10. Zvibatiso zveanchor-based zvichange zvichiri zvakare. inotarisisa uye inoshanda uchishandisa kiibhodhi. Iwe unofanirwa kugadzirisa aya ma controls nekuwedzera tabindex="-1"kudzivirira kuti asagamuchire kutarisa uye aria-disabled="disabled"kusaina mamiriro avo kune anobatsira matekinoroji.

Cross-browser kuenderana

Nepo Bootstrap ichizoshandisa masitaera aya mumabhurawuza ese, Internet Explorer 11 uye pazasi haitsigire zvizere disabledhunhu pane <fieldset>. Shandisa JavaScript yakajairwa kudzima iyo fieldset mumabrowser aya.

Validation

Ipa mhinduro yakakosha, inoshanda kune vashandisi vako neHTML5 fomu yekusimbisa- inowanikwa mumabhurawuza edu ese anotsigirwa . Sarudza kubva kubrowser yekusimbisa mhinduro, kana shandisa mameseji echinyakare nemakirasi edu akavakirwa-mukati uye yekutanga JavaScript.

Isu tinoziva kuti parizvino mutengi-parutivi tsika yekusimbisa masitayipi uye maturusi haawanikwe, sezvo iwo asiri kuratidzwa kune anobatsira matekinoroji. Tichiri kushanda pane mhinduro, isu tinokurudzira kushandisa iyo server-side sarudzo kana iyo default browser yekusimbisa nzira.

Zvinoshanda sei

Heano maitiro ekusimbisa fomu neBootstrap:

  • HTML fomu yekusimbisa inoshandiswa kuburikidza neCSS maviri ekunyepedzera-makirasi, :invaliduye :valid. Inoshanda kune <input>, <select>, uye <textarea>zvinhu.
  • Bootstrap inoyera iyo :invaliduye :validmasitayipi kukirasi yevabereki .was-validated, inowanzoiswa kune iyo <form>. Zvikasadaro, chero munda unodiwa usina kukosha unoratidza seusina kusimba pakurodha peji. Nenzira iyi, unogona kusarudza nguva yekuvamisa (kazhinji mushure mekutumira fomu kwaedza).
  • Kuti ugadzirise zvakare chitarisiko chefomu (semuenzaniso, kana iri dhizaini yekutumira fomu uchishandisa AJAX), bvisa .was-validatedkirasi kubva <form>zvakare mushure mekutumira.
  • Sekudzokera kumashure, .is-invaliduye .is-validmakirasi anogona kushandiswa pachinzvimbo chemanyepo-makirasi evhavha parutivi kusimbiswa . Havadi .was-validatedkirasi yevabereki.
  • Nekuda kwezvimhingamipinyi mumashandiro anoita CSS, hatigone (parizvino) kushandisa masitayipi kune <label>anouya pamberi pefomu rekutonga muDOM pasina rubatsiro rwetsika JavaScript.
  • Ese mabhurawuza emazuva ano anotsigira API inomanikidza , nhevedzano yeJavaScript nzira dzekusimbisa mafomu ekutonga.
  • Mameseji emhinduro anogona kushandisa kusarudzika kwebrowser (yakasiyana pabrowser yega yega, uye isinganyoreki kuburikidza neCSS) kana maitiro edu emhinduro neHTML neCSS.
  • Unogona kupa mameseji echokwadi echinyakare setCustomValiditymuJavaScript.

Uine izvo mupfungwa, funga anotevera dhemo kune yedu tsika fomu yekusimbisa masitaera, sarudzo ye server makirasi, uye browser defaults.

Zvitaera zvetsika

Kune mameseji ekusimbisa fomu yeBootstrap, iwe unofanirwa kuwedzera iyo novalidateboolean hunhu kune yako <form>. Izvi zvinodzima matipi ezvishandiso zvebhurawuza, asi zvichingopa mukana kune fomu rekusimbisa maAPIs muJavaScript. Edza kuendesa fomu riri pazasi; yedu JavaScript inotambira bhatani rekutumira uye nekudzosera mhinduro kwauri. Paunenge uchiedza kutumira, iwe uchaona iwo :invaliduye :validmasitaera akaiswa kune ako emafomu ekutonga.

Tsika dzemhinduro masitaera dzinoshandisa mavara echinyakare, miganhu, zvitaera zvekutarisisa, uye zvidhori zvekumashure kutaurirana zvirinani. Background icons for <select>s inongowanikwa ne .custom-select, uye kwete .form-control.

Zvinotaridzika zvakanaka!
Zvinotaridzika zvakanaka!
Ndokumbira upe guta rinoshanda.
Ndapota sarudza nyika inoshanda.
Ndokumbira upe zip inoshanda.
Unofanira kubvumirana usati watumira. 
<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>

Browser defaults

Haufarire mameseji emhinduro yekusimbisa kana kunyora JavaScript kuti uchinje maitiro? Zvese zvakanaka, unogona kushandisa zvimiro zvebrowser. Edza kutumira fomu riri pazasi. Zvichienderana nebrowser yako neOS, uchaona imwe nzira yakasiyana yemhinduro.

Nepo aya masitayera emhinduro asingagone kunyorwa neCSS, unogona kugadzirisa mameseji emhinduro kuburikidza neJavaScript.

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

Isu tinokurudzira kushandisa mutengi-parutivi kusimbiswa, asi kana iwe uchida server-parutivi kusimbiswa, unogona kuratidza isiriyo uye inoshanda fomu maminda ane .is-invaliduye .is-valid. Ziva izvo .invalid-feedbackzvinotsigirwawo nemakirasi aya.

Kune nzvimbo dzisiridzo, ona kuti mhinduro/meseji yemhosho inodyidzana nechikamu chefomu chinoshandiswa uchishandisa aria-describedby. Hunhu uhwu hunobvumira zvinopfuura chimwe idkuti zvirevererwe, kana ndima yacho yatonongedzera kune mamwe manyoro efomu.

Zvinotaridzika zvakanaka!
Zvinotaridzika zvakanaka!
Ndokumbira upe guta rinoshanda.
Ndapota sarudza nyika inoshanda.
Ndokumbira upe zip inoshanda.
Unofanira kubvumirana usati watumira. 
<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>

Zvinhu zvinotsigirwa

Validation masitaera anowanikwa kune anotevera fomu kudzora uye zvikamu:

  • <input>s uye <textarea>s pamwe.form-control
  • <select>s ne .form-controlkana.custom-select
  • .form-checks
  • .custom-checkboxs uye .custom-radios
  • .custom-file
Ndokumbira uise meseji munzvimbo yemashoko.
Muenzaniso mashoko emhinduro haashandi
Mimwe muenzaniso mavara emhinduro isiriyo
Sarudzo yemhinduro inosarudzika
Muenzaniso hausiriwo wemhinduro yefaira
@
Muenzaniso wemhinduro dzeboka hausizvo
Muenzaniso wemhinduro dzeboka hausizvo
Muenzaniso wemhinduro dzeboka hausizvo 
<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

Kana chimiro chefomu chako chichichibvumira, unogona kuchinjanisa .{valid|invalid}-feedbackmakirasi .{valid|invalid}-tooltipemakirasi kuratidza mhinduro yekusimbisa mune yakashongedzwa tooltip. Iva neshuwa kuti une mubereki position: relativepairi wetip yekumisikidza. Mumuenzaniso uri pazasi, makirasi edu emakoramu ane izvi nechekare, asi purojekiti yako ingangoda imwe yekuseta.

Zvinotaridzika zvakanaka!
Zvinotaridzika zvakanaka!
Ndokumbira upe guta rinoshanda.
Ndapota sarudza nyika inoshanda.
Ndokumbira upe zip inoshanda. 
<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

Validation states inogona kugadziriswa kuburikidza neSass $form-validation-statesnemepu. Iri _variables.scssmufaira redu, iyi mepu yeSass yakasungirirwa pamusoro kuti igadzire iyo default valid/ invalidyekusimbisa nyika. Inosanganisirwa mepu yakasarudzika yekugadzirisa ruvara rwenyika yega yega uye icon. Kunyange pasina dzimwe nyika dzinotsigirwa nemabhurawuza, avo vanoshandisa masitaera echinyakare vanogona kuwedzera zviri nyore mhinduro yefomu yakaoma.

Ndokumbira utarise kuti isu hatikurudzire kugadzirisa tsika idzi pasina zvakare kugadzirisa musanganiswa form-validation-state.

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

Input group kusimbiswa

Kuti uone kuti ndezvipi zvinhu zvinoda makona akatenderedzwa mukati meboka rekuisa nerutsigiro, boka rekuisa rinoda imwe .has-validationkirasi.

<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>
@
Ndapota sarudza zita rekushandisa.

Tsika mafomu

Kuti uwedzere kugadzirisa uye kuchinjika kwebrowser kuenderana, shandisa yedu yakazara maitiro fomu zvinhu kutsiva iyo browser defaults. Iwo akavakirwa pamusoro pe semantic uye inosvikika markup, saka iwo akasimba ekutsiva kune chero default fomu rekutonga.

Checkboxes nemaredhiyo

Yese bhokisi rekutarisa neredhiyo <input>uye <label>pairing yakaputirwa mukugadzira <div>yedu yetsika kutonga. Zvimiro, iyi ndiyo nzira imwe chete neyedu yekusarudzika .form-check.

Isu tinoshandisa sibling selector ( ~) kune ese edu <input>ematunhu-se- :checkedkunyatso dhizaini yedu fomu fomu chiratidzo. Kana zvabatanidzwa .custom-control-labelnekirasi, tinokwanisa zvakare kutaira mavara echinhu chimwe nechimwe zvichienderana nemamiriro <input>ezvinhu.

Isu tinovanza iyo yakasarudzika <input>nayo opacityuye tinoshandisa iyo .custom-control-labelkuvaka nyowani yemhando fomu chiratidzo panzvimbo yayo ::beforene ::after. Nehurombo isu hatigone kuvaka imwe tsika kubva chete <input>nekuti CSS's contenthaishande pane icho chinhu.

Munzvimbo dzakatariswa, tinoshandisa base64 yakamisikidzwa SVG icons kubva Open Iconic . Izvi zvinotipa kudzora kwakanakisa kwekutaira uye kuisa chinzvimbo mumabrowser nemidziyo.

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>

Tsika dzekutarisa mabhokisi anogona zvakare kushandisa iyo :indeterminatepseudo kirasi kana yaiswa nemaoko kuburikidza neJavaScript (hapana iripo HTML hunhu hwekuitsanangura).

Kana uri kushandisa jQuery, chimwe chinhu chakadai chinofanira kukwana:

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

Redhiyo

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

Yakaremara

Tsika dzekutarisa mabhokisi nemaredhiyo anogona zvakare kudzimwa. Wedzera iyo disabledboolean hunhu kune iyo <input>uye yetsika chiratidzo uye tsananguro yezita inozoitwa otomatiki.

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

Swichi

Switch ine markup yecustomer checkbox asi inoshandisa .custom-switchkirasi kupa switch yekuchinja. Kuchinja kunotsigirawo disabledhunhu.

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

Sarudza menyu

Mamenu <select>echivanhu anoda chete kirasi yetsika, .custom-selectkukonzeresa masitaera etsika. Zvitaera zvechivanhu zvinogumira <select>pakuonekwa kwekutanga uye hazvigone kushandura <option>s nekuda kwekugumira kwebrowser.

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

Iwe unogona zvakare kusarudza kubva kudiki uye hombe tsika yakasarudzwa kuti ienderane nehukuru hwemavara mamepu edu.

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

Hunhu multiplehunotsigirwawo:

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

Sezvakaita sizehunhu:

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

Range

Gadzira zvidzoreso zvetsika <input type="range">ne .custom-range. Iyo track (yekumashure) uye chigunwe (ukoshi) zvese zvakadhindwa kuti zvioneke zvakafanana pamabhurawuza. Sezvo chete IE neFirefox inotsigira "kuzadza" track yavo kubva kuruboshwe kana kurudyi kwechigunwe senzira yekuratidza kufambira mberi, isu hatizvitsigire parizvino.

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

Rondedzero yemukati ine hunhu hwakajeka hwe minuye max- 0uye 100, zvichiteerana. Unogona kutsanangura hutsva hutsva kune avo vanoshandisa minuye maxhunhu.

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

Nekumisikidza, renji inoiswa "snap" kune yakazara kukosha. Kuti uchinje izvi, unogona kutsanangura stepkukosha. Mumuenzaniso uri pasi apa, tinopeta nhamba yematanho nekushandisa step="0.5".

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

Faira browser

Iyo yakakurudzirwa plugin yekunamisa tsika faira yekuisa: bs-custom-file-input , ndizvo zvatiri kushandisa parizvino mumagwaro edu.

Iyo faira yekuisa ndiyo yakanyanya gnarly yeboka uye inoda yekuwedzera JavaScript kana iwe uchida kuibatanidza ne inoshanda Sarudza faira… uye yakasarudzwa zita refaira mavara.

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

Isu tinovanza iyo yakasarudzika faira <input>kuburikidza opacityuye panzvimbo pacho maitiro eiyo <label>. Bhatani rinogadzirwa uye rakamisikidzwa ne ::after. Chekupedzisira, tinozivisa a widthuye heightpane iyo <input>nzvimbo yakakodzera yezvinhu zvakatenderedza.

Kushandura kana kugadzirisa tambo neSCSS

Pseudo :lang()-class inoshandiswa kubvumira kushandurwa kwemavara ekuti “Bhurawuza” kune mimwe mitauro. Pindura kana wedzera zvinyorwa $custom-file-textkuSass musiyano netagi yemutauro unoenderana uye tambo dzemuno. Tambo dzechiRungu dzinogona kugadzirwa nenzira imwechete. Semuyenzaniso, heino nzira yekuwedzera nayo shanduro yechiSpanish (kodhi yemutauro wechiSpanish ndeye es):

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

Hezvino lang(es)zviri kuitika pakuiswa kwefaira reshanduro yechiSpanish:

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

Iwe unozofanirwa kuseta mutauro wegwaro rako (kana subtree yacho) nenzira kwayo kuitira kuti iwo mavara aratidze. Izvi zvinogona kuitwa uchishandisa hunhulang pane <html>chinhu kana Content-LanguageHTTP musoro , pakati pedzimwe nzira .

Kushandura kana kugadzirisa tambo neHTML

Bootstrap inopawo nzira yekuturikira "Bhurawuza" mavara muHTML ane data-browsehunhu hunogona kuwedzerwa kune iyo tsika yekuisa label (muenzaniso muchiDutch):

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