Source

Dagiti Pormas

Dagiti pagarigan ken dagiti pagalagadan ti panagusar para kadagiti estilo ti panagtengngel ti porma, dagiti pagpilian ti layout, ken dagiti kostumbre a paset para iti panagpartuat kadagiti nadumaduma a porma.

Panangkita iti pakabuklan

Dagiti kontrol ti porma ti Bootstrap ket mangpalawa kadagiti estilo ti pormatayo a Rebooted addaan kadagiti klase. Usaren dagitoy a klase tapno agpili kadagiti napasadaan a displayda para iti ad-adu a naurnos a panagiparang iti ballasiw dagiti browser ken alikamen.

Siguraduen nga agusar ti maitutop nga typeattribute kadagiti amin nga input (kas pagarigan, emailpara iti email address wennonumber para iti numero nga impormasion) tapno magundawayan dagiti baro a kontrol ti input a kas ti panangipaneknek ti email, panagpili ti numero, ken dadduma pay.

Adda ditoy ti napardas a pagarigan tapno maipakita dagiti estilo ti porma ti Bootstrap. Itultuloymo ti agbasa para iti dokumentasion kadagiti kasapulan a klase, layout ti porma, ken dadduma pay.

Pulos a dimi ibinglay ti emailmo iti sabali. 
<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-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>

Dagiti kontrol ti porma

Dagiti kontrol ti porma ti teksto—kas <input>iti s, <select>s, ken <textarea>s—ket estilo a kadua ti .form-controlklase. Nairaman dagiti estilo para iti sapasap a langa, kasasaad ti pokus, panagdakkel, ken dadduma pay.

Siguraduenyo a sukimaten dagiti kostumbre a pormami tapno ad-adda pay nga estilo <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>

Para kadagiti panagserrek ti papeles, isukat ti .form-controlpara iti .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>

Panag-sizing

Itakderan dagiti kangato babaen ti panagusar kadagiti klase a kas .form-control-lgken .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>

Basaen laeng

Inayon ti readonlyboolean a kababalin iti maysa nga input tapno malapdan ti pannakabalbaliw ti pateg ti input. Agparang a nalaglag-an dagiti mabasa laeng nga input (kas met laeng kadagiti nabaldado nga input), ngem pagtalinaeden ti gagangay a kursor.

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

Basaen laeng ti plain text

No kayatmo ti maaddaan kadagiti <input readonly>elemento iti pormam a naistilo a kas plain text, usarem ti .form-control-plaintextklase tapno ikkaten ti default nga estilo ti tay-ak ti porma ken mangpreserba ti umno a margin ken 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>

Dagiti Input ti Sakop

Itakderan dagiti horizontal a mai-scroll a sakop nga input babaen ti panagusar ti .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>

Dagiti checkbox ken radio

Dagiti kasisigud a kahon ti tsek ken dagiti radio ket mapasayaat babaen ti tulong ti .form-check, ti maymaysa a klase para kadagiti agpada a kita ti panagserrek a mangpasayaat ti layout ken kababalin dagiti elementoda ti HTML . Dagiti kahon ti tsek ket para iti panagpili iti maysa wenno sumagmamano a pagpilian iti maysa a listaan, idinto ta dagiti radio ket para iti panagpili iti maysa a pagpilian manipud iti adu.

Dagiti baldado a kahon ti tsek ken dagiti radio ket nasuportaran, ngem tapno mangipaay ti not-allowedkursor iti hover ti nagannak <label>, kasapulam nga inayon ti disabledattribute iti .form-check-input. Ti baldado a kababalin ket mangyaplikar ti nalaglag-an a kolor tapno makatulong a mangipakita ti kasasaad ti input.

Dagiti kahon ti tsek ken dagiti panagusar kadagiti radio ket naibangon tapno mangsuporta ti HTML-a naibatay a panangipaneknek ti porma ken mangipaay kadagiti ababa, madanon nga etiketa. Kas kasta, dagiti <input>s ken <label>stayo ket agkakabsat nga elemento a maikontra iti maysa iti <input>uneg ti maysa <label>. Daytoy ket bassit nga ad-adu a berboso a kas masapul nga ikeddengmo idken fordagiti attribute tapno mainaig ti <input>ken <label>.

Default (naurnong) .

Babaen ti default, aniaman a bilang dagiti kahon ti tsek ken radio a dagus a kabsat ket bertikal a maitumpok ken maitutop nga espasyo iti .form-check.

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

Inline nga

Grupoen dagiti kahon ti tsek wenno dagiti radio iti isu met laeng a horisontal a hilera babaen ti pananginayon .form-check-inlineiti ania man .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>

Awan dagiti etiketa

Inayon .position-statickadagiti input iti uneg .form-checknga awan ti aniaman a teksto ti etiketa. Laglagipem nga ipaay pay laeng ti sumagmamano a porma ti etiketa para kadagiti makatulong a teknolohia (kas pagarigan, panagusar 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>

Aninaw

Gapu ta ti Bootstrap ket agaplikar display: blockken width: 100%kadagiti gangani amin a kontrol ti pormatayo, dagiti porma ket babaen ti default ket agtumpok a bertikal. Mabalin nga usaren dagiti kanayonan a klase a mangbalbaliw iti daytoy a layout iti tunggal porma a batayan.

Mangbukel kadagiti grupo

Ti .form-groupklase ti kalalakaan a wagas a mangnayon iti sumagmamano nga estruktura kadagiti porma. Daytoy ket mangipaay ti nalaka a maibagay a klase a mangparegta ti umno a panaggrupo kadagiti etiketa, dagiti kontrol, opsional a teksto ti tulong, ken panagmensahe ti panangipaneknek ti porma. Babaen ti kasisigud daytoy ket agaplikar laeng margin-bottom, ngem daytoy ket mangala kadagiti kanayonan nga estilo iti .form-inlinekas kasapulan. Usaren dayta iti <fieldset>s, <div>s, wenno dandani aniaman a sabali nga elemento.

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

Porma ti grid

Mabalin a maibangon dagiti ad-adu a komplikado a porma babaen ti panangusar kadagiti klasetayo iti grid. Usaren dagitoy para kadagiti layout ti porma a kasapulan ti adu a kolum, nadumaduma a kalawa, ken dagiti kanayonan a pagpilian ti panagtunos.

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

Porma ti hilera

Mabalinmo pay ti agsinnukat .rowpara iti .form-row, ti maysa a panagbalbaliw ti pagalagadan a grid rowmi a mangbalbaliw kadagiti default a kanal ti adigi para kadagiti naing-inget ken ad-adu a kompakto a layout.

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

Dagiti ad-adu a komplikado a layout ket mabalin pay a mapartuat babaen ti sistema ti grid.

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

Paisaad a porma

Mangpartuat kadagiti horisontal a porma babaen ti grid babaen ti pananginayon ti .rowklase kadagiti grupo ti panagporma ken panagusar kadagiti .col-*-*klase tapno mangibaga ti kalawa dagiti etiketa ken dagiti kontrolmo. Siguraduen nga inayon .col-form-labelti <label>s mo pay tapno bertikal a naisentro dagitoy kadagiti nainaig a kontrol ti pormada.

No dadduma, mabalin a kasapulam ti agusar kadagiti margin wenno padding utilities tapno makaaramidka iti dayta perpekto a panagtunos a kasapulam. Kas pagarigan, inikkatmi ti padding-topiti naurnong nga etiketa ti radio inputs-mi tapno nasaysayaat ti pannakaitunos ti batayan ti teksto.

Dagiti Radio
Kahon ti tsek 
<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>
Paisaad a panagdakkel ti etiketa ti porma

Siguraduenyo nga usaren .col-form-label-smwenno .col-form-label-lgiti <label>s wenno <legend>s-yo tapno umiso a masurot ti kadakkel ti .form-control-lgken .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>

Panagdakkel ti adigi

Kas naipakita kadagiti napalabas a pagarigan, ti sistemami a grid ket mangipalubos kenka a mangikabil ti ania man a bilang ti .cols iti uneg ti maysa .rowwenno .form-row. Biningayda ti magun-odan a kalawa a padapada iti nagbaetan dagitoy. Mabalinmo pay ti agpili ti subgrupo dagiti kolummo tapno mangala ti ad-adu wenno basbassit nga espasio, bayat a dagiti nabati .colnga s ket agpapada a mangbingay kadagiti nabati, nga addaan kadagiti espesipiko a klase ti adigi a kas ti .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-panag-sizing

Ti pagarigan iti baba ket agus-usar ti flexbox a utilidad tapno bertikal a mangisentro kadagiti linaon ken agbaliw .coltapno .col-autodagiti adigimo ket mangala laeng ti adu nga espasio a kas kasapulan. Iti sabali a pannao, ti kolum ket agdakkel ti bagina maibatay kadagiti linaonna.

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

Kalpasanna mabalinmo nga i-remix manen dayta kadagiti klase ti kolum a naisangsangayan iti kadakkel.

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

Ket siempre dagiti custom form controls ket nasuportaran.

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

Inline dagiti pormas

Usaren ti .form-inlineklase tapno maipakita ti serye dagiti etiketa, kontrol ti porma, ken buton iti maymaysa a horizontal a hilera. Dagiti kontrol ti porma iti uneg dagiti inline a porma ket agdumaduma bassit manipud kadagiti default nga estadoda.

  • Dagiti kontrol ket display: flex, a mangrakrak ti ania man nga HTML a puraw nga espasio ken mangipalubos kenka a mangipaay ti panagtengngel ti panagtunos kadagiti utilidad ti panagsisina ken flexbox .
  • Dagiti kontrol ken dagiti grupo ti panagserrek ket umawat width: autotapno mangbalbaliw ti default ti Bootstrap width: 100%.
  • Dagiti kontrol ket agparang laeng iti inline kadagiti viewport a saan a basbassit ngem 576px ti kalawana tapno mangibaga kadagiti akikid a viewport kadagiti mobile nga alikamen.

Mabalin a kasapulam a manual a tamingen ti kalawa ken panagtunos dagiti indibidual a kontrol ti porma kadagiti utilidad ti panagsisina (kas naipakita iti baba). Kamaudiananna, siguraduem a kanayon nga iraman ti maysa <label>nga addaan iti tunggal porma a panangkontrol, uray no kasapulam nga ilemmeng dayta manipud kadagiti saan nga screenreader a bisita nga addaan iti .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>

Dagiti kostumbre a kontrol ti porma ken dagiti panagpili ket nasuportaran pay.

<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>
Alternatibo kadagiti nailemmeng nga etiketa

Dagiti makatulong a teknolohia a kas kadagiti screen reader ket marigatanda kadagiti pormam no saanmo nga iraman ti etiketa para iti tunggal input. Para kadagitoy nga inline a porma, mabalinmo nga ilemmeng dagiti etiketa babaen ti panagusar ti .sr-onlyklase. Adda dagiti kanayonan nga alternatibo a pamay-an ti panangipaay ti etiketa para kadagiti makatulong a teknolohia, a kas ti aria-label, aria-labelledbywenno titleattribute. No awan kadagitoy ti adda, dagiti makatulong a teknolohia ket mabalinda nga agpatulong iti panagusar ti placeholderattribute, no adda, ngem laglagipen a ti panagusar ti placeholderkas kasukat dagiti sabali a pamay-an ti panagmarka ket saan a maibalakad.

Teksto ti tulong

Ti teksto ti tulong iti lebel ti bloke kadagiti porma ket mabalin a maparsua babaen ti panagusar .form-text(dati nga ammo a kas .help-blockiti v3). Ti teksto ti tulong iti inline ket mabalin a nalaka a maipatungpal babaen ti panagusar ti ania man nga elemento ti HTML nga inline ken dagiti klase ti utilidad a kas ti .text-muted.

Pananginaig ti teksto ti tulong kadagiti kontrol ti porma

Ti teksto ti tulong ket rumbeng a nalawag a nainaig iti panagtengngel ti porma a mainaig daytoy iti panagusar ti aria-describedbyattribute. Daytoy ti mangsigurado a dagiti makatulong a teknolohia—kas kadagiti screen reader—ti mangipakaammo iti daytoy a teksto ti tulong no ti agus-usar ket agpokus wenno sumrek iti kontrol.

Ti teksto ti tulong iti baba dagiti input ket mabalin nga estilo babaen ti .form-text. Daytoy a klase ket mangiraman display: blockken manginayon ti sumagmamano a kangatuan a margin para iti nalaka a panagsisina manipud kadagiti input iti ngato.

Masapul nga 8-20 a karakter ti kaatiddog ​​ti password-mo, naglaon kadagiti letra ken numero, ken saan nga aglaon kadagiti espasyo, espesial a karakter, wenno 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>

Ti teksto iti uneg ti linia ket mabalinna nga usaren ti ania man a gagangay nga elemento ti HTML iti uneg ti linia (maysa man a <small>, <span>, wenno sabali pay) nga awan ti sabali no di ti klase ti utilidad.

Masapul nga 8-20 a karakter ti kaatiddogna. 
<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>

Dagiti pormas dagiti baldado

Inayon ti disabledboolean a kababalin iti maysa nga input tapno malapdan dagiti panagtitinnulong ti agar-aramat ken mangaramid daytoy a kasla nalaglag-an.

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

Inayon ti disabledattribute iti a <fieldset>tapno mapasardeng amin dagiti kontrol iti uneg.

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

Babaen ti kasisigud, dagiti browser ket tratuendanto amin dagiti katutubo a kontrol ti porma ( <input>, <select>ken <button>dagiti elemento) iti uneg ti a a <fieldset disabled>kas baldado, a manglapped ti agpada a panagtitinnulong ti teklado ken mouse kadagitoy. Nupay kasta, no ti pormam ket mangiraman pay kadagiti <a ... class="btn btn-*">elemento, dagitoy ket maited laeng ti estilo ti pointer-events: none. Kas naibagbaga iti benneg maipapan ti baldado a kasasaad para kadagiti buton (ken espesipiko iti sub-seksion para kadagiti elemento ti angkla), daytoy a tagikua ti CSS ket saan pay a naistandard ken saan a naan-anay a nasuportaran iti Internet Explorer 10, ken saan a manglapped kadagiti agar-aramat ti teklado manipud iti kaadda kabaelanna nga ipamaysa wenno aktiboen dagitoy a link. Isu a tapno natalgedka, agusarka iti custom a JavaScript tapno mapasardeng dagiti kasta a link.

Panagtunos ti krus-browser

Bayat nga iyaplikar ti Bootstrap dagitoy nga estilo kadagiti amin a browser, ti Internet Explorer 11 ken iti baba ket saan a naan-anay a mangsuporta ti disabledattribute iti maysa a <fieldset>. Usaren ti kostumbre a JavaScript tapno mapasardeng ti fieldset kadagitoy a browser.

Panangipaneknek

Mangted ti napateg, maaramid a sungbat kadagiti agar-aramatmo babaen ti panangipaneknek ti porma ti HTML5– a magun-od kadagiti amin a nasuportaran a browsermi . Pilien manipud iti browser a default a panagipaneknek a feedback, wenno ipatungpal dagiti kostumbre a mensahe babaen dagiti naibangon a klasemi ken pangrugian a JavaScript.

Iti agdama irekomendarmi ti panagusar kadagiti kostumbre nga estilo ti panangipaneknek, a kas dagiti katutubo a mensahe ti panangipaneknek ti default a browser ket saan a kanayon a naipalgak kadagiti makatulong a teknolohia kadagiti amin a browser (kangrunaan, ti Chrome iti desktop ken mobile).

No kasano ti panagandar dayta

Kastoy ti panagandar ti panangipaneknek ti porma iti Bootstrap:

  • Ti panangipaneknek ti porma ti HTML ket maipakat babaen ti dua a pseudo-klase ti CSS, :invalidken :valid. Agaplikar dayta kadagiti <input>, <select>, ken <textarea>dagiti elemento.
  • Ti Bootstrap :invalidket mangsaklaw kadagiti estilo ti ken iti klase :validti nagannak .was-validated, a kadawyan a maipakat iti <form>. No saan, ti ania man a kasapulan a tay-ak nga awan ti pateg ket agparang a kas saan nga umiso iti panagkarga ti panid. Iti daytoy a wagas, mabalinmo a pilien no kaano nga aktiboen dagitoy (kadawyan kalpasan a mapadas ti panagipatulod ti porma).
  • Tapno mai-reset ti langa ti porma (kas pagarigan, iti kaso dagiti dinamiko a panagipatulod ti porma babaen ti panagusar ti AJAX), ikkaten ti .was-validatedklase manipud iti <form>manen kalpasan ti panagipatulod.
  • Kas maysa a fallback, .is-invalidken .is-validdagiti klase ket mabalin a mausar imbes a dagiti pseudo-klase para iti panangipaneknek ti sikigan ti serbidor . Saanda a kasapulan ti .was-validatedklase dagiti nagannak.
  • Gapu kadagiti pannakalapped no kasano ti panagtrabaho ti CSS, saanmi a mabalin (iti agdama) nga iyaplikar dagiti estilo iti maysa <label>nga umay sakbay ti maysa a panagtengngel ti porma iti DOM no awan ti tulong ti kostumbre a JavaScript.
  • Amin a moderno a browser ket mangsuporta ti API ti panangipaneknek ti limitasion , ti serye dagiti pamay-an ti JavaScript para iti panangipaneknek kadagiti kontrol ti porma.
  • Dagiti mensahe ti feedback ket mabalin nga agusar kadagiti default ti browser (naiduma para iti tunggal maysa a browser, ken saan nga estilo babaen ti CSS) wenno dagiti kostumbre nga estilo ti feedbackmi nga addaan kadagiti kanayonan nga HTML ken CSS.
  • Mabalinmo ti mangipaay kadagiti kostumbre a mensahe ti kinapudno nga addaan setCustomValidityiti JavaScript.

Iti dayta a panunot, ibilang dagiti sumaganad a demo para kadagiti estilo ti panangipaneknekmi iti kostumbre a porma, dagiti opsional a klase ti sikigan ti server, ken dagiti default ti browser.

Dagiti kostumbre nga estilo

Para kadagiti kostumbre a mensahe ti panangipaneknek ti porma ti Bootstrap, kasapulam nga inayon ti novalidateboolean a kababalin iti <form>. Daytoy ket mangbaldado kadagiti default a toltip ti feedback ti browser, ngem mangipaay pay laeng ti panagserrek kadagiti API ti panangipaneknek ti porma iti JavaScript. Padasem nga isubmit ti porma iti baba; ti JavaScript-mi ket mang-intercept iti submit button ken mangi-relay iti feedback kenka. No padasem ti mangisubmitir, makitam dagiti :invalidken :validestilo a naipakat kadagiti kontrol ti pormam.

Dagiti kostumbre nga estilo ti feedback ket mangyaplikar kadagiti kostumbre a kolor, beddeng, estilo ti pokus, ken dagiti ikono ti likudan tapno nasaysayaat a maipakaammo ti feedback. Dagiti ikono ti likudan para iti <select>s ket magun-od laeng iti .custom-select, ken saan .form-control.

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>

Dagiti default ti browser

Saan kadi nga interesado kadagiti mensahe ti feedback ti kostumbre a panangipaneknek wenno panagsurat ti JavaScript tapno agbaliw kadagiti kababalin ti porma? Amin a nasayaat, mabalinmo nga usaren dagiti default ti browser. Padasem nga isubmite ti porma iti baba. Depende iti browser ken OS-mo, makitam ti naiduma bassit nga estilo ti feedback.

Bayat a dagitoy nga estilo ti feedback ket saan a mabalin nga estilo babaen ti CSS, mabalinmo pay laeng nga ipasayaat ti teksto ti feedback babaen ti 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>

Server nga dasig

Irekomendarmi ti panagusar ti panangipaneknek ti sikigan ti kliyente, ngem no kas pagarigan kasapulam ti panangipaneknek ti sikigan ti serbidor, mabalinmo nga ipakita dagiti saan nga umiso ken balido a tay-ak ti porma babaen ti .is-invalidken .is-valid. Paliiwenyo a .invalid-feedbacknasuportaran met kadagitoy a klase.

Nasayaat ti langana!
Nasayaat ti langana!
@
Pangngaasiyo ta agpilikayo iti nagan ti agar-aramat.
Pangngaasiyo ta mangipaaykayo iti balido a siudad.
Pangngaasiyo ta mangipaaykayo iti balido nga estado.
Pangngaasiyo ta mangipaaykayo iti balido a zip.
Masapul nga umanamongkayo sakbay nga isubmityo. 
<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>

Dagiti nasuportaran nga elemento

Dagiti pagarigan a pormami ket mangipakita kadagiti katutubo a tekstual <input>nga s iti ngato, ngem dagiti estilo ti panangipaneknek ti porma ket magun-od pay para kadagiti <textarea>s ken dagiti kostumbre a kontrol ti porma.

Pangngaasiyo ta iserrekyo ti mensahe iti textarea.
Pagarigan ti di umiso a teksto ti feedback
Ad-adu pay a pagarigan ti di umiso a teksto ti feedback
Pagarigan ti saan nga umiso a kostumbre a panagpili a feedback
Pagarigan ti saan nga umiso a kostumbre a sungbat ti papeles 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

Dagiti tip ti remienta

No ti layout ti pormam ket mangipalubos iti daytoy, mabalinmo nga isukat dagiti .{valid|invalid}-feedbackklase para kadagiti .{valid|invalid}-tooltipklase tapno mangipakita ti sungbat ti panangipaneknek iti maysa nga estilo a tooltip. Siguraduenyo nga adda nagannak nga addaan position: relativeiti dayta para iti tooltip positioning. Iti pagarigan iti baba, dagiti klase ti kolummi ket addaanen iti daytoy a dati, ngem ti proyektom ket mabalin a kasapulan ti alternatibo a panagisaad.

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>

Dagiti kostumbre a porma

Para iti ad-adu pay a panagpasayaat ken panagpapada ti krus ti browser, usaren dagiti naan-anay a kostumbre nga elemento ti pormami tapno masukatan dagiti default ti browser. Dagitoy ket naibangon iti rabaw ti semantiko ken makastrek a marka, isu a dagitoy ket solido a kasukat para iti ania man a default a panagtengngel ti porma.

Dagiti checkbox ken radio

Tunggal checkbox ken radio <input>ken <label>panagparis ket nabalkot iti a <div>tapno makaaramid ti custom control-tayo. Iti estruktura, daytoy ket isu met laeng a pamay-an a kas ti default-tayo .form-check.

Usarenmi ti sibling selector ( ~) para kadagiti amin nga <input>estadomi—kas iti :checked—tapno umno nga estilo ti custom form indicator-mi. No maitipon iti .custom-control-labelklase, mabalintayo met nga estilo ti teksto para iti tunggal banag a naibatay iti <input>kasasaad ti 's.

Ilemmengmi ti default <input>babaen opacityken usarenmi ti .custom-control-labeltapno mangbangon ti baro a kostumbre a mangipakita ti porma iti lugarna babaen ti ::beforeken ::after. Daksanggasat ta saantayo a makaaramid iti kostumbre manipud iti laeng gapu ta saan nga agtrabaho dagiti <input>CSS iti dayta nga elemento.content

Kadagiti nasukimaten nga estado, agus-usarkami kadagiti base64 a naikabil nga SVG nga ikono manipud iti Open Iconic . Daytoy ket mangipaay kadatayo ti kasayaatan a panangtengngel para iti estilo ken panagposision iti ballasiw dagiti browser ken alikamen.

Dagiti kahon ti tsek

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

Dagiti kostumbre a kahon ti tsek ket mabalinda pay nga usaren ti :indeterminatepseudo a klase no manual a naikeddeng babaen ti JavaScript (awan ti magun-od a kababalin ti HTML para iti panangidatag iti daytoy).

No agus-usar ka ti jQuery, umdasen koma ti maysa a banag a kas iti daytoy:

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

Dagiti Radio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline nga

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

Awanan ti kabaelan

Mabalin met a balbaliwan dagiti custom checkbox ken radio. Inayon ti disabledboolean a kababalin iti <input>ken ti kostumbre a mangipakita ken ti deskripsion ti etiketa ket automatiko nga estilo.

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

Dagiti Switches

Ti maysa a switch ket addaan ti marka ti maysa a kostumbre a kahon ti tsek ngem agus-usar ti .custom-switchklase tapno mangiparang ti maysa a toggle a switch. Dagiti switch ket mangsuporta pay ti disabledattribute.

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

Pilien ti menu

Dagiti kostumbre <select>a menu ket kasapulan laeng ti kostumbre a klase, .custom-selecttapno mangtignay kadagiti kostumbre nga estilo. Dagiti kostumbre nga estilo ket limitado iti <select>damo a langa ti 's ken saan a mabalin a baliwan ti <option>s gapu kadagiti limitasion ti browser.

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

Mabalinmo pay ti agpili manipud kadagiti babassit ken dadakkel a kostumbre a panagpili tapno maipada kadagiti kapada ti kadakkelna a teksto nga inputmi.

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

Ti multipleattribute ket nasuportaran pay:

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

Kas iti sizeattribute:

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

Kaadayo

Mangpartuat kadagiti kostumbre a <input type="range">kontrol babaen ti .custom-range. Ti track (ti likudan) ken thumb (ti pateg) ket agpada nga estilo tapno agparang nga agpapada iti ballasiw dagiti browser. Kas ti laeng IE ken Firefox ti mangsuporta iti “panangpunno” iti track-da manipud iti kannigid wenno kannawan ti thumb kas pamay-an tapno makita a mangipakita iti panagrang-ay, saanmi nga agdama a suportaran dayta.

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

Dagiti input ti sakop ket addaan kadagiti naipasimudaag a pateg para iti minken max— 0ken 100, a nagsasaruno. Mabalinmo nga ikeddeng dagiti baro a pateg para kadagidiay agus-usar kadagiti attribute ti minken .max

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

Babaen ti default, dagiti input ti range ket “snap” kadagiti pateg ti intero a bilang. Tapno mabaliwan daytoy, mabalinmo nga ikeddeng ti steppateg. Iti pagarigan iti baba, dobleentayo ti bilang dagiti addang babaen ti panangusar iti step="0.5".

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

Browser ti file

Ti mairekomendar a plugin a mang-animate iti custom file input: bs-custom-file-input , dayta ti us-usarenmi iti agdama ditoy kadagiti docsmi.

Ti panagserrek ti papeles ket isu ti kaaduan a gnarly ti bunggoy ken kasapulan ti kanayonan a JavaScript no kayatmo nga ikabit dagitoy iti agtigtignay a Pilien ti papeles... ken napili a teksto ti nagan ti papeles.

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

Ilemmengmi ti default a file <input>babaen opacityken imbes ketdi estilo ti <label>. Ti buton ket napataud ken naiposision babaen ti ::after. Maudi, ideklarami ti maysa widthken heightiti <input>para iti umno nga espasyo para iti aglawlaw a linaon.

Panagpatarus wenno panagpasayaat kadagiti kuerdas babaen ti SCSS

Mausar ti :lang()pseudo-class tapno maipalubos ti pannakaipatarus ti teksto a “Browse” iti dadduma a pagsasao. Ibabawi wenno inayon dagiti panagserrek iti $custom-file-textvariable ti Sass babaen ti mainaig nga etiketa ti pagsasao ken dagiti lokalisado a kuerdas. Mabalin a ma-customize dagiti Ingles a kuerdas iti isu met laeng a wagas. Kas pagarigan, ditoy no kasano a ti maysa ket mabalinna a manginayon ti maysa nga Espaniol a patarus (ti kodigo ti pagsasao ti Espaniol ket es):

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

Adda lang(es)ditoy nga agtigtignay iti kostumbre a file input para iti maysa nga Espaniol a patarus:

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

Masapul nga ikeddengmo nga umiso ti pagsasao ti dokumentom (wenno subtree dayta) tapno maipakita ti umno a teksto. Daytoy ket mabalin nga aramiden babaen ti panagusar ti langattribute iti <html>elemento wenno ti Content-LanguageHTTP nga ulo , kadagiti dadduma pay a pamay-an.

Panagpatarus wenno panangpasayaat kadagiti kuerdas babaen ti HTML

Ti Bootstrap ket mangipaay pay ti wagas a mangipatarus ti teksto ti “Browse” iti HTML nga addaan ti data-browseattribute a mabalin a mainayon iti kostumbre nga etiketa ti panagserrek (pagarigan iti Olandes):

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