Source

Fòm

Egzanp ak direktiv itilizasyon pou estil kontwòl fòm, opsyon layout, ak konpozan koutim pou kreye yon gran varyete fòm.

Apèsi sou lekòl la

Kontwòl fòm Bootstrap yo elaji sou estil fòm Rebooted nou yo ak klas yo. Sèvi ak klas sa yo pou patisipe nan ekspozisyon Customized yo pou yon rann ki pi konsistan atravè navigatè ak aparèy.

Asire ou ke ou sèvi ak yon typeatribi apwopriye sou tout antre (pa egzanp, emailpou adrès imel oswa numberpou enfòmasyon nimerik) pou pwofite de nouvo kontwòl antre tankou verifikasyon imel, seleksyon nimewo, ak plis ankò.

Men yon egzanp rapid pou demontre estil fòm Bootstrap la. Kontinye lekti pou dokimantasyon sou klas obligatwa yo, fòm fòm, ak plis ankò.

Nou p'ap janm pataje imel ou a ak nenpòt lòt moun. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Kontwòl fòm

Kontwòl fòm tèks yo-tankou <input>s, <select>s, ak <textarea>s-yo style ak .form-controlklas la. Gen estil pou aparans jeneral, eta konsantre, gwosè, ak plis ankò.

Asire ou ke ou eksplore fòm koutim nou an plis style <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>

Pou antre fichye a, chanje .form-controlpou .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>

Dimansyon

Mete wotè lè l sèvi avèk klas tankou .form-control-lgak .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>

Li sèlman

Ajoute readonlyatribi boolean an sou yon opinyon pou anpeche modifikasyon valè opinyon an. Antre lekti sèlman parèt pi lejè (menm jan ak entrain andikape), men kenbe kurseur estanda a.

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

Tèks klè sèlman

Si ou vle gen <input readonly>eleman nan fòm ou a estile kòm tèks klè, sèvi ak .form-control-plaintextklas la pou retire fòm nan jaden fòm default epi konsève maj ki kòrèk la ak padding.

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

Case ak radyo

Yo amelyore kaz ak radyo yo defo ak èd .form-check, yon sèl klas pou tou de kalite antre ki amelyore layout ak konpòtman eleman HTML yo . Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis, pandan y ap radyo yo se pou chwazi yon opsyon nan plizyè.

Yo sipòte kaz ak radyo ki andikape yo, men pou bay yon not-allowedkurseur sou hover paran an <label>, w ap bezwen ajoute disabledatribi a nan .form-check-input. Atribi andikape a pral aplike yon koulè pi lejè pou ede endike eta opinyon an.

Bwat chèk ak radyo yo bati pou sipòte validation fòm ki baze sou HTML epi bay etikèt kout aksesib. Kòm sa yo, <input>s ak <label>s nou yo se eleman frè ak sè yo opoze ak yon <input>nan yon <label>. Sa a se yon ti kras plis verbose kòm ou dwe presize idak foratribi yo gen rapò <input>ak ak <label>.

Default (anpille)

Pa default, nenpòt kantite kaz ak radyo ki se frè ak sè imedyat yo pral anpile vètikal ak yon espas apwopriye ak .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 disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Nan liy

Gwoup kaz oswa radyo sou menm ranje orizontal la lè w ajoute .form-check-inlinenan nenpòt .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>

San etikèt

Ajoute .position-staticnan entrain .form-checkki pa gen okenn tèks etikèt. Sonje toujou bay kèk fòm etikèt pou teknoloji asistans (pa egzanp, lè l sèvi avèk aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Layout

Depi Bootstrap aplike display: blockak width: 100%prèske tout kontwòl fòm nou yo, fòm yo pral pa default pile vètikal. Lòt klas yo ka itilize pou varye layout sa a sou yon baz pou chak fòm.

Fòme gwoup yo

Klas .form-groupla se fason ki pi fasil pou ajoute kèk estrikti nan fòm yo. Li bay yon klas fleksib ki ankouraje bon gwoupman etikèt, kontwòl, tèks èd opsyonèl, ak mesaj validation fòm. Pa default li aplike sèlman margin-bottom, men li chwazi estil adisyonèl nan .form-inlinejan sa nesesè. Sèvi ak li ak <fieldset>s, <div>s, oswa prèske nenpòt lòt eleman.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Fòm griyaj

Fòm ki pi konplèks yo ka bati lè l sèvi avèk klas griy nou yo. Sèvi ak sa yo pou fòm fòm ki mande plizyè kolòn, lajè varye, ak opsyon aliyman adisyonèl.

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

Fòm ranje

Ou ka chanje tou .rowpou .form-row, yon varyasyon nan ranje kadriyaj estanda nou an ki pase plis pase goutyè kolòn default yo pou layout pi sere ak plis kontra enfòmèl ant.

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

Layout ki pi konplèks yo ka kreye tou ak sistèm kadriyaj la.

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

Fòm orizontal

Kreye fòm orizontal ak kadriyaj la lè w ajoute .rowklas la pou fòme gwoup epi itilize .col-*-*klas yo pou presize lajè etikèt ou yo ak kontwòl yo. Asire ou ke ou ajoute .col-form-labelnan <label>s ou tou pou yo ap vètikal santre ak kontwòl fòm ki asosye yo.

Pafwa, ou petèt bezwen sèvi ak sèvis piblik Marge oswa padding pou kreye aliyman pafè ou bezwen. Pou egzanp, nou te retire padding-topetikèt sou antre radyo anpile nou an pou pi byen aliman debaz tèks la.

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

Asire w ou sèvi ak .col-form-label-smou .col-form-label-lgpou ou <label>kòrèkteman <legend>swiv gwosè .form-control-lgak .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>

Dimansyon kolòn

Jan yo montre nan egzanp anvan yo, sistèm kadriyaj nou an pèmèt ou mete nenpòt kantite .cols nan yon .rowoswa .form-row. Yo pral divize lajè ki disponib egalman ant yo. Ou ka chwazi tou yon ti gwoup kolòn ou yo pou pran plis oswa mwens espas, pandan y ap rès .colyo divize rès la egalman, ak klas kolòn espesifik tankou .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>

Oto-gwosè

Egzanp ki anba a sèvi ak yon sèvis piblik flexbox pou santre sa ki an vètikal ak chanjman .colpou .col-autokolòn ou yo sèlman pran otan espas sa nesesè. Mete yon lòt fason, gwosè kolòn nan tèt li ki baze sou kontni an.

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

Lè sa a, ou ka remix sa yon lòt fwa ankò ak klas kolòn gwosè espesifik.

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

Ak nan kou kontwòl fòm koutim yo sipòte.

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

Fòm Inline

Sèvi ak .form-inlineklas la pou montre yon seri etikèt, kontwòl fòm, ak bouton sou yon sèl ranje orizontal. Kontwòl fòm nan fòm enline yo varye yon ti kras nan eta default yo.

  • Kontwòl yo se display: flex, efondre nenpòt espas blan HTML ak pèmèt ou bay kontwòl aliyman ak espas ak sèvis piblik flexbox .
  • Kontwòl ak gwoup antre resevwa width: autopou pase sou valè Bootstrap default la width: 100%.
  • Kontwòl yo parèt sèlman nan liy nan pòch yo ki gen omwen 576 px lajè pou konsidere pòch yo etwat sou aparèy mobil.

Ou ka bezwen manyèlman adrese lajè ak aliyman kontwòl fòm endividyèl yo ak sèvis piblik espas (jan yo montre anba a). Anfen, asire w ke ou toujou mete yon <label>ak chak kontwòl fòm, menm si ou bezwen kache li nan vizitè ki pa lektè ekran ak .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>

Kontwòl fòm koutim ak seleksyon yo sipòte tou.

<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>
Altènatif pou etikèt kache yo

Teknoloji asistans tankou lektè ekran pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-onlyklas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label, aria-labelledbyoswa titleatribi. Si pa gen youn nan sa yo ki prezan, teknoloji asistans yo ka itilize itilize placeholderatribi a, si yo prezan, men sonje ke itilizasyon placeholderkòm yon ranplasman pou lòt metòd etikèt yo pa konseye.

Ede tèks

Tèks èd nan nivo blòk nan fòm yo ka kreye lè l sèvi avèk .form-text(ki te deja konnen kòm .help-blocknan v3). Tèks èd Inline ka aplike yon fason fleksib lè l sèvi avèk nenpòt eleman HTML aliye ak klas sèvis piblik tankou .text-muted.

Asosye tèks èd ak kontwòl fòm

Tèks èd yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedbyatribi a. Sa a pral asire ke teknoloji asistans-tankou lektè ekran-ap anonse tèks èd sa a lè itilizatè a konsantre oswa antre nan kontwòl la.

Tèks èd ki anba a antre yo ka style ak .form-text. Klas sa a gen ladan display: blockepi ajoute kèk maj pi wo pou espas fasil soti nan entrain ki anwo yo.

Modpas ou a dwe genyen 8-20 karaktè, li dwe genyen lèt ak nimewo, epi li pa dwe genyen espas, karaktè espesyal oswa emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Tèks Inline ka sèvi ak nenpòt eleman HTML enline tipik (ke se yon <small>, <span>, oswa yon lòt bagay) ki pa gen anyen plis pase yon klas sèvis piblik.

Dwe gen 8-20 karaktè nan longè. 
<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>

Fòm andikape

Ajoute disabledatribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo epi fè li parèt pi lejè.

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

Ajoute disabledatribi a nan yon <fieldset>pou enfim tout kontwòl ki nan.

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

Pa default, navigatè yo pral trete tout kontwòl fòm natif natal ( <input>, <select>ak <button>eleman) andedan yon <fieldset disabled>kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo. Sepandan, si fòm ou a gen ladan tou <a ... class="btn btn-*">eleman, yo pral sèlman bay sa yo yon style nan pointer-events: none. Jan yo note sa nan seksyon sou eta andikape pou bouton yo (e spesyalman nan sub-seksyon pou eleman jete lank), pwopriyete CSS sa a poko estandadize epi li pa konplètman sipòte nan Opera 18 ak pi ba a, oswa nan Internet Explorer 10, epi li te genyen. pa anpeche itilizatè klavye yo kapab konsantre oswa aktive lyen sa yo. Se konsa, yo dwe an sekirite, sèvi ak JavaScript koutim pou enfim lyen sa yo.

Konpatibilite kwa-navigatè

Pandan ke Bootstrap pral aplike estil sa yo nan tout navigatè, Internet Explorer 11 ak anba a pa konplètman sipòte disabledatribi a sou yon <fieldset>. Sèvi ak JavaScript koutim pou enfim fieldset nan navigatè sa yo.

Validasyon

Bay itilizatè ou yo fidbak ki gen anpil valè ak aksyon ak validation fòm HTML5 – disponib nan tout navigatè nou yo sipòte . Chwazi nan fidbak validasyon default navigatè a, oswa aplike mesaj koutim ak klas entegre nou yo ak JavaScript starter.

Nou rekòmande anpil estil validation koutim kòm default navigatè natif natal yo pa anonse nan lektè ekran yo.

Ki jan li fonksyone

Men ki jan validasyon fòm travay ak Bootstrap:

  • Validasyon fòm HTML aplike atravè de pseudo-klas CSS yo, :invalidak :valid. Li aplike a <input>, <select>, ak <textarea>eleman yo.
  • Bootstrap sijè a :invalidak :validestil nan klas paran .was-validated, anjeneral, aplike nan <form>. Sinon, nenpòt jaden obligatwa san yon valè parèt kòm envalid sou chaj paj la. Nan fason sa a, ou ka chwazi ki lè pou aktive yo (tipikman apre yo fin eseye soumèt fòm).
  • Kòm yon sekou, .is-invalidak .is-validklas yo ka itilize olye pou yo pseudo-klas yo pou validation bò sèvè . Yo pa bezwen yon .was-validatedklas paran.
  • Akòz kontrent nan fason CSS travay, nou pa ka (kounye a) aplike estil nan yon <label>ki vini anvan yon kontwòl fòm nan DOM a san èd nan JavaScript koutim.
  • Tout navigatè modèn yo sipòte API validation contrainte , yon seri metòd JavaScript pou validation kontwòl fòm yo.
  • Mesaj Feedback yo ka itilize defo navigatè yo (diferan pou chak navigatè, epi ki pa gen stil atravè CSS) oswa estil fidbak koutim nou yo ak HTML ak CSS adisyonèl.
  • Ou ka bay mesaj validite koutim ak setCustomValiditynan JavaScript.

Avèk sa nan tèt ou, konsidere demonstrasyon sa yo pou estil validation fòm koutim nou yo, klas bò sèvè opsyonèl, ak default navigatè.

Styles koutim

Pou mesaj validation fòm Bootstrap koutim, w ap bezwen ajoute novalidateatribi boolean nan <form>. Sa a enfim konsèy zouti yo nan navigatè a defo, men li toujou bay aksè a API validasyon fòm yo nan JavaScript. Eseye soumèt fòm ki anba a; JavaScript nou an pral entèsepte bouton soumèt la ak relè fidbak ba ou.

Lè w ap eseye soumèt, ou pral wè estil yo :invalidak :validaplike nan kontwòl fòm ou yo.

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

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

Parfo navigatè a

Ou pa enterese nan mesaj fidbak validasyon koutim oswa ekri JavaScript pou chanje konpòtman fòm? Tout bon, ou ka itilize default navigatè yo. Eseye soumèt fòm ki anba a. Tou depan de navigatè ou a ak OS, ou pral wè yon style yon ti kras diferan nan fidbak.

Pandan ke estil fidbak sa yo pa ka style ak CSS, ou ka toujou Customize tèks la fidbak atravè 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" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Bò sèvè

Nou rekòmande pou sèvi ak validation bò kliyan, men nan ka ou bezwen bò sèvè, ou ka endike jaden fòm ki valab ak valab ak .is-invalidak .is-valid. Remake byen ke .invalid-feedbackse sipòte tou ak klas sa yo.

Sanble byen!
Sanble byen!
@
Tanpri chwazi yon non itilizatè.
Tanpri bay yon vil ki valab.
Tanpri bay yon eta valab.
Tanpri bay yon postal ki valab.
Ou dwe dakò anvan ou soumèt. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Eleman sipòte

Egzanp fòm nou yo montre tèks natif natal <input>yo pi wo a, men estil validation fòm yo disponib pou kontwòl fòm koutim nou yo tou.

Egzanp tèks fidbak ki pa valab
Plis egzanp tèks fidbak ki pa valab
Egzanp envalid seleksyon koutim fidbak
Egzanp envalid dosye koutim fidbak 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

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

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

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

Konsèy zouti

Si fòm fòm ou a pèmèt li, ou ka chanje .{valid|invalid}-feedbackklas yo pou .{valid|invalid}-tooltipklas yo pou montre fidbak validation nan yon konsèy sou fason. Asire ou ke ou gen yon paran ak position: relativesou li pou pwezante konsèy. Nan egzanp ki anba a, klas kolòn nou yo gen sa a deja, men pwojè ou a ka mande pou yon konfigirasyon altènatif.

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

Fòm koutim

Pou plis personnalisation ak konsistans navigatè kwaze, sèvi ak eleman fòm konplètman koutim nou yo pou ranplase default navigatè yo. Yo bati sou tèt maketing semantik ak aksesib, kidonk yo ap ranplasman solid pou nenpòt kontwòl fòm default.

Case ak radyo

Chak kaz ak radyo vlope nan yon <div>ak yon frè ak sè <span>pou kreye kontwòl koutim nou yo ak yon <label>pou tèks ki akonpaye yo. Estriktirèl, sa a se menm apwòch ak default nou an .form-check.

Nou itilize seleksyon frè ak sè ( ~) pou tout eta nou <input>yo—tankou :checked—pou byen style endikatè fòm koutim nou an. Lè yo konbine avèk .custom-control-labelklas la, nou kapab tou style tèks la pou chak atik ki baze sou <input>eta a.

Nou kache default la <input>ak opacityepi itilize .custom-control-labelpou konstwi yon nouvo endikatè fòm koutim nan plas li ak ::beforeak ::after. Malerezman nou pa ka bati yon koutim yon sèl soti nan jis <input>paske CSS a contentpa travay sou eleman sa a.

Nan eta yo tcheke, nou itilize ikon base64 entegre SVG soti nan Open Iconic . Sa a bay nou pi bon kontwòl pou manier ak pwezante atravè navigatè ak aparèy.

Bwat chèk

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

Bwat chèk koutim yo ka itilize :indeterminatepseudo klas la tou lè yo mete manyèlman atravè JavaScript (pa gen okenn atribi HTML ki disponib pou espesifye li).

Si w ap itilize jQuery, yon bagay tankou sa a ta dwe sifi:

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

Radyo

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

Nan liy

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

Andikape

Bwat ak radyo koutim yo kapab tou enfim. Ajoute disabledatribi boolean nan <input>ak endikatè a koutim ak deskripsyon etikèt yo pral otomatikman style.

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

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

Chwazi meni an

<select>Meni koutim bezwen sèlman yon klas koutim, .custom-selectpou deklanche estil koutim yo.

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

Ou ka chwazi tou nan ti ak gwo seleksyon koutim pou matche ak antre tèks menm gwosè nou yo.

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

Se multipleatribi a sipòte tou:

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

Kòm se sizeatribi a:

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

File navigatè

Fichye a antre se pi gnarly nan pakèt la epi li mande JavaScript adisyonèl si ou ta renmen branche yo ak fonksyonèl Chwazi fichye ... ak chwazi tèks non dosye.

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

Nou kache fichye default la <input>atravè opacityepi olye de style la <label>. Se bouton an pwodwi ak pozisyone ak ::after. Anfen, nou deklare yon widthak heightsou la <input>pou espas apwopriye pou kontni ki antoure.

Tradiksyon oswa personnalisation fisèl yo

Yo itilize :lang()pseudo-klas la pou pèmèt tradiksyon tèks "Browse" nan lòt lang. Ranplase oswa ajoute antre nan $custom-file-textvaryab Sass la ak tag langaj ki enpòtan ak kòd lokalize. Fisèl angle yo ka Customized menm jan an. Pou egzanp, men ki jan yon moun ta ka ajoute yon tradiksyon Panyòl (kòd lang Panyòl la se es):

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

Men an lang(es)aksyon sou antre nan dosye koutim pou yon tradiksyon Panyòl:

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

Ou pral bezwen fikse lang dokiman ou a (oswa sous-arbre ladan l) kòrèkteman pou yo ka montre tèks ki kòrèk la. Sa a ka fè lè l sèvi avèk atribi langki sou <html>eleman an oswa Content-Languageheader HTTP , pami lòt metòd.