Source

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.

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

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

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, asi kuti upe not-allowedcursor pane hover yemubereki <label>, unozofanira kuwedzera disabledhunhu kune .form-check-input. Hunhu hwakaremara huchaisa ruvara rwakareruka kubatsira kuratidza mamiriro ezvakaiswa.

Mabhokisi ekutarisa uye kushandiswa kwemaredhiyo akavakwa kuti atsigire HTML-yakavakirwa fomu kusimbiswa uye kupa 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.

Default checkbox

Bhokisi rekuongorora rakadzimwa

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

Default radio

Chechipiri default radio

Redhiyo yakadzimwa

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

3 (akaremara)

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

3 (akaremara)

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

Horizontal fomu

Gadzira mafomu akachinjika negridi nekuwedzera .rowkirasi kuti aumbe mapoka uye nekushandisa .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 nani mavara ekutanga.

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

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 iwe 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" 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 control, 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 fomu kudzora 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 mafomu emukati, unogona kuvanza mavara uchishandisa .sr-onlykirasi. Kune dzimwe nzira dzekupa label yekubatsira matekinoroji, 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 izvo zviri pamusoro.

Pasiwedhi Password yako inofanira kuva nemavara 8-20 kureba, iine mavara nenhamba, uye haifanire kunge iine 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 chinhu kunze kwekirasi yekushandisa.

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

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Caveat nezvibatiso

Nekumisikidza, mabhurawuza anobata ese ekuzvarwa mafomu ekutonga ( <input>, <select>uye <button>zvinhu) mukati <fieldset disabled>seakaremara, kudzivirira zvese zviri zviviri keyboard uye mbeva kupindirana pazviri. Nekudaro, kana fomu rako richisanganisira <a ... class="btn btn-*">zvinhu, izvi zvinongopihwa maitiro e pointer-events: none. Sezvacherechedzwa muchikamu nezve yakaremara nyika yemabhatani (uye kunyanya muchikamu chidiki che anchor elements), iyi CSS pfuma haisati yamira uye haisati yanyatsotsigirwa muOpera 18 nepasi, kana muInternet Explorer 10, uye yakahwina. 'Kudzivirira vashandisi vekhibhodi kuti vakwanise kutarisa kana kumisa aya malink. Saka kuti uve wakachengeteka, shandisa tsika JavaScript kudzima zvinongedzo zvakadaro.

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 tinokurudzira zvikuru zvitaera zvekusimbisa zvitaera sezvo zvimiro zvebrowser zvisina kuziviswa kune vanoverenga skrini.

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).
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 yekumisikidzwa , 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 emhinduro dzebrowser, asi zvichingopa mukana weiyo fomu yekusimbisa maAPI 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.

Zita rokutanga

Looks good!

Zita rokupedzisa

Looks good!

Username

Please choose a username.

Guta

Please provide a valid city.

State

Please provide a valid state.

Zip

Please provide a valid zip.

Bvumiranai nemitemo nemamiriro

You must agree before submitting.

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

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

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

Server side

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

Zita rokutanga

Zvinotaridzika zvakanaka!

Zita rokupedzisa

Zvinotaridzika zvakanaka!

Username

Ndapota sarudza zita rekushandisa.

Guta

Ndokumbira upe guta rinoshanda.

State

Ndokumbirawo mupe nyika inodiwa.

Zip

Ndokumbira upe zip inoshanda.

Bvumiranai nemitemo nemamiriro

Unofanira kubvumirana usati watumira.

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

Zvinhu zvinotsigirwa

Mafomu edu emuenzaniso anoratidza manyorerwo echinyakare ari <input>pamusoro, asi masitaera ekusimbisa mafomu anowanikwa kune edu echinyakare fomu kudzora, zvakare.

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

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

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

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

Tooltips

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

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

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

Bhokisi rega rega recheki neredhiyo zvakaputirwa <div>nemunun'una <span>kuti tigadzire tsika yedu yekutonga uye <label>yezvinyorwa zvinoperekedza. Zvimiro, iyi ndiyo nzira imwe chete neyedu default .form-check.

Isu tinoshandisa sibling selector ( ~) kune ese edu <input>ematunhu-se- :checkedkunyatso dhizaini yedu fomu fomu chiratidzo. Kana zvabatanidzwa .custom-control-labelnekirasi, tinogona zvakare kutaira zvinyorwa zvechinhu chimwe nechimwe zvichibva pamamiriro <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

Tarisa bhokisi rekutarisa rino

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

Tarisa bhokisi rekutarisa rino

Kana uri kushandisa jQuery, chimwe chinhu chakadai chinofanira kukwana:

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

Redhiyo

Bata redhiyo iyi

Kana shandura iyi imwe nhepfenyuro yetsika

<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

Bata redhiyo iyi

Kana shandura iyi imwe nhepfenyuro yetsika

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

Yakaremara

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

Tarisa bhokisi rekutarisa rino

Bata redhiyo iyi

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

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

Mamenu <select>echivanhu anoda chete kirasi yetsika, .custom-selectkukonzeresa masitaera etsika.

<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 hwedu hwemavara mamepu.

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

Faira browser

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

Sarudza faira

<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 payo maitiro iyo <label>. Bhatani rinogadzirwa uye rakamisikidzwa ne ::after. Chekupedzisira, tinozivisa a widthuye heightpane iyo <input>nzvimbo yakakodzera yezvinhu zvakatenderedza.

Kushandura kana kugadzirisa mitsara

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:

Seleccionar Archivo

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

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

Mafomu

Overview

Zvidzoreso zvemafomu

Kukura

Read only

Verenga chete mavara akajeka

Checkboxes nemaredhiyo

Default (yakaturikidzana)

Inline

Pasina mavara

Layout

Gadzira mapoka

Fomu grid

Fomu mutsara

Horizontal fomu

Horizontal fomu label saizi

Column saizi

Auto-kukura

Inline mafomu

Zvimwe kune zvinyorwa zvakavanzwa

Batsira mameseji

Kubatanidza mavara erubatsiro nemafomu ekudzora

Mafomu akaremara

Caveat nezvibatiso

Cross-browser kuenderana

Validation

Zvinoshanda sei

Zvitaera zvetsika

Browser defaults

Server side

Zvinhu zvinotsigirwa

Tooltips

Tsika mafomu

Checkboxes nemaredhiyo

Checkboxes

Redhiyo

Inline

Yakaremara

Sarudza menyu

Faira browser

Kushandura kana kugadzirisa mitsara