ແບບຟອມ

ພາບລວມ

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

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

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

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

ຮູບແບບຂໍ້ຄວາມ

ຂໍ້ຄວາມແບບຟອມລະດັບ Block ຫຼືລະດັບ inline ສາມາດສ້າງໄດ້ໂດຍໃຊ້ .form-text.

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

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

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

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

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

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

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

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

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

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <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>

ການເຂົ້າເຖິງ

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

ສໍາລັບສະຖານະການທີ່ມັນບໍ່ສາມາດທີ່ຈະລວມເອົາ <label>ເນື້ອໃນຂໍ້ຄວາມທີ່ເຫັນໄດ້ຫຼືເຫມາະສົມ, ມີວິທີທາງເລືອກທີ່ຍັງຄົງໃຫ້ຊື່ທີ່ສາມາດເຂົ້າເຖິງໄດ້, ເຊັ່ນ:

• <label>ອົງປະກອບທີ່ເຊື່ອງໄວ້ໂດຍໃຊ້ .visually-hiddenຫ້ອງຮຽນ
• ຊີ້ໃຫ້ເຫັນເຖິງອົງປະກອບທີ່ມີຢູ່ແລ້ວທີ່ສາມາດເຮັດຫນ້າທີ່ເປັນປ້າຍຊື່ໂດຍໃຊ້aria-labelledby
• ການສະຫນອງ titleຄຸນລັກສະນະ
• ການຕັ້ງຊື່ທີ່ເຂົ້າເຖິງໄດ້ຢ່າງຊັດເຈນໃນອົງປະກອບໂດຍໃຊ້aria-label

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

ໃນຂະນະທີ່ການນໍາໃຊ້ເນື້ອຫາທີ່ເຊື່ອງໄວ້ທາງສາຍຕາ ( .visually-hidden, aria-label, ແລະແມ້ກະທັ້ງ placeholderເນື້ອຫາ, ເຊິ່ງຫາຍໄປເມື່ອພາກສະຫນາມແບບຟອມມີເນື້ອຫາ) ຈະເປັນປະໂຫຍດຕໍ່ຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ການຂາດຂໍ້ຄວາມປ້າຍຊື່ທີ່ສັງເກດເຫັນອາດຈະຍັງເປັນບັນຫາສໍາລັບຜູ້ໃຊ້ບາງຄົນ. ບາງຮູບແບບຂອງປ້າຍທີ່ສັງເກດເຫັນໂດຍທົ່ວໄປແມ່ນວິທີການທີ່ດີທີ່ສຸດ, ທັງສໍາລັບການເຂົ້າເຖິງແລະການນໍາໃຊ້.

ຊາສ

ຕົວແປແບບຟອມຈໍານວນຫຼາຍຖືກກໍານົດຢູ່ໃນລະດັບທົ່ວໄປທີ່ຈະນໍາໃຊ້ຄືນໃຫມ່ແລະຂະຫຍາຍໂດຍອົງປະກອບແບບຟອມສ່ວນບຸກຄົນ. $input-btn-*ທ່ານຈະເຫັນ ຕົວ ແປ ເຫຼົ່ານີ້ເລື້ອຍໆ $input-*.

ຕົວແປ

$input-btn-*ຕົວແປແມ່ນແບ່ງປັນຕົວແປທົ່ວໂລກລະຫວ່າງ ປຸ່ມ ຂອງພວກເຮົາແລະອົງປະກອບແບບຟອມຂອງພວກເຮົາ. ເຈົ້າຈະພົບເຫັນສິ່ງເຫຼົ່ານີ້ຖືກມອບໝາຍຄືນເລື້ອຍໆເປັນຄ່າໃຫ້ກັບຕົວແປສະເພາະອົງປະກອບອື່ນໆ.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;