jQuery Mobile ຟອມ

jQuery Mobile ຈະອະນຸຍາດໃຫ້ HTML ຟອມຈະມີຮູບແບບທີ່ພິເສດທີ່ຈະອະນຸຍາດສາຍມາພາຍໃນການສະແດງ.

ສາຍຄູ່ຂອງ jQuery Mobile ຟອມ

jQuery Mobile ນຳໃຊ້ CSS ເພື່ອກຳນົດຮູບແບບຂອງຢ່າງເອກະສານ HTML ຟອມເພື່ອສົ່ງຫາຄວາມກະຍາດແລະຄວາມນໍາໃຊ້ຫຼາຍຂື້ນ.

ໃນ jQuery Mobile, ທ່ານສາມາດນຳໃຊ້ສັບສັດຟອມທີ່ຕ້ອງການດັ່ງຕໍ່ມາ:

  • ຄົນຕ້ອງກັບກະດູກການຂັບເຄື່ອງທີ່ວາງຄວາມຄິດ
  • ຄົນຕ້ອງກັບກະດູກການຄົ້ນຫາ
  • ຄົນຕ້ອງກັບກະດູກການເລືອກທຽມກັນ
  • ຄົນຕ້ອງກັບກະດູກການຄຳຕິດຕັ້ງ
  • ຄົນຕ້ອງກັບກະດູກການເລືອກ
  • ຄົນຕ້ອງກັບຄຳການການຂົນສົ່ງ
  • ຄົນຕ້ອງກັບກະດູກການປ່ຽນຕົວ

ບໍ່ວ່າທີ່ຈະປະສົບກັບ jQuery Mobile ຟອມ, ທ່ານຄວນຮູ້ກັບຂໍ້ມູນດັ່ງຕໍ່ມາ:

  • <form> ຕ້ອງກຳນົດປະເພດ method ແລະ action.
  • ທຸກຢ່າງເອກະສານຕ້ອງຖືກກຳນົດລະຫັດ "id" ທີ່ຈະແຕກຕ່າງກັນ. ລະຫັດນັ້ນຕ້ອງເປັນທີ່ແຕກຕ່າງກັນໃນເວລາຂອງເວັບໄຊ. ຍ້ອນວ່າຈຸດປະສົງນຳມາດີຂອງ jQuery Mobile ອາດອະນຸຍາດໃຫ້ "ເວັບ" ຫຼາຍອັນທັງໝົດຈະສະແດງພ້ອມກັນ.
  • ແຕ່ລະປະກອບສັບສົນຕ້ອງມີການຕິດຕັ້ງ (label). ຂ້ອຍຕ້ອງການຕັດສິນລະບຽບ for ຂອງ label ເພື່ອຕິດຕັ້ງກັບ id ຂອງປະກອບສັບສົນ.

ຕົວຢ່າງ

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

ທີ່ຈະທົດລອງຄັບຄາຄອບ

ສຳລັບການປິດລະບຽບ label, ຂ້ອຍອາດໃຊ້ປະເພດ ui-hidden-accessible. ນີ້ເປັນປະໂຫຍດ, ເມື່ອຂ້ອຍຕ້ອງການໃຫ້ placeholder ຂອງປະກອບສັບສົນດັງສະແດງ ເປັນ label:

ຕົວຢ່າງ

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">ຊື່：</label>
  <input type="text" name="fname" id="fname" placeholder="ຊື່...">
</form>

ທີ່ຈະທົດລອງຄັບຄາຄອບ

ການກະຕຸ້ມຂອງຂອງບັນດາບັນດາ

ສຳລັບການສະແດງ label ແລະ ປະກອບສັບສົນຢູ່ໃນໜ້າຂະໜາດວຽງການທີ່ຫຼາຍ, ຂ້ອຍອາດໃຊ້ປະເພດ <div> ຫຼື <fieldset> ທີ່ມີປະເພດ data-role="fieldcontain" ເພື່ອລວມ label ຫຼື ປະກອບສັບສົນ:

ຕົວຢ່າງ

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

ທີ່ຈະທົດລອງຄັບຄາຄອບ

ຄຳແນະນຳ:ປະເພດ fieldcontain ຈະຕັດສິນລະບຽບຊື່ມື ແລະ ປະກອບສັບສົນຕາມແວດລ້ອມຂອງໜ້າ. ເມື່ອແວດລ້ອມຫຼາຍກວ່າ 480px ຈະດັດແປງວ່າ label ແລະ ປະກອບສັບສົນຕັດສິນຢູ່ໃນເສັ້ນດຽວ. ເມື່ອຫຼາຍກວ່າ 480px ຈະດັດແປງວ່າ label ຢູ່ເທິງປະກອບສັບສົນ.

ຄຳແນະນຳ:ສຳລັບການຫຼີກລ່ຽງການດັດແປງຊື່ມືຂອງ jQuery Mobile ໃຫ້ປະກອບສັບສົນສາມາດໃຊ້ປະເພດ data-role="none":

ຕົວຢ່າງ

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"> data-role="none">

ທີ່ຈະທົດລອງຄັບຄາຄອບ

ການສັນຍາບັນຍາບັນຊີດ້ວຍ jQuery Mobile

ຄຳແນະນຳ:jQuery Mobile ຈະສັນຍາບັນຍາບັນຊີດ້ວຍ AJAX ແລະຈະພະຍາຍາມຜະລິດຕອບສະແດງຈາກຜູ້ຮັບຜິດຊອບບັນຍາບັນຊີດ້ວຍ DOM ຂອງຂະບວນຂັງ.