ฟอร์ม jQuery Mobile

jQuery Mobile จะเพิ่มรูปแบบที่ง่ายต่อการสัมผัสและดูดูดใจให้กับฟอร์ม HTML โดยอัตโนมัติ

โครงสร้างฟอร์ม jQuery Mobile

jQuery Mobile ใช้ CSS ในการตั้งรูปแบบองค์ประกอบฟอร์ม HTML ให้ดูดูดใจและง่ายต่อการใช้งาน

ใน jQuery Mobile คุณสามารถใช้ความเป็นไปได้ตัวควบคุมฟอร์มต่อไปนี้:

  • ตัวกรองข้อความ
  • ตัวกรองค้นหา
  • ตัวเลือกเดียว
  • ตัวเลือกหลายเลือก
  • เมนูเลือก
  • สเกลความยาว
  • ปุ่มเปิด/ปิดตัวทันที

เมื่อคุณต้องการจัดการฟอร์มของ jQuery Mobile คุณควรทราบข้อมูลต่อไปนี้:

  • ต้องตั้งค่าคุณสมบัติ method และ action ขององค์ประกอบ <form>
  • แต่ละองค์ประกอบฟอร์มต้องถูกตั้งค่าคุณสมบัติ "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 ใช้รายละเอียด class="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" มาล้อมรายละเอียดหรือองค์ประกอบฟอร์ม:

ตัวอย่าง

<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 จะตั้งรูปแบบ label และองค์ประกอบฟอร์มตามความกว้างของหน้าเว็บ。เมื่อความกว้างของหน้าเว็บมากกว่า 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 ของโปรแกรม