jQuery Mobile Form Input Elements

jQuery Mobile Text Input

องค์ประกอบของตัวบันทึกจะถูกเขียนด้วยองค์ประกอบ HTML มาตรฐาน โครงการ jQuery Mobile จะทำงานเพื่อตั้งรูปแบบที่งดงามและง่ายต่อการใช้สำหรับอุปกรณ์และเครื่องมือมือถือ ท่านยังสามารถใช้ชนิด HTML5 ใหม่สำหรับองค์ประกอบ input ได้

ตัวอย่าง

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Birthday:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Your email address..">
  </div>
</form>

ทดลองด้วยตัวเอง

คำเตือน:โปรดใช้ placeholder มาก่อนเพื่อกำหนดข้อความคำนำเสนอสั้นๆ ที่มีความหมายเพื่อบรรยายค่าที่คาดว่าจะมีในช่องบันทึก

<input placeholder="sometext">

ตัวกรองข้อความ

โปรดใช้องค์ประกอบ <textarea> เพื่อทำการบันทึกข้อความหลายบรรทัด

หมายเหตุ：ตัวกรองข้อความจะขยายตัวอัตโนมัติเพื่อปรับสอดคล้องกับบรรยายข้อความที่คุณป้อน

ตัวอย่าง

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

ทดลองด้วยตัวเอง

ตัวกรองค้นหา

องค์ประกอบ input ชนิด type="search" คือการเพิ่มขึ้นใหม่ใน HTML5 ที่ใช้เพื่อกำหนดองค์ประกอบ text field ที่ใช้ในการบันทึกคำค้นหา

ตัวอย่าง

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

ทดลองด้วยตัวเอง

แถวปุ่มเลือกเดียว

แถวปุ่มเลือกเดียวจะถูกใช้เมื่อผู้ใช้เลือกเพียงตัวเลือกหนึ่งในจำนวนที่มีจำกัด

หากต้องการสร้างแถวปุ่มเลือกเดียว โปรดเพิ่มองค์ประกอบ input ด้วย type="radio" และ label ตามไปด้วย ให้บรรจุแถวปุ่มเลือกเดียวไว้ใน องค์ประกอบ <fieldset> ท่านยังสามารถเพิ่มองค์ประกอบ <legend> มาก่อนเพื่อกำหนดหัวข้อของ <fieldset> ได้

คำเตือน:ใช้คุณภาพที่มีชื่อว่า data-role="controlgroup" เพื่อรวมกลุ่มปุ่มเหล่านี้:

ตัวอย่าง

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>เลือกเพศของคุณ:</legend>
      <label for="male">เพศชาย</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">เพศหญิง</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

ทดลองด้วยตัวเอง

ตัวเลือกตรงแบบตรงเลขฉันท์

ตัวเลือกตรงแบบตรงเลขฉันท์จะถูกใช้เมื่อผู้ใช้เลือกหนึ่งหรือหลายตัวในเลือกที่มีจำกัด:</form>

ตัวอย่าง

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>เลือกสีที่คุณชื่นชอบมากที่สุด:</legend>
      <label for="red">แดง</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">เขียว</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">ฟ้าสี</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

ทดลองด้วยตัวเอง

ตัวอย่างเพิ่มเติม

ถ้าคุณต้องการที่จะทำกลุ่มเกณฑ์รายการเลือกที่เป็นแบบระดับนอกๆ ให้ใช้คุณภาพที่มีชื่อว่า data-type="horizontal":

ตัวอย่าง

<fieldset data-role="controlgroup" data-type="horizontal">

ทดลองด้วยตัวเอง

คุณก็สามารถใช้โดเมนคอนเทนเนอร์เพื่อบรรจุ <fieldset> ได้:

ตัวอย่าง

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>เลือกเพศของคุณ:</legend>
  </fieldset>
</div>

ทดลองด้วยตัวเอง

หากคุณต้องการที่จะ "เลือกล่ะง" ปุ่มหนึ่งในปุ่มเลือก HTML <input> โดยใช้คุณสมบัติ checked

ตัวอย่าง

<input type="radio"> checked>
<input type="checkbox"> checked>

ทดลองด้วยตัวเอง