Source

Foirmean

Eisimpleirean agus stiùireadh cleachdaidh airson stoidhlichean smachd foirm, roghainnean cruth, agus co-phàirtean gnàthaichte airson measgachadh farsaing de chruthan a chruthachadh.

Ro-shealladh

Bidh smachdan foirm Bootstrap a’ leudachadh air na stoidhlichean foirm Rebooted againn le clasaichean. Cleachd na clasaichean sin gus roghnachadh a-steach do na taisbeanaidhean gnàthaichte aca airson cuibhreann nas cunbhalaiche thairis air brobhsairean agus innealan.

Dèan cinnteach gun cleachd thu typefeart iomchaidh air a h-uile cuir a-steach (me, emailairson seòladh puist-d no numberairson fiosrachadh àireamhach) gus brath a ghabhail air smachdan cuir a-steach nas ùire leithid dearbhadh post-d, taghadh àireamhan, agus barrachd.

Seo eisimpleir sgiobalta gus stoidhlichean foirm Bootstrap a nochdadh. Cùm a’ leughadh airson sgrìobhainnean mu chlasaichean riatanach, cruth cruth, agus barrachd.

Cha roinn sinn am post-d agad gu bràth ri duine sam bith eile. 
<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>

Foirmean smachd a

Tha smachdan cruth teacsa - mar <input>s, <select>s, agus <textarea>s - air an comharrachadh leis a’ .form-controlchlas. Nam measg tha stoidhlichean airson coltas coitcheann, staid fòcas, meud, agus barrachd.

Dèan cinnteach gun dèan thu sgrùdadh air na foirmean àbhaisteach againn gus tuilleadh stoidhle <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>

Airson cuir a-steach faidhle, atharraich am faidhle .form-controlairson .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>

Meudachadh

Suidhich àirdean a’ cleachdadh chlasaichean mar .form-control-lgagus .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>

Leughadh a-mhàin

Cuir am readonlyfeart boolean air cuir a-steach gus casg a chuir air atharrachadh air luach an in-ghabhail. Tha coltas gu bheil cuir a-steach leughaidh a-mhàin nas aotroime (dìreach mar cuir a-steach ciorramach), ach cumaidh iad an cursair àbhaisteach.

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

Leughadh a-mhàin teacsa sìmplidh

Ma tha thu airson gum bi <input readonly>eileamaidean san fhoirm agad air an stialladh mar theacsa shìmplidh, cleachd an .form-control-plaintextclas gus stoidhle raon an fhoirm bunaiteach a thoirt air falbh agus an iomall ceart agus am pleadhag a ghlèidheadh.

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

Raon a-steach

Suidhich cuir a-steach raon a ghabhas gluasad gu còmhnard a’ cleachdadh .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>

Bogsaichean sgrùdaidh agus rèidiothan

Bithear a’ leasachadh air bogsaichean-seic bunaiteach agus rèidiothan le cuideachadh bho .form-check, aon chlas airson an dà sheòrsa cuir a-steach a leasaicheas cruth agus giùlan nan eileamaidean HTML aca . Tha bogsaichean sgrùdaidh airson aon no grunn roghainnean a thaghadh ann an liosta, agus tha rèidiothan airson aon roghainn a thaghadh bho mhòran.

Tha bogsaichean sgrùdaidh agus rèidiothan ciorramach a’ faighinn taic. Cuiridh am disabledfeart dath nas aotroime an sàs gus cuideachadh le bhith a’ comharrachadh staid an ionaid.

Bidh bogsaichean-seic agus putanan rèidio a’ toirt taic do dhearbhadh cruth stèidhichte air HTML agus a’ toirt seachad bileagan pongail, ruigsinneach. Mar sin, tha ar <input>s agus <label>s nan eileamaidean bràithrean is peathraichean an taca ri taobh a- <input>staigh <label>. Tha seo beagan nas gnìomhaiche mar a dh’ fheumas tu a shònrachadh idagus forbuadhan gus an <input>agus <label>.

Default (cruachadh)

Gu gnàthach, bidh àireamh sam bith de bhogsaichean-seic agus rèidiothan a tha sa bhad bràthair-bràthar air an cruachadh gu dìreach agus air an cuairteachadh gu h-iomchaidh le .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>

In-loidhne

Cuir bogsaichean-seic no rèidiothan buidhne air an aon sreath chòmhnard le bhith a’ cur .form-check-inlineri faidhle .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>

Às aonais bileagan

Cuir .position-staticri cuir a-steach taobh a-staigh .form-checknach eil teacsa leubail sam bith. Cuimhnich fhathast gun toir thu seòrsa de leubail airson teicneòlasan cuideachaidh (mar eisimpleir, a’ cleachdadh 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>

Cruth

Leis gu bheil Bootstrap a’ buntainn display: blockagus width: 100%ri cha mhòr a h-uile smachd foirm againn, bidh foirmean a’ cruachadh gu dìreach. Faodar clasaichean a bharrachd a chleachdadh gus an cruth seo atharrachadh a rèir gach foirm.

Foirm buidhnean

Is .form-groupe an clas an dòigh as fhasa beagan structar a chur ri foirmean. Tha e a’ toirt seachad clas sùbailte a bhrosnaicheas cruinneachadh ceart de bhileagan, smachdan, teacsa cuideachaidh roghainneil, agus teachdaireachdan dearbhaidh cruth. Gu gnàthach chan eil e a ’buntainn margin-bottomach , ach bidh e a’ togail stoidhlichean a bharrachd .form-inlinemar a dh ’fheumar. Cleachd e le <fieldset>s, <div>s, no cha mhòr eileamaid sam bith eile.

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

Foirm grid

Faodar foirmean nas iom-fhillte a thogail a’ cleachdadh ar clasaichean clèithe. Cleachd iad sin airson cruth cruth a dh’ fheumas grunn cholbhan, leudan eadar-dhealaichte, agus roghainnean co-thaobhadh a bharrachd.

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

Foirm sreath

Faodaidh tu cuideachd suaip a dhèanamh .rowairson .form-row, tionndadh den t-sreath clèithe àbhaisteach againn a tha a’ dol thairis air na cutairean colbh àbhaisteach airson dealbhadh nas teinne agus nas toinnte.

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

Faodar dealbhadh nas iom-fhillte a chruthachadh cuideachd leis an t-siostam clèithe.

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

Foirm chòmhnard

Cruthaich foirmean còmhnard leis a’ ghriod le bhith a’ cur a’ .rowchlas ris gus buidhnean a chruthachadh agus a’ cleachdadh nan .col-*-*clasaichean gus leud do bhileagan is do smachdan a shònrachadh. Dèan cinnteach gun cuir .col-form-labelthu ris na s agad <label>cuideachd gus am bi iad stèidhichte gu dìreach leis na smachdan cruth co-cheangailte riutha.

Aig amannan, is dòcha gum feum thu goireasan iomaill no pleadhaig a chleachdadh gus an co-thaobhadh foirfe sin a tha a dhìth ort a chruthachadh. Mar eisimpleir, tha sinn air an padding-topleubail cuir a-steach rèidio cruachan againn a thoirt air falbh gus bun-loidhne an teacsa a cho-thaobhadh nas fheàrr.

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

Dèan cinnteach gun cleachd thu .col-form-label-smno ris an fheadhainn agad fhèin gus meud agus ..col-form-label-lg<label><legend>.form-control-lg.form-control-sm

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

Meud colbh

Mar a chithear anns na h-eisimpleirean roimhe seo, leigidh an siostam clèithe againn leat àireamh sam bith de .cols a chur taobh a-staigh a .rowno .form-row. Roinnidh iad an leud a tha ri fhaighinn gu cothromach eatorra. Faodaidh tu cuideachd fo-sheata de na colbhan agad a thaghadh gus barrachd no nas lugha de rùm a ghabhail, fhad ‘ .cols a bhios an còrr a’ roinn a ’chòrr gu co-ionann, le clasaichean colbh sònraichte mar .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>

Meudachadh fèin-ghluasadach

Tha an eisimpleir gu h-ìosal a’ cleachdadh goireas flexbox gus susbaint a mheadhanachadh gu dìreach agus atharraichean .colair .col-autogus nach bi na colbhan agad a’ gabhail ach na h-uimhir de dh’ àite ’s a dh’ fheumar. Cuir dòigh eile, meudan a’ cholbh fhèin stèidhichte air na th’ ann.

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

Faodaidh tu an uairsin ath-aithris sin a-rithist le clasaichean colbh a tha sònraichte do mheud.

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

Agus gu dearbh tha smachdan foirm àbhaisteach a ’ faighinn taic.

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

Foirmean in-loidhne

Cleachd an .form-inlineclas gus sreath de bhileagan a thaisbeanadh, smachdan a chruthachadh, agus putanan air aon sreath chòmhnard. Bidh smachdan foirm taobh a-staigh foirmean in-loidhne ag atharrachadh beagan bho na stàitean bunaiteach aca.

  • Tha smachdan display: flex, a’ tuiteam às àite geal HTML sam bith agus a’ toirt cothrom dhut smachd co-thaobhadh a thoirt seachad le goireasan farsaingeachd agus bogsa flex .
  • Bidh smachdan agus buidhnean cuir a-steach a’ faighinn width: autogus faighinn thairis air an roghainn bunaiteach Bootstrap width: 100%.
  • Chan eil smachdan a’ nochdadh ach a-staigh ann am puirt-seallaidh a tha co-dhiù 576px de leud gus cunntas a thoirt air puirt-seallaidh cumhang air innealan gluasadach.

Is dòcha gum feum thu dèiligeadh le làimh ri leud agus co-thaobhadh smachdan foirm fa leth le goireasan eadar -dhealaichte (mar a chithear gu h-ìosal). Mu dheireadh, bi cinnteach gum bi thu an-còmhnaidh a ’toirt a-steach <label>smachd le gach foirm, eadhon ged a dh’ fheumas tu a fhalach bho luchd-tadhail neo-sgrion le .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>

Thathas cuideachd a’ toirt taic do smachdan foirm gnàthaichte agus taghaidhean.

<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>
Roghainnean eile an àite bileagan falaichte

Bidh trioblaid aig teicneòlasan cuideachail leithid leughadairean sgrion leis na foirmean agad mura cuir thu a-steach bileag airson a h-uile cuir a-steach. Airson na foirmean in-loidhne seo, faodaidh tu na bileagan fhalach a’ cleachdadh a’ .sr-onlychlas. Tha dòighean eile ann airson bileag a thoirt seachad airson teicneòlasan taice, leithid an aria-label, aria-labelledbyno titlefeart. Mura h-eil gin dhiubh sin an làthair, faodaidh teicneòlasan cuideachaidh a bhith a’ cleachdadh a’ placeholderbhuadh, ma tha iad ann, ach thoir an aire nach placeholdereilear a’ comhairleachadh a chleachdadh an àite dòighean bileagan eile.

Teacs cuideachaidh

Faodar teacsa cuideachaidh ìre-bloc ann am foirmean a chruthachadh a’ cleachdadh .form-text(air an robh roimhe seo .help-blockann an v3). Faodar teacsa cuideachaidh in-loidhne a chuir an gnìomh gu sùbailte le bhith a’ cleachdadh eileamaid HTML in-loidhne agus clasaichean goireis mar .text-muted.

A’ ceangal teacsa cuideachaidh ri smachdan fhoirm

Bu chòir teacsa cuideachaidh a bhith ceangailte gu soilleir ris an smachd foirm a tha e a’ buntainn ri cleachdadh a’ aria-describedbybhuadh. Nì seo cinnteach gum bi teicneòlasan cuideachail - leithid leughadairean sgrion - ag ainmeachadh an teacsa cuideachaidh seo nuair a bhios an neach-cleachdaidh ag amas no a’ dol a-steach don smachd.

Faodar teacsa cuideachaidh gu h-ìosal a chuir a-steach le .form-text. Tha an clas seo a’ toirt a-steach display: blockagus a’ cur beagan iomall ris airson a bhith eadar-dhealaichte bho na cuir a-steach gu h-àrd.

Feumaidh am facal-faire agad a bhith eadar 8-20 caractar a dh’fhaid, litrichean is àireamhan a bhith ann, agus chan fhaod beàrnan, caractaran sònraichte no emoji a bhith ann. 
<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>

Faodaidh teacsa in-loidhne eileamaid HTML àbhaisteach sam bith a chleachdadh (biodh e <small>, <span>, no rudeigin eile) gun dad a bharrachd air clas goireis.

Feumaidh a bhith 8-20 caractar a dh’fhaid. 
<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>

Foirmean ciorramach

Cuir am disabledfeart boolean air cuir a-steach gus casg a chuir air eadar-obrachadh luchd-cleachdaidh agus toirt air nochdadh nas aotroime.

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

Cuir am disabledfeart ri a <fieldset>gus a h-uile smachd taobh a-staigh a dhì-cheadachadh.

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

Gu gnàthach, làimhsichidh brobhsairean a h-uile smachd cruth dùthchasach ( <input>, <select>agus <button>eileamaidean) taobh a-staigh a <fieldset disabled>mar chiorramaich, a’ cur casg air eadar-obrachadh meur-chlàr is luchag orra. Ach, ma tha <a ... class="btn btn-*">eileamaidean anns an fhoirm agad cuideachd, cha tèid iad sin ach stoidhle de pointer-events: none. Mar a chaidh a chomharrachadh anns an earrainn mu staid ciorramach airson putanan (agus gu sònraichte san fho-roinn airson eileamaidean acair), chan eil an togalach CSS seo àbhaisteach fhathast agus chan eil e a’ faighinn làn thaic ann an Internet Explorer 10, agus cha chuir e casg air luchd-cleachdaidh meur-chlàr a bhith. comasach air na ceanglaichean sin a chuimseachadh no a chur an gnìomh. Mar sin airson a bhith sàbhailte, cleachd JavaScript àbhaisteach gus na ceanglaichean sin a chur à comas.

Co-fhreagarrachd tar-bhrabhsair

Ged a chuireas Bootstrap na stoidhlichean sin an sàs anns a h-uile brobhsair, chan eil Internet Explorer 11 agus gu h-ìosal a’ toirt làn thaic don disabledfheart air faidhle <fieldset>. Cleachd JavaScript gnàthaichte gus an raon-raoin sna brabhsairean sin a chur à comas.

Dearbhadh

Thoir seachad fios air ais luachmhor, gnìomhach don luchd-cleachdaidh agad le dearbhadh foirm HTML5 - ri fhaighinn anns a h-uile brobhsair le taic againn . Tagh bho bheachdan dearbhaidh bunaiteach a’ bhrobhsair, no cuir an gnìomh teachdaireachdan àbhaisteach leis na clasaichean togte againn agus JavaScript tòiseachaidh.

Tha sinn an-dràsta a’ moladh a bhith a’ cleachdadh stoidhlichean dearbhaidh àbhaisteach, leis nach eil teachdaireachdan dearbhaidh bunaiteach brabhsair dùthchasach gu cunbhalach fosgailte do theicneòlasan taice anns a h-uile brobhsair (gu sònraichte, Chrome air deasg is fòn-làimhe).

Mar a tha e ag obair

Seo mar a tha dearbhadh foirm ag obair le Bootstrap:

  • Bithear a’ dearbhadh foirm HTML tro dhà chlas-brèige CSS, :invalidagus :valid. Tha e a’ buntainn ri <input>, <select>, agus <textarea>eileamaidean.
  • Bidh Bootstrap a’ toirt sùil air na stoidhlichean :invalidagus na :validstoidhlichean gu clas pàrant .was-validated, mar as trice air an cur an sàs ann am faidhle <form>. Rud eile, tha raon riatanach sam bith gun luach a’ nochdadh mar neo-dhligheach air luchdachadh duilleag. San dòigh seo, faodaidh tu taghadh cuin a chuireas tu an gnìomh iad (mar as trice às deidh dhut foirm a chuir a-steach).
  • Gus coltas an fhoirm ath-shuidheachadh (mar eisimpleir, a thaobh tagraidhean foirm fiùghantach a’ cleachdadh AJAX), thoir air falbh a’ .was-validatedchlas bhon a- <form>rithist às deidh a chuir a-steach.
  • Mar chùl-raon, .is-invalidagus .is-validfaodar clasaichean a chleachdadh an àite nan clasaichean meallta airson dearbhadh taobh an fhrithealaiche . Chan fheum iad .was-validatedclas pàrant.
  • Air sgàth cuingealachaidhean air mar a tha CSS ag obair, chan urrainn dhuinn (an-dràsta) stoidhlichean a chuir an sàs ann an stoidhle <label>a thig ro smachd foirm san DOM gun chuideachadh bho JavaScript àbhaisteach.
  • Bidh a h-uile brobhsair ùr-nodha a’ toirt taic don API dearbhaidh cuingealachaidh , sreath de dhòighean JavaScript airson smachdan foirm a dhearbhadh.
  • Faodaidh teachdaireachdan fios-air-ais feum a dhèanamh de na roghainnean brobhsair (eadar-dhealaichte airson gach brobhsair, agus neo-sheasmhach tro CSS) no na stoidhlichean fios-air-ais àbhaisteach againn le HTML agus CSS a bharrachd.
  • Faodaidh tu teachdaireachdan dligheachd gnàthaichte a thoirt seachad setCustomValidityann an JavaScript.

Le sin san amharc, smaoinich air na demos a leanas airson na stoidhlichean dearbhaidh foirm àbhaisteach againn, clasaichean taobh frithealaiche roghainneil, agus roghainnean brobhsair.

Stoidhlichean gnàthaichte

Airson teachdaireachdan dearbhaidh foirm Bootstrap àbhaisteach, feumaidh tu am novalidatefeart boolean a chur ris an fhaidhle <form>. Cuiridh seo à comas molaidhean inneal fios-air-ais bunaiteach a’ bhrobhsair, ach tha e fhathast a’ toirt cothrom air na APIan dearbhaidh foirm ann an JavaScript. Feuch an cuir thu a-steach am foirm gu h-ìosal; cuiridh an JavaScript againn stad air a’ phutan cuir a-steach agus cuiridh e fios air ais thugad. Nuair a dh'fheuchas tu ri cur a-steach, chì thu na stoidhlichean :invalidagus na :validstoidhlichean a chuirear an sàs ann an smachdan an fhoirm agad.

Bidh stoidhlichean fios-air-ais gnàthaichte a’ cur an sàs dathan àbhaisteach, crìochan, stoidhlichean fòcas, agus ìomhaighean cùl-fhiosrachaidh gus fios air ais a chonaltradh nas fheàrr. Chan fhaighear ìomhaighean cùl-fhiosrachaidh airson <select>s ach le .custom-select, agus chan eil .form-control.

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

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

Roghainnean brabhsair

Gun ùidh agad ann am teachdaireachdan fios-air-ais dearbhaidh gnàthaichte no sgrìobhadh JavaScript gus giùlan cruth atharrachadh? Gu math, faodaidh tu na roghainnean brabhsair a chleachdadh. Feuch an cuir thu a-steach am foirm gu h-ìosal. A rèir do bhrobhsair agus OS, chì thu stoidhle fios air ais beagan eadar-dhealaichte.

Ged nach urrainnear na stoidhlichean fios-air-ais sin a stialladh le CSS, faodaidh tu fhathast an teacsa fios-air-ais a ghnàthachadh tro JavaScript.

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

Taobh an fhrithealaiche

Tha sinn a’ moladh gun cleachd thu dearbhadh taobh teachdaiche, ach air eagal ‘s gu bheil feum agad air dearbhadh taobh an fhrithealaiche, faodaidh tu raointean foirm neo-dhligheach agus dligheach a chomharrachadh le .is-invalidagus .is-valid. Thoir an aire gu .invalid-feedbackbheil taic ris na clasaichean sin cuideachd.

A' coimhead math!
A' coimhead math!
@
Feuch an tagh thu ainm-cleachdaidh.
Feuch an toir thu seachad baile-mòr dligheach.
Feuch an tagh thu staid dhligheach.
Feuch an toir thu seachad zip dligheach.
Feumaidh tu aontachadh mus cuir thu a-steach e. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Feartan le taic

Tha stoidhlichean dearbhaidh rim faighinn airson na smachdan foirm agus na co-phàirtean a leanas:

  • <input>s agus <textarea>s le .form-control(a’ gabhail a-steach suas ri aon .form-controlann am buidhnean cuir a-steach)
  • <select>s le .form-controlor.custom-select
  • .form-checks
  • .custom-checkboxs agus .custom-radios
  • .custom-file
Feuch an cuir thu a-steach teachdaireachd san raon teacsa.
Eisimpleir teacsa fios-air-ais mì-dhligheach
Barrachd eisimpleir teacsa fios-air-ais mì-dhligheach
Eisimpleir fios air ais taghte gnàthaichte mì-dhligheach
Eisimpleir fios air ais faidhle gnàthaichte mì-dhligheach 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

Molaidhean innealan

Ma cheadaicheas cruth an fhoirm agad e, faodaidh tu na .{valid|invalid}-feedbackclasaichean atharrachadh airson .{valid|invalid}-tooltipclasaichean gus fios air ais dearbhaidh a thaisbeanadh ann an inneal le stoidhle. Dèan cinnteach gu bheil pàrant position: relativeagad air airson suidheachadh inneal-togalaich. Anns an eisimpleir gu h-ìosal, tha seo aig na clasaichean colbh againn mu thràth, ach dh’ fhaodadh gum bi feum aig do phròiseact air suidheachadh eile.

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

Gnàthachadh

Faodar stàitean dearbhaidh a ghnàthachadh tro Sass leis a’ $form-validation-statesmhapa. Suidhichte san _variables.scssfhaidhle againn, tha am mapa Sass seo air a lùbadh a-null gus na stàitean bunaiteach valid/ invaliddearbhaidh a ghineadh. Air a ghabhail a-steach tha mapa neadachaidh airson dath agus ìomhaigh gach stàite a ghnàthachadh. Ged nach eil stàitean sam bith eile a’ faighinn taic bho bhrobhsairean, faodaidh an fheadhainn a chleachdas stoidhlichean àbhaisteach fios air ais nas iom-fhillte a chuir ris gu furasta.

Thoir an aire nach eil sinn a’ moladh na luachan sin a ghnàthachadh gun a bhith ag atharrachadh a’ form-validation-statemheasgachaidh cuideachd.

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

Foirmean gnàthaichte

Airson eadhon barrachd gnàthachaidh agus cunbhalachd tar-bhrobhsair, cleachd na h-eileamaidean foirm gu tur àbhaisteach againn an àite roghainnean a’ bhrobhsair. Tha iad air an togail a bharrachd air comharrachadh semantach agus ruigsinneach, agus mar sin tha iad nan àite làidir airson smachd cruth bunaiteach sam bith.

Bogsaichean sgrùdaidh agus rèidiothan

Tha gach bogsa-seic agus rèidio <input>agus <label>paidhir air a phasgadh ann an <div>a gus ar smachd àbhaisteach a chruthachadh. Gu structarail, is e seo an aon dòigh-obrach ris an fhear àbhaisteach againn .form-check.

Bidh sinn a’ cleachdadh an roghnaiche sibling ( ~) airson na <input>stàitean againn uile - mar :checked- gus an comharra cruth àbhaisteach againn a stoidhleachadh gu ceart. Nuair a thèid sinn còmhla ris a’ .custom-control-labelchlas, is urrainn dhuinn cuideachd an teacsa airson gach nì a stoidhle a rèir an <input>‘staid’.

Bidh sinn a’ falach a’ bhunait <input>le opacityagus a’ cleachdadh an .custom-control-labelgus comharra foirm àbhaisteach ùr a thogail na àite le ::beforeagus ::after. Gu mì-fhortanach chan urrainn dhuinn fear àbhaisteach a thogail bho dìreach mar nach eil <input>CSS contentag obair air an eileamaid sin.

Anns na stàitean sgrùdaichte, bidh sinn a’ cleachdadh ìomhaighean SVG freumhaichte base64 bho Open Iconic . Bheir seo dhuinn an smachd as fheàrr airson stoidhle agus suidheachadh thairis air brobhsairean agus innealan.

Bogsaichean-seic

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

Faodaidh bogsaichean-dearbhaidh gnàthaichte cuideachd an :indeterminateclas meallta a chleachdadh nuair a thèid a shuidheachadh le làimh tro JavaScript (chan eil feart HTML ri fhaighinn airson a shònrachadh).

Ma tha thu a’ cleachdadh jQuery, bu chòir rudeigin mar seo a bhith gu leòr:

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

Rèidiothan

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

In-loidhne

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

Ciorramach

Faodar bogsaichean-seic gnàthaichte agus rèidiothan a chiorramachadh cuideachd. Cuir am disabledfeart boolean ris <input>agus thèid an comharra àbhaisteach agus tuairisgeul an leubail a stialladh gu fèin-ghluasadach.

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

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

Switches

Tha comharradh bogsa-dearbhaidh àbhaisteach aig suidse ach cleachdaidh e an .custom-switchclas gus suidse toggle a thoirt seachad. Bidh suidsichean cuideachd a’ toirt taic don disabledfheart.

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

Tagh clàr-taice

Chan fheum clàran-bìdh gnàthaichte <select>ach clas àbhaisteach, .custom-selectgus na stoidhlichean àbhaisteach a bhrosnachadh. Tha stoidhlichean gnàthaichte cuingealaichte ris a <select>' chiad choltas agus chan urrainn dhaibh na <option>s atharrachadh air sgàth cuingealachaidhean brabhsair.

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

Faodaidh tu cuideachd taghadh bho thaghaidhean àbhaisteach beag is mòr gus a bhith a rèir ar cuir a-steach teacsa den aon mheud.

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

Tha am multiplefeart cuideachd a’ faighinn taic:

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

Mar a tha am sizefeart:

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

Raon

Cruthaich <input type="range">smachdan gnàthaichte le .custom-range. Tha an t-slighe (an cùl-raon) agus an òrdag (an luach) le chèile air an stoidhleachadh gus nochdadh mar an ceudna thairis air brobhsairean. Leis nach eil ach IE agus Firefox a’ toirt taic do “lìonadh” an t-slighe aca bho thaobh clì no deas na h-òrdaig mar dhòigh air adhartas a chomharrachadh gu fradharcach, chan eil sinn a’ toirt taic dha an-dràsta.

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

Tha luachan soilleir aig cuir a-steach raon airson minagus max- 0agus 100, fa leth. Faodaidh tu luachan ùra a shònrachadh dhaibhsan a tha a’ cleachdadh an minagus maxbuadhan.

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

Gu gnàthach, bidh raon a’ toirt a-steach “snap” gu luachan iomlan. Gus seo atharrachadh, faodaidh tu stepluach a shònrachadh. Anns an eisimpleir gu h-ìosal, bidh sinn a’ dùblachadh an àireamh de cheumannan le bhith a’ cleachdadh step="0.5".

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

Sealladair faidhle

Am plugan a thathar a’ moladh gus cuir a-steach faidhle àbhaisteach a bheothachadh: bs-custom-file-input , is e sin a tha sinn a’ cleachdadh an-dràsta anns na docaichean againn.

Is e cuir a-steach an fhaidhle am fear as gnarly den bhuidheann agus tha feum air JavaScript a bharrachd ma tha thu airson an ceangal le gnìomh Tagh faidhle… agus teacsa ainm faidhle taghte.

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

Bidh sinn a’ falach am faidhle bunaiteach <input>tro opacityagus an àite sin stoidhle am faidhle <label>. Tha am putan air a chruthachadh agus air a shuidheachadh le ::after. Mu dheireadh, bidh sinn a’ cur an cèill widthagus heightair adhart <input>airson farsaingeachd cheart airson susbaint mun cuairt.

Ag eadar-theangachadh no a’ gnàthachadh nan teudan le SCSS

Tha :lang()an clas-brèige air a chleachdadh gus eadar-theangachadh a dhèanamh air an teacsa “Browse” gu cànanan eile. Cuir thairis no cuir inntrigidhean ris a’ $custom-file-textchaochladair Sass leis an taga cànain iomchaidh agus na teudan ionadail. Faodar na teudan Beurla a ghnàthachadh san aon dòigh. Mar eisimpleir, seo mar a dh’ fhaodadh neach eadar-theangachadh Spàinnteach a chur ris (is e còd cànain na Spàinne es):

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

Seo an lang(es)gnìomh air an cuir a-steach faidhle àbhaisteach airson eadar-theangachadh Spàinnteach:

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

Feumaidh tu cànan na sgrìobhainn agad (no fo-chraobh dheth) a shuidheachadh ceart gus an tèid an teacsa ceart a shealltainn. Faodar seo a dhèanamh a’ cleachdadh a’ langbhuadh air an <html>eileamaid no bann- Content-Languagecinn HTTP , am measg dhòighean eile.

Ag eadar-theangachadh no a’ gnàthachadh nan teudan le HTML

Tha Bootstrap cuideachd a’ toirt seachad dòigh air an teacsa “Browse” eadar-theangachadh gu HTML leis a’ data-browsefheart a dh’ fhaodar a chur ris an leubail cuir a-steach àbhaisteach (eisimpleir ann an Duitsis):

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