in English
ກຸ່ມປ້ອນຂໍ້ມູນ
ຂະຫຍາຍການຄວບຄຸມແບບຟອມໄດ້ຢ່າງງ່າຍດາຍໂດຍການເພີ່ມຂໍ້ຄວາມ, ປຸ່ມ, ຫຼືກຸ່ມປຸ່ມຢູ່ດ້ານຂ້າງຂອງວັດສະດຸປ້ອນຂໍ້ຄວາມ, ການເລືອກແບບກຳນົດເອງ, ແລະການປ້ອນໄຟລ໌ແບບກຳນົດເອງ.
ຕົວຢ່າງພື້ນຖານ
ວາງຫນຶ່ງສ່ວນເສີມຫຼືປຸ່ມໃສ່ສອງຂ້າງຂອງວັດສະດຸປ້ອນ. ເຈົ້າອາດຈະວາງອັນໜຶ່ງໃສ່ທັງສອງດ້ານຂອງການປ້ອນຂໍ້ມູນ. ຢ່າລືມວາງ <label>
s ຢູ່ນອກກຸ່ມປ້ອນຂໍ້ມູນ.
ຫໍ່
ກຸ່ມການປ້ອນຂໍ້ມູນຖືກຫໍ່ໂດຍຄ່າເລີ່ມຕົ້ນຜ່ານທາງ flex-wrap: wrap
ເພື່ອຮອງຮັບການກວດສອບແບບຟອມກຳນົດເອງພາຍໃນກຸ່ມການປ້ອນຂໍ້ມູນ. ເຈົ້າອາດຈະປິດການໃຊ້ງານນີ້ດ້ວຍ .flex-nowrap
.
ຂະໜາດ
ເພີ່ມຫ້ອງຮຽນຂະຫນາດຂອງແບບຟອມທີ່ກ່ຽວຂ້ອງກັບ .input-group
ຕົວມັນເອງແລະເນື້ອໃນພາຍໃນຈະປັບຂະຫນາດອັດຕະໂນມັດ - ບໍ່ຈໍາເປັນຕ້ອງເຮັດຊ້ໍາຫ້ອງຮຽນຂະຫນາດການຄວບຄຸມແບບຟອມໃນແຕ່ລະອົງປະກອບ.
ບໍ່ຮອງຮັບການຈັດຂະໜາດຂອງອົງປະກອບຂອງກຸ່ມການປ້ອນຂໍ້ມູນແຕ່ລະອັນ.
ກ່ອງກວດ ແລະວິທະຍຸ
ວາງກ່ອງໝາຍ ຫຼືຕົວເລືອກວິທະຍຸໃດນຶ່ງພາຍໃນ addon ຂອງກຸ່ມປ້ອນຂໍ້ມູນແທນຂໍ້ຄວາມ.
ໃນຂະນະທີ່ຫຼາຍ <input>
s ໄດ້ຮັບການສະຫນັບສະຫນູນທາງສາຍຕາ, ຮູບແບບການກວດສອບແມ່ນມີພຽງແຕ່ສໍາລັບກຸ່ມການປ້ອນຂໍ້ມູນທີ່ມີອັນດຽວ <input>
.
addons ຫຼາຍ
ຮອງຮັບ add-ons ຫຼາຍອັນ ແລະສາມາດປະສົມກັບ checkbox ແລະ radio input versions.
ກຸ່ມການປ້ອນຂໍ້ມູນປະກອບມີການຮອງຮັບການເລືອກແບບກຳນົດເອງ ແລະ ການປ້ອນໄຟລ໌ແບບກຳນົດເອງ. ບໍ່ຮອງຮັບເວີຊັນເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ.
ເລືອກແບບກຳນົດເອງ
ການເຂົ້າເຖິງ
ໃຫ້ແນ່ໃຈວ່າການຄວບຄຸມແບບຟອມທັງຫມົດມີຊື່ທີ່ເຫມາະສົມທີ່ສາມາດເຂົ້າເຖິງໄດ້ເພື່ອໃຫ້ຈຸດປະສົງຂອງພວກມັນຖືກຖ່າຍທອດໃຫ້ກັບຜູ້ໃຊ້ເຕັກໂນໂລຢີຊ່ວຍເຫຼືອ. ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະບັນລຸນີ້ແມ່ນການໃຊ້ <label>
ອົງປະກອບ, ຫຼື - ໃນກໍລະນີຂອງປຸ່ມ - ເພື່ອປະກອບມີຂໍ້ຄວາມທີ່ອະທິບາຍພຽງພໍເປັນສ່ວນຫນຶ່ງຂອງ <button>...</button>
ເນື້ອຫາ.
ສໍາລັບສະຖານະການທີ່ມັນບໍ່ສາມາດທີ່ຈະລວມເອົາ <label>
ເນື້ອໃນຂໍ້ຄວາມທີ່ເຫັນໄດ້ຫຼືເຫມາະສົມ, ມີວິທີທາງເລືອກທີ່ຍັງຄົງໃຫ້ຊື່ທີ່ສາມາດເຂົ້າເຖິງໄດ້, ເຊັ່ນ:
<label>
ອົງປະກອບທີ່ເຊື່ອງໄວ້ໂດຍໃຊ້ .visually-hidden
ຫ້ອງຮຽນ
- ຊີ້ໃຫ້ເຫັນເຖິງອົງປະກອບທີ່ມີຢູ່ແລ້ວທີ່ສາມາດເຮັດຫນ້າທີ່ເປັນປ້າຍຊື່ໂດຍໃຊ້
aria-labelledby
- ການສະຫນອງ
title
ຄຸນລັກສະນະ
- ການຕັ້ງຊື່ທີ່ເຂົ້າເຖິງໄດ້ຢ່າງຊັດເຈນໃນອົງປະກອບໂດຍໃຊ້
aria-label
ຖ້າບໍ່ມີສິ່ງເຫຼົ່ານີ້ຢູ່, ເທັກໂນໂລຍີຊ່ວຍເຫຼືອອາດຈະໃຊ້ placeholder
ຄຸນສົມບັດເປັນຕົວສຳຮອງສຳລັບຊື່ <input>
ແລະ <textarea>
ອົງປະກອບທີ່ເຂົ້າເຖິງໄດ້. ຕົວຢ່າງໃນພາກນີ້ສະຫນອງບາງວິທີການແນະນໍາ, ແຕ່ລະກໍລະນີສະເພາະ.
ໃນຂະນະທີ່ການນໍາໃຊ້ເນື້ອຫາທີ່ເຊື່ອງໄວ້ທາງສາຍຕາ ( .sr-only
, aria-label
, ແລະແມ້ກະທັ້ງ placeholder
ເນື້ອຫາ, ເຊິ່ງຫາຍໄປເມື່ອພາກສະຫນາມແບບຟອມມີເນື້ອຫາ) ຈະເປັນປະໂຫຍດຕໍ່ຜູ້ໃຊ້ເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ການຂາດຂໍ້ຄວາມປ້າຍຊື່ທີ່ສັງເກດເຫັນອາດຈະຍັງເປັນບັນຫາສໍາລັບຜູ້ໃຊ້ບາງຄົນ. ບາງຮູບແບບຂອງປ້າຍທີ່ສັງເກດເຫັນໂດຍທົ່ວໄປແມ່ນວິທີການທີ່ດີທີ່ສຸດ, ທັງສໍາລັບການເຂົ້າເຖິງແລະການນໍາໃຊ້.