ແບບຟອມ
ຕົວຢ່າງແລະຄໍາແນະນໍາການນໍາໃຊ້ສໍາລັບຮູບແບບການຄວບຄຸມແບບຟອມ, ທາງເລືອກການຈັດວາງ, ແລະອົງປະກອບທີ່ກໍາຫນົດເອງສໍາລັບການສ້າງຮູບແບບທີ່ຫລາກຫລາຍ.
ພາບລວມ
ການຄວບຄຸມແບບຟອມຂອງ 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
.
ການເຊື່ອມໂຍງຂໍ້ຄວາມແບບຟອມກັບການຄວບຄຸມແບບຟອມ
ຂໍ້ຄວາມແບບຟອມຄວນຈະຖືກກ່ຽວພັນຢ່າງຈະແຈ້ງກັບການຄວບຄຸມແບບຟອມທີ່ມັນກ່ຽວຂ້ອງກັບການໃຊ້ aria-describedby
ຄຸນສົມບັດ. ນີ້ຈະຮັບປະກັນວ່າເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ຈະປະກາດຂໍ້ຄວາມແບບຟອມນີ້ເມື່ອຜູ້ໃຊ້ສຸມໃສ່ຫຼືເຂົ້າໄປໃນການຄວບຄຸມ.
ຂໍ້ຄວາມແບບຟອມຂ້າງລຸ່ມນີ້ການປ້ອນຂໍ້ມູນສາມາດຖືກຈັດຮູບແບບດ້ວຍ .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
ເນື້ອຫາ, ເຊິ່ງຫາຍໄປເມື່ອພາກສະຫນາມແບບຟອມມີເນື້ອຫາ) ຈະເປັນປະໂຫຍດຕໍ່ຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ການຂາດຂໍ້ຄວາມປ້າຍຊື່ທີ່ສັງເກດເຫັນອາດຈະຍັງເປັນບັນຫາສໍາລັບຜູ້ໃຊ້ບາງຄົນ. ບາງຮູບແບບຂອງປ້າຍທີ່ສັງເກດເຫັນໂດຍທົ່ວໄປແມ່ນວິທີການທີ່ດີທີ່ສຸດ, ທັງສໍາລັບການເຂົ້າເຖິງແລະການນໍາໃຊ້.
ຊາສ
ຕົວແປແບບຟອມຈໍານວນຫຼາຍຖືກກໍານົດຢູ່ໃນລະດັບທົ່ວໄປທີ່ຈະນໍາໃຊ້ຄືນໃຫມ່ແລະຂະຫຍາຍໂດຍອົງປະກອບແບບຟອມສ່ວນບຸກຄົນ. $btn-input-*
ທ່ານຈະເຫັນ ຕົວ ແປ ເຫຼົ່ານີ້ເລື້ອຍໆ $input-*
.
ຕົວແປ
$btn-input-*
ຕົວແປແມ່ນແບ່ງປັນຕົວແປທົ່ວໂລກລະຫວ່າງ ປຸ່ມ ຂອງພວກເຮົາແລະອົງປະກອບແບບຟອມຂອງພວກເຮົາ. ເຈົ້າຈະພົບເຫັນສິ່ງເຫຼົ່ານີ້ຖືກມອບໝາຍຄືນເລື້ອຍໆເປັນຄ່າໃຫ້ກັບຕົວແປສະເພາະອົງປະກອບອື່ນໆ.
$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;