in English

ແບບຟອມ

ຕົວຢ່າງແລະຄໍາແນະນໍາການນໍາໃຊ້ສໍາລັບຮູບແບບການຄວບຄຸມແບບຟອມ, ທາງເລືອກການຈັດວາງ, ແລະອົງປະກອບທີ່ກໍາຫນົດເອງສໍາລັບການສ້າງຮູບແບບທີ່ຫລາກຫລາຍ.

ພາບລວມ

ການຄວບຄຸມແບບຟອມຂອງ Bootstrap ຂະຫຍາຍຢູ່ໃນ ຮູບແບບແບບຟອມ Rebooted ຂອງພວກເຮົາ ກັບຫ້ອງຮຽນ. ໃຊ້ຫ້ອງຮຽນເຫຼົ່ານີ້ເພື່ອເລືອກເຂົ້າໃນການສະແດງຜົນທີ່ປັບແຕ່ງຂອງເຂົາເຈົ້າເພື່ອໃຫ້ການສະແດງຜົນທີ່ສອດຄ່ອງກັນຫຼາຍຂຶ້ນໃນທົ່ວຕົວທ່ອງເວັບ ແລະອຸປະກອນ.

ໃຫ້ແນ່ໃຈວ່າໃຊ້ typeຄຸນລັກສະນະທີ່ເຫມາະສົມກັບທຸກວັດສະດຸປ້ອນ (ເຊັ່ນ: emailສໍາລັບທີ່ຢູ່ອີເມວຫຼື numberຂໍ້ມູນຕົວເລກ) ເພື່ອໃຊ້ປະໂຫຍດຈາກການຄວບຄຸມການປ້ອນຂໍ້ມູນໃຫມ່ເຊັ່ນການຢັ້ງຢືນອີເມວ, ການເລືອກຕົວເລກ, ແລະອື່ນໆ.

ນີ້ແມ່ນຕົວຢ່າງສັ້ນໆເພື່ອສະແດງຮູບແບບແບບຟອມຂອງ Bootstrap. ສືບຕໍ່ອ່ານສໍາລັບເອກະສານກ່ຽວກັບຫ້ອງຮຽນທີ່ຕ້ອງການ, ຮູບແບບແບບຟອມ, ແລະອື່ນໆ.

ພວກເຮົາຈະບໍ່ແບ່ງປັນອີເມວຂອງທ່ານກັບຜູ້ອື່ນ.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

ການຄວບຄຸມແບບຟອມ

ການຄວບຄຸມແບບຟອມຂໍ້ຄວາມ - ເຊັ່ນ: <input>s, <select>s, ແລະ <textarea>s - ຖືກຈັດຮູບແບບກັບ .form-controlຊັ້ນຮຽນ. ຮວມມີຮູບແບບຕ່າງໆສຳລັບຮູບລັກສະນະທົ່ວໄປ, ສະຖານະໂຟກັສ, ຂະໜາດ ແລະອື່ນໆອີກ.

ໃຫ້​ແນ່​ໃຈວ່​າ​ການ​ສໍາ​ຫຼວດ ​ຮູບ​ແບບ​ທີ່​ກໍາ​ນົດ​ເອງ ​ຂອງ​ພວກ​ເຮົາ ​ເພື່ອ​ເພີ່ມ​ເຕີມ​ຮູບ​ແບບ <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>

ສໍາລັບການປ້ອນໄຟລ໌, ແລກປ່ຽນ .form-controlສໍາລັບ .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>

ຂະໜາດ

ກໍານົດຄວາມສູງໂດຍໃຊ້ຫ້ອງຮຽນເຊັ່ນ .form-control-lgແລະ .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>

ອ່ານ​ຢ່າງ​ດຽວ

ເພີ່ມ readonlyຄຸນສົມບັດ boolean ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການດັດແກ້ຄ່າຂອງວັດສະດຸປ້ອນ. ການປ້ອນຂໍ້ມູນແບບອ່ານຢ່າງດຽວປະກົດວ່າອ່ອນກວ່າ (ຄືກັນກັບວັດສະດຸປ້ອນທີ່ຖືກປິດໃຊ້ງານ), ແຕ່ຮັກສາຕົວກະພິບມາດຕະຖານໄວ້.

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

ອ່ານພຽງແຕ່ຂໍ້ຄວາມທຳມະດາ

ຖ້າທ່ານຕ້ອງການໃຫ້ <input readonly>ອົງປະກອບໃນຮູບແບບຂອງທ່ານຖືກຈັດຮູບແບບເປັນຂໍ້ຄວາມທໍາມະດາ, ໃຫ້ໃຊ້ .form-control-plaintextຫ້ອງຮຽນເພື່ອເອົາຮູບແບບພື້ນທີ່ແບບຟອມເລີ່ມຕົ້ນແລະຮັກສາຂອບແລະ 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">
    </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>

ໄລຍະການປ້ອນຂໍ້ມູນ

ຕັ້ງຄ່າການປ້ອນຂໍ້ມູນໄລຍະທີ່ສາມາດເລື່ອນໄດ້ຕາມລວງນອນໂດຍໃຊ້ .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>

ກ່ອງກວດ ແລະວິທະຍຸ

ກ່ອງກວດ ແລະວິທະຍຸເລີ່ມຕົ້ນຖືກປັບປຸງໂດຍການຊ່ວຍເຫຼືອຂອງ .form-check, ຫ້ອງຮຽນດຽວສໍາລັບທັງສອງປະເພດວັດສະດຸປ້ອນທີ່ປັບປຸງຮູບແບບແລະພຶດຕິກໍາຂອງອົງປະກອບ HTML ຂອງເຂົາເຈົ້າ . checkboxes ແມ່ນສໍາລັບການເລືອກຫນຶ່ງຫຼືຫຼາຍທາງເລືອກໃນບັນຊີລາຍຊື່, ໃນຂະນະທີ່ວິທະຍຸແມ່ນສໍາລັບການເລືອກທາງເລືອກຫນຶ່ງຈາກຈໍານວນຫຼາຍ.

ກ່ອງກວດທີ່ປິດການໃຊ້ງານ ແລະວິທະຍຸແມ່ນຮອງຮັບ. ຄຸນ ສົມ disabledບັດຈະນຳໃຊ້ສີທີ່ອ່ອນກວ່າເພື່ອຊ່ວຍລະບຸສະຖານະຂອງວັດສະດຸປ້ອນ.

ກ່ອງເຊັກແລະປຸ່ມວິທະຍຸສະຫນັບສະຫນູນການກວດສອບແບບຟອມທີ່ອີງໃສ່ HTML ແລະສະຫນອງປ້າຍທີ່ຊັດເຈນ, ເຂົ້າເຖິງໄດ້. ດັ່ງນັ້ນ, <input>s ແລະ s ຂອງພວກເຮົາ <label>ແມ່ນອົງປະກອບຂອງພີ່ນ້ອງທີ່ກົງກັນຂ້າມກັບ <input>ພາຍໃນ <label>. ນີ້ແມ່ນ verbose ເລັກນ້ອຍຍ້ອນວ່າທ່ານຕ້ອງລະບຸ idແລະ forຄຸນລັກສະນະທີ່ກ່ຽວຂ້ອງກັບ <input>ແລະ <label>.

ຄ່າເລີ່ມຕົ້ນ (ວາງຊ້ອນກັນ)

ໂດຍຄ່າເລີ່ມຕົ້ນ, ກ່ອງໝາຍເລກໃດກໍໄດ້ ແລະວິທະຍຸທີ່ເປັນພີ່ນ້ອງກັນໃນທັນທີຈະຖືກວາງຊ້ອນກັນຕາມແນວຕັ້ງ ແລະຈັດໄລຍະຫ່າງຢ່າງເໝາະສົມກັບ .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>

ໃນແຖວ

ຈັດກຸ່ມກ່ອງໝາຍ ຫຼືວິທະຍຸຢູ່ໃນແຖວລວງນອນດຽວກັນໂດຍການເພີ່ມ .form-check-inlineໃສ່ອັນໃດ ນຶ່ງ .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>

ໂດຍບໍ່ມີປ້າຍກຳກັບ

ເພີ່ມ .position-staticໃສ່ວັດສະດຸປ້ອນພາຍໃນ .form-checkນັ້ນບໍ່ມີຂໍ້ຄວາມປ້າຍກຳກັບໃດໆ. ຈື່ໄວ້ວ່າຍັງໃຫ້ບາງຮູບແບບຂອງຊື່ທີ່ສາມາດເຂົ້າເຖິງໄດ້ສໍາລັບເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ (ຕົວຢ່າງເຊັ່ນ, ການນໍາໃຊ້ 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>

ແຜນຜັງ

ເນື່ອງຈາກ Bootstrap ນຳໃຊ້ display: blockແລະ width: 100%ກັບການຄວບຄຸມແບບຟອມເກືອບທັງໝົດຂອງພວກເຮົາ, ແບບຟອມຈະວາງໄວ້ຕາມແນວຕັ້ງ. ຫ້ອງຮຽນເພີ່ມເຕີມສາມາດຖືກໃຊ້ເພື່ອປ່ຽນແປງຮູບແບບນີ້ໃນແຕ່ລະຮູບແບບ.

ປະກອບເປັນກຸ່ມ

ຫ້ອງ .form-groupຮຽນແມ່ນວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະເພີ່ມໂຄງສ້າງບາງຢ່າງໃຫ້ກັບແບບຟອມ. ມັນສະຫນອງຫ້ອງຮຽນທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ສົ່ງເສີມການຈັດກຸ່ມທີ່ເຫມາະສົມຂອງປ້າຍຊື່, ການຄວບຄຸມ, ຂໍ້ຄວາມຊ່ວຍເຫຼືອທາງເລືອກ, ແລະການສົ່ງຂໍ້ຄວາມທີ່ຖືກຕ້ອງ. ໂດຍຄ່າເລີ່ມຕົ້ນມັນໃຊ້ພຽງແຕ່ margin-bottom, ແຕ່ມັນເລືອກເອົາຮູບແບບເພີ່ມເຕີມ .form-inlineຕາມຄວາມຕ້ອງການ. ໃຊ້ມັນກັບ <fieldset>s, <div>s, ຫຼືເກືອບທຸກອົງປະກອບອື່ນໆ.

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

ຕາຕະລາງແບບຟອມ

ຮູບແບບທີ່ຊັບຊ້ອນສາມາດສ້າງໄດ້ໂດຍໃຊ້ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ໃຊ້ສິ່ງເຫຼົ່ານີ້ສຳລັບການຈັດຮູບແບບທີ່ຕ້ອງການຫຼາຍຖັນ, ຄວາມກວ້າງທີ່ຫຼາກຫຼາຍ ແລະຕົວເລືອກການຈັດຮຽງເພີ່ມເຕີມ.

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

ແຖວແບບຟອມ

ທ່ານອາດຈະປ່ຽນ .rowເປັນ .form-row, ການປ່ຽນແປງຂອງແຖວຕາຕະລາງມາດຕະຖານຂອງພວກເຮົາທີ່ overrides gutters ຖັນເລີ່ມຕົ້ນສໍາລັບການຈັດວາງທີ່ເຄັ່ງຄັດແລະຫນາແຫນ້ນກວ່າ.

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

ການຈັດວາງທີ່ສັບສົນຫຼາຍຍັງສາມາດສ້າງດ້ວຍລະບົບຕາຂ່າຍໄຟຟ້າ.

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

ຮູບແບບແນວນອນ

ສ້າງແບບຟອມຕາມລວງນອນດ້ວຍຕາຂ່າຍໄຟຟ້າໂດຍການເພີ່ມ .rowຊັ້ນຮຽນເພື່ອສ້າງເປັນກຸ່ມແລະນໍາໃຊ້ .col-*-*ຊັ້ນຮຽນເພື່ອກໍານົດຄວາມກວ້າງຂອງປ້າຍຊື່ແລະການຄວບຄຸມຂອງທ່ານ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ .col-form-labelໃສ່ <label>s ຂອງເຈົ້າເຊັ່ນກັນເພື່ອໃຫ້ພວກມັນຖືກຈັດໃສ່ໃນແນວຕັ້ງດ້ວຍການຄວບຄຸມແບບຟອມທີ່ກ່ຽວຂ້ອງ.

ບາງຄັ້ງ, ທ່ານອາດຈະຕ້ອງການໃຊ້ຂອບຫຼື padding utilities ເພື່ອສ້າງຄວາມສອດຄ່ອງທີ່ສົມບູນແບບທີ່ທ່ານຕ້ອງການ. ຕົວຢ່າງ, ພວກເຮົາໄດ້ເອົາ padding-topປ້າຍກຳກັບວັດສະດຸປ້ອນວິທະຍຸທີ່ວາງໄວ້ຂອງພວກເຮົາອອກເພື່ອຈັດວາງເສັ້ນພື້ນຖານຂໍ້ຄວາມໃຫ້ດີຂຶ້ນ.

ວິທະຍຸ
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
ຂະໜາດປ້າຍກຳກັບແບບແນວນອນ

ໃຫ້​ແນ່​ໃຈວ່​າ​ການ​ນໍາ​ໃຊ້ .col-form-label-sm​ຫຼື s ຫຼື s .col-form-label-lgຂອງ​ທ່ານ ​ທີ່​ຈະ​ຖືກ​ຕ້ອງ​ປະ​ຕິ​ບັດ​ຕາມ​ຂະ​ຫນາດ​ຂອງ ​ແລະ .<label><legend>.form-control-lg.form-control-sm

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

ຂະໜາດຖັນ

ດັ່ງທີ່ສະແດງຢູ່ໃນຕົວຢ່າງທີ່ຜ່ານມາ, ລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາອະນຸຍາດໃຫ້ທ່ານວາງຈໍານວນ .cols ພາຍໃນ .rowຫຼື .form-row. ພວກມັນຈະແບ່ງຄວາມກວ້າງທີ່ມີຢູ່ໃຫ້ເທົ່າທຽມກັນລະຫວ່າງພວກມັນ. ນອກນັ້ນທ່ານຍັງສາມາດເລືອກເອົາຊຸດຍ່ອຍຂອງຖັນຂອງທ່ານເພື່ອໃຊ້ພື້ນທີ່ຫຼາຍຫຼືຫນ້ອຍ, ໃນຂະນະທີ່ .cols ທີ່ຍັງເຫຼືອແບ່ງສ່ວນທີ່ເຫລືອເທົ່າທຽມກັນ, ດ້ວຍຊັ້ນຄໍລໍາສະເພາະເຊັ່ນ .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>

ຂະໜາດອັດຕະໂນມັດ

ຕົວຢ່າງຂ້າງລຸ່ມນີ້ໃຊ້ flexbox utility ເພື່ອຈັດວາງເນື້ອໃນຢູ່ໃນແນວຕັ້ງແລະການປ່ຽນແປງ .colເພື່ອ .col-autoໃຫ້ຄໍລໍາຂອງເຈົ້າໃຊ້ພື້ນທີ່ຫຼາຍເທົ່າທີ່ຕ້ອງການ. ອີກວິທີຫນຶ່ງ, ຂະຫນາດຖັນຕົວມັນເອງໂດຍອີງໃສ່ເນື້ອໃນ.

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

ຈາກນັ້ນທ່ານສາມາດຣີມິກມັນໄດ້ອີກຄັ້ງດ້ວຍຫ້ອງຮຽນຖັນສະເພາະຂະໜາດ.

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

ແລະແນ່ນອນ ການຄວບຄຸມແບບຟອມທີ່ກໍາຫນົດເອງ ແມ່ນສະຫນັບສະຫນູນ.

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

ແບບຟອມໃນແຖວ

ໃຊ້ .form-inlineຫ້ອງຮຽນເພື່ອສະແດງຊຸດຂອງປ້າຍກຳກັບ, ການຄວບຄຸມແບບຟອມ ແລະປຸ່ມຕ່າງໆໃນແຖວແນວນອນດຽວ. ການຄວບຄຸມແບບຟອມພາຍໃນແບບຟອມ inline ແຕກຕ່າງກັນເລັກນ້ອຍຈາກສະຖານະເລີ່ມຕົ້ນຂອງພວກມັນ.

  • ການ​ຄວບ​ຄຸມ​ແມ່ນ display: flex​, ຍຸບ​ພື້ນ​ທີ່​ສີ​ຂາວ HTML ໃດ​ຫນຶ່ງ​ແລະ​ອະ​ນຸ​ຍາດ​ໃຫ້​ທ່ານ​ເພື່ອ​ສະ​ຫນອງ​ການ​ຄວບ​ຄຸມ​ການ​ຈັດ​ລຽງ​ລໍາ​ດັບ​ທີ່​ມີ ​ຊ່ອງ​ຫວ່າງ ​ແລະ flexbox utilities​.
  • ການຄວບຄຸມແລະກຸ່ມ input ໄດ້ຮັບ width: autoການ override ຄ່າເລີ່ມຕົ້ນ Bootstrap width: 100%.
  • ການຄວບຄຸມ ພຽງແຕ່ປາກົດຢູ່ໃນແຖວຢູ່ໃນຊ່ອງເບິ່ງທີ່ມີຄວາມກວ້າງຢ່າງຫນ້ອຍ 576px ເພື່ອບັນຊີຊ່ອງແຄບໃນອຸປະກອນມືຖື.

ທ່ານອາດຈະຈໍາເປັນຕ້ອງໄດ້ແກ້ໄຂຄວາມກວ້າງແລະການຈັດຕໍາແຫນ່ງຂອງຕົວຄວບຄຸມແບບຟອມສ່ວນບຸກຄົນດ້ວຍ utilities ໄລຍະຫ່າງ (ຕາມຮູບຂ້າງລຸ່ມນີ້). ສຸດທ້າຍ, ໃຫ້ແນ່ໃຈວ່າຈະປະກອບມີ <label>ການຄວບຄຸມແບບຟອມແຕ່ລະຄົນ, ເຖິງແມ່ນວ່າທ່ານຈໍາເປັນຕ້ອງເຊື່ອງມັນຈາກຜູ້ເຂົ້າຊົມທີ່ບໍ່ແມ່ນ screenreader ດ້ວຍ .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>

ການ​ຄວບ​ຄຸມ​ແລະ​ການ​ເລືອກ​ຮູບ​ແບບ​ທີ່​ກໍາ​ນົດ​ເອງ​ຍັງ​ໄດ້​ສະ​ຫນັບ​ສະ​ຫນູນ​.

<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>
ທາງເລືອກເພື່ອປ້າຍທີ່ເຊື່ອງໄວ້

ເທກໂນໂລຍີຊ່ວຍເຫຼືອເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍຈະມີບັນຫາກັບແບບຟອມຂອງທ່ານຖ້າທ່ານບໍ່ໃສ່ປ້າຍຊື່ສໍາລັບທຸກໆວັດສະດຸປ້ອນ. ສໍາລັບແບບຟອມ inline ເຫຼົ່ານີ້, ທ່ານສາມາດເຊື່ອງປ້າຍຊື່ໂດຍໃຊ້ .sr-onlyຊັ້ນ. ມີວິທີການທາງເລືອກເພີ່ມເຕີມຂອງການສະຫນອງປ້າຍສໍາລັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ເຊັ່ນ: aria-label, aria-labelledbyຫຼື titleຄຸນລັກສະນະ. ຖ້າບໍ່ມີສິ່ງເຫຼົ່ານີ້, ເທັກໂນໂລຍີຊ່ວຍເຫຼືອອາດຈະໃຊ້ placeholderຄຸນລັກສະນະດັ່ງກ່າວ, ຖ້າມີ, ແຕ່ຄວນສັງເກດວ່າການໃຊ້ placeholderແທນວິທີການຕິດສະຫຼາກອື່ນໆບໍ່ໄດ້ຖືກແນະ ນຳ.

ຂໍ້ຄວາມຊ່ວຍເຫຼືອ

ຂໍ້ຄວາມຊ່ວຍເຫຼືອລະດັບຕັນໃນຮູບແບບສາມາດຖືກສ້າງຂື້ນໂດຍໃຊ້ .form-text(ໃນເມື່ອກ່ອນເອີ້ນວ່າ .help-blockໃນ v3). ຂໍ້ຄວາມຊ່ວຍເຫຼືອໃນແຖວສາມາດຖືກປະຕິບັດໄດ້ຢ່າງຄ່ອງຕົວໂດຍໃຊ້ອົງປະກອບ HTML ໃນແຖວ ແລະຫ້ອງຮຽນປະໂຫຍດເຊັ່ນ .text-muted.

ການເຊື່ອມໂຍງຂໍ້ຄວາມຊ່ວຍເຫຼືອກັບການຄວບຄຸມແບບຟອມ

ຂໍ້ຄວາມຊ່ວຍເຫຼືອຄວນມີຄວາມກ່ຽວຂ້ອງຢ່າງຊັດເຈນກັບການຄວບຄຸມແບບຟອມທີ່ມັນກ່ຽວຂ້ອງກັບການໃຊ້ aria-describedbyຄຸນສົມບັດ. ນີ້ຈະຮັບປະກັນວ່າເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ຈະປະກາດຂໍ້ຄວາມການຊ່ວຍເຫຼືອນີ້ເມື່ອຜູ້ໃຊ້ສຸມໃສ່ຫຼືເຂົ້າໄປໃນການຄວບຄຸມ.

ຂໍ້​ຄວາມ​ຊ່ວຍ​ເຫຼືອ​ຂ້າງ​ລຸ່ມ​ນີ້​ການ​ປ້ອນ​ຂໍ້​ມູນ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ຈັດ​ຮູບ​ແບບ .form-text. ຊັ້ນຮຽນນີ້ລວມເອົາ display: blockແລະເພີ່ມຂອບເທິງບາງອັນເພື່ອໃຫ້ມີໄລຍະຫ່າງໄດ້ງ່າຍຈາກວັດສະດຸປ້ອນຂ້າງເທິງ.

ລະຫັດຜ່ານຂອງທ່ານຕ້ອງມີຄວາມຍາວ 8-20 ຕົວອັກສອນ, ມີຕົວອັກສອນ ແລະຕົວເລກ, ແລະຈະຕ້ອງບໍ່ມີຍະຫວ່າງ, ຕົວອັກສອນພິເສດ ຫຼື 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>

ຂໍ້ຄວາມໃນແຖວສາມາດໃຊ້ອົງປະກອບ HTML ໃນແຖວປົກກະຕິ (ບໍ່ວ່າຈະເປັນ <small>, <span>, ຫຼືອັນອື່ນ) ໂດຍບໍ່ມີຫຍັງນອກເໜືອໄປຈາກຊັ້ນປະໂຫຍດ.

ຕ້ອງມີຄວາມຍາວ 8-20 ຕົວອັກສອນ.
<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>

ແບບຟອມທີ່ພິການ

ເພີ່ມ disabledຄຸນສົມບັດ boolean ຢູ່ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການໂຕ້ຕອບຂອງຜູ້ໃຊ້ ແລະເຮັດໃຫ້ມັນອ່ອນລົງ.

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

ເພີ່ມ disabledຄຸນສົມບັດໃສ່ a <fieldset>ເພື່ອປິດການຄວບຄຸມທັງໝົດພາຍໃນ.

ຕົວ​ຢ່າງ​ຊ່ອງ​ຂໍ້​ມູນ​ທີ່​ພິ​ການ​
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Caveat ກັບສະມໍ

ຕົວທ່ອງເວັບປະຕິບັດການຄວບຄຸມຮູບແບບພື້ນເມືອງທັງຫມົດ ( <input>, <select>, ແລະ <button>ອົງປະກອບ) ພາຍໃນ <fieldset disabled>ປິດການໃຊ້ງານ, ປ້ອງກັນການໂຕ້ຕອບຂອງແປ້ນພິມແລະຫນູກັບພວກມັນ.

ຢ່າງໃດກໍຕາມ, ຖ້າແບບຟອມຂອງທ່ານປະກອບມີອົງປະກອບທີ່ຄ້າຍຄືປຸ່ມທີ່ກໍາຫນົດເອງເຊັ່ນ: <a ... class="btn btn-*">, ເຫຼົ່ານີ້ຈະໄດ້ຮັບພຽງແຕ່ຮູບແບບ pointer-events: none. ດັ່ງທີ່ບັນທຶກໄວ້ໃນພາກສ່ວນກ່ຽວກັບ ສະຖານະປິດການໃຊ້ງານສໍາລັບປຸ່ມຕ່າງໆ (ແລະໂດຍສະເພາະໃນພາກຍ່ອຍສໍາລັບອົງປະກອບສະມໍ), ຄຸນສົມບັດ CSS ນີ້ຍັງບໍ່ທັນໄດ້ມາດຕະຖານແລະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໃນ Internet Explorer 10. ການຄວບຄຸມທີ່ອີງໃສ່ສະມໍຍັງຈະຍັງຄົງຢູ່. ໂຟກັສ ແລະສາມາດໃຊ້ງານໄດ້ໂດຍໃຊ້ແປ້ນພິມ. ທ່ານຕ້ອງແກ້ໄຂການຄວບຄຸມເຫຼົ່ານີ້ດ້ວຍຕົນເອງໂດຍການເພີ່ມ tabindex="-1"ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການສຸມໃສ່ແລະ aria-disabled="disabled"ເປັນສັນຍານຂອງລັດຂອງເຂົາເຈົ້າກັບເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ.

ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ

ໃນ​ຂະ​ນະ​ທີ່ Bootstrap ຈະ​ນໍາ​ໃຊ້​ຮູບ​ແບບ​ເຫຼົ່າ​ນີ້​ໃນ​ທຸກ​ຕົວ​ທ່ອງ​ເວັບ, Internet Explorer 11 ແລະ​ຂ້າງ​ລຸ່ມ​ນີ້​ບໍ່​ໄດ້​ສະ​ຫນັບ​ສະ​ຫນູນ​ຢ່າງ​ເຕັມ​ທີ່ disabled​ຄຸນ​ລັກ​ສະ​ນະ​ໃນ <fieldset>. ໃຊ້ JavaScript ແບບກຳນົດເອງເພື່ອປິດການນຳໃຊ້ຊ່ອງຂໍ້ມູນໃນໂປຣແກຣມທ່ອງເວັບເຫຼົ່ານີ້.

ການກວດສອບ

ໃຫ້ຄໍາຄິດເຫັນທີ່ມີຄຸນຄ່າ, ສາມາດປະຕິບັດໄດ້ກັບຜູ້ໃຊ້ຂອງທ່ານດ້ວຍການກວດສອບແບບຟອມ HTML5 - ມີຢູ່ໃນທຸກຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນຂອງພວກເຮົາ . ເລືອກຈາກຄໍາຕິຊົມໃນການກວດສອບຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ, ຫຼືປະຕິບັດຂໍ້ຄວາມແບບກໍານົດເອງກັບຫ້ອງຮຽນຂອງພວກເຮົາແລະ JavaScript ເລີ່ມຕົ້ນ.

ພວກເຮົາຮູ້ວ່າໃນປັດຈຸບັນຮູບແບບການກວດສອບແບບກຳນົດເອງຂອງຝ່າຍລູກຄ້າແລະຄໍາແນະນໍາເຄື່ອງມືແມ່ນບໍ່ສາມາດເຂົ້າເຖິງໄດ້, ເພາະວ່າພວກມັນບໍ່ຖືກເປີດເຜີຍກັບເຕັກໂນໂລຢີຊ່ວຍເຫຼືອ. ໃນຂະນະທີ່ພວກເຮົາເຮັດວຽກຢູ່ໃນການແກ້ໄຂ, ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ທາງເລືອກຂ້າງເຊີບເວີຫຼືວິທີການກວດສອບຕົວທ່ອງເວັບເລີ່ມຕົ້ນ.

ມັນເຮັດວຽກແນວໃດ

ນີ້ແມ່ນວິທີການກວດສອບແບບຟອມເຮັດວຽກກັບ Bootstrap:

  • ການກວດສອບແບບຟອມ HTML ຖືກນຳໃຊ້ຜ່ານ CSS's two pseudo-classes, :invalidແລະ :valid. ມັນໃຊ້ກັບ <input>, <select>, ແລະ <textarea>ອົງປະກອບ.
  • Bootstrap ກຳນົດຂອບເຂດ :invalidແລະ :validຮູບແບບຕ່າງໆໃຫ້ກັບຊັ້ນແມ່ .was-validated, ໂດຍປົກກະຕິແລ້ວໃຊ້ກັບ <form>. ຖ້າບໍ່ດັ່ງນັ້ນ, ຊ່ອງຂໍ້ມູນທີ່ຕ້ອງການທີ່ບໍ່ມີຄ່າຈະສະແດງວ່າບໍ່ຖືກຕ້ອງໃນການໂຫຼດຫນ້າ. ດ້ວຍວິທີນີ້, ເຈົ້າອາດຈະເລືອກເວລາທີ່ຈະເປີດໃຊ້ພວກມັນ (ໂດຍປົກກະຕິແລ້ວ ຫຼັງຈາກການຍື່ນແບບຟອມຖືກພະຍາຍາມ).
  • ເພື່ອປັບຮູບລັກສະນະຂອງແບບຟອມ (ຕົວຢ່າງ, ໃນກໍລະນີຂອງການຍື່ນສະເຫນີແບບຟອມແບບເຄື່ອນໄຫວໂດຍໃຊ້ AJAX), ເອົາ .was-validatedຊັ້ນອອກຈາກ <form>ອີກເທື່ອຫນຶ່ງຫຼັງຈາກການຍື່ນສະເຫນີ.
  • ໃນ​ຖາ​ນະ​ເປັນ​ການ​ຫຼຸດ​ລົງ​, .is-invalidແລະ .is-valid​ຫ້ອງ​ຮຽນ​ອາດ​ຈະ​ຖືກ​ນໍາ​ໃຊ້​ແທນ​ທີ່​ຈະ​ເປັນ pseudo​-class ສໍາ​ລັບ​ການ ​ກວດ​ສອບ​ຂ້າງ​ເຊີ​ເວີ . ພວກເຂົາບໍ່ຕ້ອງການ .was-validatedຫ້ອງຮຽນພໍ່ແມ່.
  • ເນື່ອງຈາກຂໍ້ຈໍາກັດໃນວິທີການເຮັດວຽກຂອງ CSS, ພວກເຮົາບໍ່ສາມາດ (ໃນປະຈຸບັນ) ນໍາໃຊ້ຮູບແບບຕ່າງໆກັບຮູບແບບ <label>ທີ່ມາກ່ອນການຄວບຄຸມແບບຟອມໃນ DOM ໂດຍບໍ່ມີການຊ່ວຍເຫຼືອຂອງ JavaScript ແບບກໍານົດເອງ.
  • ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດສະຫນັບສະຫນູນ API ການກວດສອບຂໍ້ຈໍາກັດ , ຊຸດຂອງວິທີການ JavaScript ສໍາລັບການກວດສອບການຄວບຄຸມແບບຟອມ.
  • ຂໍ້ຄວາມຄໍາຕິຊົມອາດຈະນໍາໃຊ້ ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ (ທີ່ແຕກຕ່າງກັນສໍາລັບແຕ່ລະຕົວທ່ອງເວັບ, ແລະ unstylable ຜ່ານ CSS) ຫຼືຮູບແບບຄໍາຕິຊົມທີ່ກໍາຫນົດເອງຂອງພວກເຮົາກັບ HTML ແລະ CSS ເພີ່ມເຕີມ.
  • ເຈົ້າອາດຈະໃຫ້ຂໍ້ຄວາມທີ່ຖືກຕ້ອງຕາມກຳນົດເອງ setCustomValidityໃນ JavaScript.

ດ້ວຍສິ່ງນັ້ນຢູ່ໃນໃຈ, ພິຈາລະນາການສາທິດຕໍ່ໄປນີ້ສໍາລັບຮູບແບບການກວດສອບແບບຟອມທີ່ກໍານົດເອງຂອງພວກເຮົາ, ຫ້ອງຮຽນທາງເລືອກຂອງເຊີບເວີ, ແລະຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ.

ຮູບແບບທີ່ກໍາຫນົດເອງ

ສໍາລັບຂໍ້ຄວາມການກວດສອບແບບຟອມ Bootstrap ແບບກຳນົດເອງ, ທ່ານຈະຕ້ອງເພີ່ມ novalidateຄຸນສົມບັດ boolean ໃສ່ <form>. ອັນນີ້ປິດການໃຊ້ງານຄໍາແນະນໍາເຄື່ອງມືຄໍາຕິຊົມເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ, ແຕ່ຍັງໃຫ້ການເຂົ້າເຖິງ APIs ການກວດສອບແບບຟອມໃນ JavaScript. ພະຍາຍາມສົ່ງແບບຟອມຂ້າງລຸ່ມນີ້; JavaScript ຂອງພວກເຮົາຈະຂັດຂວາງປຸ່ມສົ່ງແລະສົ່ງຄໍາຕິຊົມໄປຫາທ່ານ. ເມື່ອພະຍາຍາມສົ່ງ, ທ່ານຈະເຫັນ ຮູບແບບ :invalidແລະ :validຮູບແບບທີ່ນຳໃຊ້ກັບການຄວບຄຸມແບບຟອມຂອງທ່ານ.

ຮູບແບບການຕິຊົມແບບກຳນົດເອງນຳໃຊ້ສີແບບກຳນົດເອງ, ຂອບ, ຮູບແບບໂຟກັສ, ແລະໄອຄອນພື້ນຫຼັງເພື່ອສື່ສານຄຳຕິຊົມໄດ້ດີຂຶ້ນ. ໄອຄອນພື້ນຫຼັງສຳລັບ <select>s ສາມາດໃຊ້ໄດ້ກັບ .custom-select, ແລະບໍ່ແມ່ນ .form-control.

ເບິ່ງດີ!
ເບິ່ງດີ!
ກະລຸນາລະບຸເມືອງທີ່ຖືກຕ້ອງ.
ກະລຸນາເລືອກສະຖານະທີ່ຖືກຕ້ອງ.
ກະລຸນາລະບຸ zip ທີ່ຖືກຕ້ອງ.
ທ່ານຕ້ອງຕົກລົງເຫັນດີກ່ອນທີ່ຈະສົ່ງ.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ

ບໍ່ສົນໃຈຂໍ້ຄວາມຄໍາຄຶດຄໍາເຫັນທີ່ກໍານົດເອງຫຼືຂຽນ JavaScript ເພື່ອປ່ຽນພຶດຕິກໍາແບບຟອມບໍ? ທັງຫມົດທີ່ດີ, ທ່ານສາມາດນໍາໃຊ້ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ. ລອງສົ່ງແບບຟອມຂ້າງລຸ່ມນີ້. ອີງຕາມຕົວທ່ອງເວັບແລະ OS ຂອງທ່ານ, ທ່ານຈະເຫັນຮູບແບບຂອງຄໍາຄິດເຫັນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ.

ໃນຂະນະທີ່ຮູບແບບຄໍາຕິຊົມເຫຼົ່ານີ້ບໍ່ສາມາດຖືກຈັດຮູບແບບດ້ວຍ CSS, ທ່ານຍັງສາມາດປັບແຕ່ງຂໍ້ຄວາມຄໍາຕິຊົມຜ່ານ JavaScript ໄດ້.

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

ດ້ານເຊີບເວີ

ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ການກວດສອບດ້ານລູກຄ້າ, ແຕ່ໃນກໍລະນີທີ່ທ່ານຕ້ອງການການກວດສອບດ້ານເຊີຟເວີ, ທ່ານສາມາດລະບຸຊ່ອງຂໍ້ມູນແບບຟອມທີ່ບໍ່ຖືກຕ້ອງແລະຖືກຕ້ອງກັບ .is-invalidແລະ .is-valid. ໃຫ້ສັງເກດວ່າ .invalid-feedbackຍັງໄດ້ຮັບການສະຫນັບສະຫນູນກັບຫ້ອງຮຽນເຫຼົ່ານີ້.

ສໍາລັບຊ່ອງຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງ, ໃຫ້ແນ່ໃຈວ່າຄໍາຕິຊົມທີ່ບໍ່ຖືກຕ້ອງ / ຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດຖືກເຊື່ອມໂຍງກັບຊ່ອງຂໍ້ມູນແບບຟອມທີ່ກ່ຽວຂ້ອງໂດຍໃຊ້ aria-describedby. ຄຸນ​ລັກ​ສະ​ນະ​ນີ້​ອະ​ນຸ​ຍາດ​ໃຫ້​ຫຼາຍ​ກ​່​ວາ​ຫນຶ່ງ id​ທີ່​ຈະ​ອ້າງ​ອີງ​, ໃນ​ກໍ​ລະ​ນີ​ທີ່​ພາກ​ສະ​ຫນາມ​ໄດ້​ຊີ້​ໄປ​ຫາ​ຂໍ້​ຄວາມ​ຮູບ​ແບບ​ເພີ່ມ​ເຕີມ​.

ເບິ່ງດີ!
ເບິ່ງດີ!
ກະລຸນາລະບຸເມືອງທີ່ຖືກຕ້ອງ.
ກະລຸນາເລືອກສະຖານະທີ່ຖືກຕ້ອງ.
ກະລຸນາລະບຸ zip ທີ່ຖືກຕ້ອງ.
ທ່ານຕ້ອງຕົກລົງເຫັນດີກ່ອນທີ່ຈະສົ່ງ.
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

ອົງປະກອບທີ່ສະຫນັບສະຫນູນ

ຮູບແບບການກວດສອບສາມາດໃຊ້ໄດ້ສໍາລັບການຄວບຄຸມແບບຟອມຕໍ່ໄປນີ້ ແລະອົງປະກອບ:

  • <input>s ແລະ <textarea>s ກັບ.form-control
  • <select>s ກັບ .form-controlຫຼື.custom-select
  • .form-check
  • .custom-checkboxs ແລະ .custom-radios
  • .custom-file
ກະລຸນາໃສ່ຂໍ້ຄວາມໃນ textarea.
ຕົວຢ່າງຂໍ້ຄວາມຄໍາຕິຊົມທີ່ບໍ່ຖືກຕ້ອງ
ຕົວຢ່າງເພີ່ມເຕີມຂໍ້ຄວາມຄໍາຕິຊົມທີ່ບໍ່ຖືກຕ້ອງ
ຕົວຢ່າງການຕິຊົມທີ່ເລືອກແບບກຳນົດເອງບໍ່ຖືກຕ້ອງ
ຕົວຢ່າງການຕິຊົມໄຟລ໌ແບບກຳນົດເອງບໍ່ຖືກຕ້ອງ
@
ຕົວຢ່າງຄໍາຕິຊົມຂອງກຸ່ມການປ້ອນຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງ
ຕົວຢ່າງຄໍາຕິຊົມຂອງກຸ່ມການປ້ອນຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງ
ຕົວຢ່າງຄໍາຕິຊົມຂອງກຸ່ມການປ້ອນຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງ
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

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

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

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

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

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

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

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

ຄຳແນະນຳ

ຖ້າຮູບແບບແບບຟອມຂອງທ່ານອະນຸຍາດໃຫ້ມັນ, ທ່ານສາມາດແລກປ່ຽນບົດ .{valid|invalid}-feedbackຮຽນສໍາລັບ .{valid|invalid}-tooltipຊັ້ນຮຽນເພື່ອສະແດງຄໍາຄຶດຄໍາເຫັນກ່ຽວກັບຄວາມຖືກຕ້ອງໃນຄໍາແນະນໍາທີ່ມີຮູບແບບ. ໃຫ້ແນ່ໃຈວ່າມີພໍ່ແມ່ position: relativeຢູ່ກັບມັນສໍາລັບການວາງຕໍາແຫນ່ງຄໍາແນະນໍາ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ຫ້ອງຮຽນຖັນຂອງພວກເຮົາມີອັນນີ້ຢູ່ແລ້ວ, ແຕ່ໂຄງການຂອງທ່ານອາດຈະຕ້ອງການການຕັ້ງຄ່າທາງເລືອກ.

ເບິ່ງດີ!
ເບິ່ງດີ!
ກະລຸນາລະບຸເມືອງທີ່ຖືກຕ້ອງ.
ກະລຸນາເລືອກສະຖານະທີ່ຖືກຕ້ອງ.
ກະລຸນາລະບຸ zip ທີ່ຖືກຕ້ອງ.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

ປັບແຕ່ງ

ສະຖານະການກວດສອບສາມາດປັບແຕ່ງຜ່ານ Sass ດ້ວຍ $form-validation-statesແຜນທີ່. ຕັ້ງຢູ່ໃນ _variables.scssໄຟລ໌ຂອງພວກເຮົາ, ແຜນທີ່ Sass ນີ້ຖືກ looped ເພື່ອສ້າງຄ່າເລີ່ມຕົ້ນ valid/invalid ການ ກວດສອບ. ລວມມີແຜນທີ່ທີ່ຊ້ອນກັນເພື່ອປັບແຕ່ງສີ ແລະໄອຄອນຂອງແຕ່ລະລັດ. ໃນຂະນະທີ່ບໍ່ມີລັດອື່ນໄດ້ຮັບການສະຫນັບສະຫນູນຈາກຕົວທ່ອງເວັບ, ຜູ້ທີ່ໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ກໍານົດເອງສາມາດເພີ່ມຄໍາຄຶດຄໍາເຫັນແບບຟອມທີ່ສັບສົນຫຼາຍ.

ກະລຸນາຮັບຊາບວ່າພວກເຮົາບໍ່ແນະນໍາໃຫ້ປັບແຕ່ງຄ່າເຫຼົ່ານີ້ໂດຍບໍ່ມີການດັດແກ້form-validation-state mixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

ການກວດສອບການປ້ອນຂໍ້ມູນກຸ່ມ

ເພື່ອກວດຫາອົງປະກອບໃດທີ່ຕ້ອງການມຸມມົນພາຍໃນກຸ່ມປ້ອນຂໍ້ມູນທີ່ມີການກວດສອບ, ກຸ່ມປ້ອນຂໍ້ມູນຕ້ອງການເພີ່ມເຕີມ.has-validation ຫ້ອງຮຽນເພີ່ມເຕີມ.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
ກະລຸນາເລືອກຊື່ຜູ້ໃຊ້.

ແບບຟອມທີ່ກໍາຫນົດເອງ

ສໍາລັບການປັບແຕ່ງເພີ່ມເຕີມແລະຄວາມສອດຄ່ອງຂອງຕົວທ່ອງເວັບຂ້າມ, ໃຊ້ອົງປະກອບແບບຟອມທີ່ກໍາຫນົດເອງຢ່າງສົມບູນຂອງພວກເຮົາເພື່ອທົດແທນຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ. ພວກມັນຖືກສ້າງຂື້ນຢູ່ເທິງສຸດຂອງ markup semantic ແລະສາມາດເຂົ້າເຖິງໄດ້, ດັ່ງນັ້ນພວກມັນເປັນການທົດແທນທີ່ແຂງສໍາລັບການຄວບຄຸມແບບຟອມເລີ່ມຕົ້ນ.

ກ່ອງກວດ ແລະວິທະຍຸ

ແຕ່ລະ checkbox ແລະວິທະຍຸ <input>ແລະ <label>ການຈັບຄູ່ແມ່ນຫໍ່ຢູ່ໃນ <div>ເພື່ອສ້າງການຄວບຄຸມທີ່ກໍາຫນົດເອງຂອງພວກເຮົາ. ຕາມໂຄງສ້າງ, ນີ້ແມ່ນວິທີການດຽວກັນກັບຄ່າເລີ່ມຕົ້ນຂອງພວກເຮົາ .form-check.

ພວກເຮົາໃຊ້ຕົວເລືອກອ້າຍເອື້ອຍນ້ອງ ( ~) ສໍາລັບທຸກ <input>ລັດຂອງພວກເຮົາ—ເຊັ່ນ :checked—ເພື່ອຈັດຮູບແບບຕົວຊີ້ບອກແບບຟອມແບບກຳນົດເອງຂອງພວກເຮົາໃຫ້ຖືກຕ້ອງ. ເມື່ອລວມເຂົ້າກັບ .custom-control-labelຫ້ອງຮຽນ, ພວກເຮົາຍັງສາມາດຈັດຮູບແບບຂໍ້ຄວາມສໍາລັບແຕ່ລະລາຍການໂດຍອີງໃສ່ສະ <input>ຖານະຂອງ.

ພວກ​ເຮົາ​ເຊື່ອງ​ຄ່າ​ເລີ່ມ​ຕົ້ນ <input>​ທີ່​ມີ opacity​ແລະ​ນໍາ​ໃຊ້ .custom-control-label​ເພື່ອ​ສ້າງ​ຕົວ​ຊີ້​ວັດ​ຮູບ​ແບບ​ທີ່​ກໍາ​ນົດ​ເອງ​ໃຫມ່​ໃນ​ສະ​ຖານ​ທີ່​ຂອງ​ຕົນ​ກັບ ::before​ແລະ ::after. ແຕ່ຫນ້າເສຍດາຍ, ພວກເຮົາບໍ່ສາມາດສ້າງແບບກໍານົດເອງຈາກພຽງແຕ່ <input>ເນື່ອງຈາກວ່າ CSS ຂອງcontent ບໍ່ໄດ້ເຮັດວຽກຢູ່ໃນອົງປະກອບນັ້ນ.

ຢູ່ໃນສະຖານະທີ່ກວດສອບແລ້ວ, ພວກເຮົາໃຊ້ ໄອຄອນ SVG ຝັງ base64 ຈາກ Open Iconic . ອັນນີ້ໃຫ້ພວກເຮົາມີການຄວບຄຸມທີ່ດີທີ່ສຸດສໍາລັບການຄໍເຕົ້າໄຂ່ທີ່ແລະການຈັດຕໍາແຫນ່ງໃນທົ່ວຕົວທ່ອງເວັບແລະອຸປະກອນ.

ປ່ອງໝາຍ

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

ກ່ອງເຊັກແບບກຳນົດເອງຍັງສາມາດໃຊ້ :indeterminatepseudo class ເມື່ອຕັ້ງດ້ວຍຕົນເອງຜ່ານ JavaScript (ບໍ່ມີຄຸນລັກສະນະ HTML ທີ່ມີຢູ່ສໍາລັບການລະບຸມັນ).

ຖ້າທ່ານກໍາລັງໃຊ້ jQuery, ບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້ຄວນຈະພຽງພໍ:

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

ວິທະຍຸ

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

ໃນແຖວ

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

ຄົນພິການ

ກ່ອງໝາຍ ແລະວິທະຍຸແບບກຳນົດເອງຍັງສາມາດຖືກປິດການນຳໃຊ້ໄດ້. ເພີ່ມ disabledຄຸນສົມບັດ boolean ໃສ່ <input>ຕົວຊີ້ບອກ ແລະລາຍລະອຽດປ້າຍກຳກັບຈະຖືກຈັດຮູບແບບອັດຕະໂນມັດ.

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

ສະວິດ

ສະວິດມີເຄື່ອງໝາຍຂອງກ່ອງກາໝາຍແບບກຳນົດເອງ ແຕ່ໃຊ້ .custom-switchຊັ້ນເພື່ອສະແດງສະຫຼັບສະຫຼັບ. ສະວິດຍັງສະຫນັບສະຫນູນ disabledຄຸນລັກສະນະ.

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

ເລືອກເມນູ

<select>ເມນູແບບກຳນົດເອງຕ້ອງການພຽງແຕ່ຫ້ອງຮຽນແບບກຳນົດເອງ, ເພື່ອ .custom-selectກະຕຸ້ນຮູບແບບການກຳນົດເອງ. ຮູບແບບກຳນົດເອງຖືກຈຳກັດໃຫ້ <select>ມີລັກສະນະເບື້ອງຕົ້ນ ແລະບໍ່ສາມາດແກ້ໄຂໄດ້ <option>ເນື່ອງຈາກຂໍ້ຈຳກັດຂອງບຣາວເຊີ.

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

ເຈົ້າອາດຈະເລືອກຈາກການເລືອກແບບກຳນົດເອງຂະໜາດນ້ອຍ ແລະຂະໜາດໃຫຍ່ເພື່ອໃຫ້ກົງກັບຂະໜາດຕົວໜັງສືຂອງພວກເຮົາ.

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

ຄຸນ​ລັກ ​ສະ multiple​ນະ​ຍັງ​ໄດ້​ສະ​ຫນັບ​ສະ​ຫນູນ​:

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

ດັ່ງ​ທີ່​ເປັນ size​ຄຸນ​ລັກ​ສະ​ນະ​:

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

ຊ່ວງ

ສ້າງ <input type="range">ການຄວບຄຸມທີ່ກໍາຫນົດເອງດ້ວຍ .custom-range. ຕິດຕາມ (ພື້ນຫລັງ) ແລະຫົວໂປ້ (ຄ່າ) ທັງສອງຖືກຈັດຮູບແບບໃຫ້ປາກົດຄືກັນໃນທົ່ວຕົວທ່ອງເວັບ. ຍ້ອນວ່າພຽງແຕ່ IE ແລະ Firefox ສະຫນັບສະຫນູນ "ຕື່ມ" ຕິດຕາມຂອງພວກເຂົາຈາກຊ້າຍຫຼືຂວາຂອງໂປ້ມືເພື່ອຊີ້ໃຫ້ເຫັນເຖິງຄວາມກ້າວຫນ້າ, ພວກເຮົາບໍ່ໄດ້ສະຫນັບສະຫນູນມັນ.

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

ໄລຍະການປ້ອນຂໍ້ມູນມີຄ່າ implicit ສໍາລັບ minແລະ max0ແລະ 100, ຕາມລໍາດັບ. ທ່ານອາດຈະກໍານົດຄ່າໃຫມ່ສໍາລັບຜູ້ທີ່ໃຊ້ minແລະ maxຄຸນລັກສະນະຕ່າງໆ.

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, ໄລຍະການປ້ອນຂໍ້ມູນ “snap” ໄປຫາຄ່າຈຳນວນເຕັມ. ເພື່ອປ່ຽນອັນນີ້, ທ່ານສາມາດລະບຸ stepຄ່າໄດ້. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາເພີ່ມຈໍານວນຂັ້ນຕອນສອງເທົ່າໂດຍໃຊ້ step="0.5".

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

ຕົວທ່ອງເວັບຂອງໄຟລ໌

ປັ໊ກອິນທີ່ແນະນຳເພື່ອເຮັດການປ້ອນຂໍ້ມູນໄຟລ໌ແບບກຳນົດເອງ: bs-custom-file-input , ນັ້ນແມ່ນສິ່ງທີ່ພວກເຮົາກຳລັງໃຊ້ຢູ່ໃນເອກະສານຂອງ��ວກເຮົາ.

ການ​ປ້ອນ​ຂໍ້​ມູນ​ໄຟລ​໌​ແມ່ນ gnarly ທີ່​ສຸດ​ຂອງ​ກຸ່ມ​ແລະ​ຮຽກ​ຮ້ອງ​ໃຫ້​ມີ JavaScript ເພີ່ມ​ເຕີມ​ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ​ເຊື່ອມ​ຕໍ່​ກັບ​ການ ​ເລືອກ​ໄຟລ​໌​ທີ່​ເປັນ​ປະ​ໂຫຍດ ... ແລະ​ຂໍ້​ຄວາມ​ຊື່​ໄຟລ​໌​ທີ່​ເລືອກ​.

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

ພວກເຮົາເຊື່ອງໄຟລ໌ເລີ່ມຕົ້ນ <input>ໂດຍຜ່ານ opacityແລະແທນທີ່ຮູບແບບ <label>. ປຸ່ມໄດ້ຖືກສ້າງຂື້ນແລະຈັດຕໍາແຫນ່ງດ້ວຍ ::after. ສຸດທ້າຍ, ພວກເຮົາປະກາດ a widthແລະ heighton the<input> ໄລຍະຫ່າງທີ່ເຫມາະສົມສໍາລັບເນື້ອຫາອ້ອມຂ້າງ.

ການແປ ຫຼືປັບແຕ່ງສະຕຣິງດ້ວຍ SCSS

ປະ :lang()ເພດ pseudo-class ແມ່ນໃຊ້ເພື່ອອະນຸຍາດໃຫ້ແປຂໍ້ຄວາມ "Browse" ເປັນພາສາອື່ນໆ. ລົບລ້າງ ຫຼືເພີ່ມລາຍການໃສ່ $custom-file-textຕົວແປ Sass ດ້ວຍ ແທັກພາສາ ທີ່ກ່ຽວຂ້ອງ ແລະສະຕຣິງທີ່ຖືກແປ. ສາຍພາສາອັງກິດສາມາດປັບແຕ່ງໄດ້ຄືກັນ. ຕົວຢ່າງ, ນີ້ແມ່ນວິທີທີ່ຄົນຫນຶ່ງອາດຈະເພີ່ມການແປພາສາແອສປາໂຍນ (ລະຫັດພາສາສະເປນແມ່ນ es):

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

ນີ້ແມ່ນ lang(es)ການປະຕິບັດກ່ຽວກັບການປ້ອນໄຟລ໌ແບບກຳນົດເອງສຳລັບການແປພາສາແອສປາໂຍນ:

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

ທ່ານຈະຕ້ອງຕັ້ງພາສາຂອງເອກະສານຂອງເຈົ້າ (ຫຼືຕົ້ນໄມ້ຍ່ອຍຂອງມັນ) ຢ່າງຖືກຕ້ອງເພື່ອໃຫ້ຂໍ້ຄວາມທີ່ຖືກຕ້ອງຖືກສະແດງ. ນີ້ສາມາດເຮັດໄດ້ໂດຍໃຊ້ ຄຸນລັກສະນະ ຂອງlang ອົງ <html>ປະກອບຫຼື Content-LanguageHTTP header , ໃນບັນດາວິທີການອື່ນໆ.

ການແປ ຫຼືປັບແຕ່ງສະຕຣິງດ້ວຍ HTML

Bootstrap ຍັງໃຫ້ວິທີການແປຂໍ້ຄວາມ "Browse" ໃນ HTML ດ້ວຍ data-browseຄຸນລັກສະນະທີ່ສາມາດເພີ່ມໃສ່ປ້າຍຊື່ທີ່ກໍາຫນົດເອງ (ຕົວຢ່າງໃນພາສາດັດ):

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