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.

<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-seic 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 airson ceangal a dhèanamh eadar 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.

Bogsa dearbhaidh bunaiteach

Bogsa-dearbhaidh ciorramach

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

Rèidio bunaiteach

An dàrna rèidio àbhaisteach

Rèidio ciorramach

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

3 (ciorramach)

<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 (ciorramach)

<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 gun toir thu fhathast seòrsa de dh’ ainm ruigsinneach airson teicneòlasan taice (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.

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

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 chuir 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 a dhèanamh 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.

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

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

Caolas le acraichean

Bidh brobhsairean a’ làimhseachadh a h-uile smachd cruth dùthchasach ( <input>, <select>, , agus <button>eileamaidean) taobh a-staigh a <fieldset disabled>mar chiorramaich, a’ casg an dà chuid eadar-obrachadh meur-chlàr is luchag orra.

Ach, ma tha an fhoirm agad cuideachd a’ toirt a-steach eileamaidean gnàthaichte coltach ri putan leithid <a ... class="btn btn-*">, cha tèid iad sin ach stoidhle de pointer-events: none. Mar a chaidh a chomharrachadh san earrann 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. Bidh na smachdan stèidhichte air acair fhathast ann. fòcas agus obrachail a’ cleachdadh a’ mheur-chlàr. Feumaidh tu na smachdan sin atharrachadh le làimh le bhith a’ cur ris tabindex="-1"gus casg a chuir orra bho bhith a’ faighinn fòcas agus aria-disabled="disabled"gus an staid a chomharrachadh gu teicneòlasan taice.

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 fios air ais dearbhaidh bunaiteach a’ bhrobhsair, no cuir an gnìomh teachdaireachdan àbhaisteach leis na clasaichean togte againn agus JavaScript tòiseachaidh.

Tha sinn mothachail nach eil na stoidhlichean dearbhaidh gnàthaichte agus molaidhean innealan taobh teachdaiche ruigsinneach, leis nach eil iad fosgailte do theicneòlasan taice. Fhad ‘s a bhios sinn ag obair air fuasgladh, mholamaid an dàrna cuid a bhith a’ cleachdadh an roghainn taobh an fhrithealaiche no am modh dearbhaidh brabhsair bunaiteach.

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

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

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

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

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.

Airson raointean neo-dhligheach, dèan cinnteach gu bheil am fios air ais / teachdaireachd mearachd neo-dhligheach co-cheangailte ris an raon foirm iomchaidh a’ cleachdadh aria-describedby. Tha am feart seo a’ ceadachadh iomradh a thoirt air barrachd air aon id, air eagal ’s gu bheil an raon mu thràth a’ comharrachadh teacsa foirm a bharrachd.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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
<select>s le .form-controlor.custom-select
.form-checks
.custom-checkboxs agus .custom-radios
.custom-file

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

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

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

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

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

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.

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

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

Dearbhadh buidheann cuir a-steach

Gus faighinn a-mach dè na h-eileamaidean a tha feumach air oiseanan cruinn taobh a-staigh buidheann cuir a-steach le dearbhadh, feumaidh buidheann cuir a-steach .has-validationclas a bharrachd.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Feuch an tagh thu ainm-cleachdaidh.

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

Thoir sùil air a’ bhogsa sgrùdaidh àbhaisteach seo

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

Thoir sùil air a’ bhogsa sgrùdaidh àbhaisteach seo

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

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

Rèidiothan

Tog an rèidio àbhaisteach seo

No tog an rèidio àbhaisteach eile seo

<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

Tog an rèidio àbhaisteach seo

No tog an rèidio àbhaisteach eile seo

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

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.

Thoir sùil air a’ bhogsa sgrùdaidh àbhaisteach seo

Tog an rèidio àbhaisteach seo

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

Tog an eileamaid suidse seo

Eileamaid suidse ciorramach

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

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.

Raon eisimpleir

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

Raon eisimpleir

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

Raon eisimpleir

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

Tagh faidhle

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

Tasglann Taghte

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

Voeg je sgrìobhainn toe

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

Foirmean

Ro-shealladh

Foirmean smachd a

Meudachadh

Leughadh a-mhàin

Leughadh a-mhàin teacsa sìmplidh

Raon a-steach

Bogsaichean sgrùdaidh agus rèidiothan

Default (cruachadh)

In-loidhne

Às aonais bileagan

Cruth

Foirm buidhnean

Foirm grid

Foirm sreath

Foirm chòmhnard

Meud leubail cruth còmhnard

Meud colbh

Meudachadh fèin-ghluasadach

Foirmean in-loidhne

Roghainnean eile an àite bileagan falaichte

Teacs cuideachaidh

A’ ceangal teacsa cuideachaidh ri smachdan fhoirm

Foirmean ciorramach

Caolas le acraichean

Co-fhreagarrachd tar-bhrabhsair

Dearbhadh

Mar a tha e ag obair

Stoidhlichean gnàthaichte

Roghainnean brabhsair

Taobh an fhrithealaiche

Feartan le taic

Molaidhean innealan

Gnàthachadh

Dearbhadh buidheann cuir a-steach

Foirmean gnàthaichte

Bogsaichean sgrùdaidh agus rèidiothan

Bogsaichean-seic

Rèidiothan

In-loidhne

Ciorramach

Switches

Tagh clàr-taice

Raon

Sealladair faidhle

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

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