ถัดไป ก่อนหน้า

3.5 Form Elements

   มี common form elements ที่สามารถเรียกใช้ได้ดังนี้ text inputs, search, sliders, flip toggle switches, radio buttons, checkboxes, select menus และสามารถใช้ได้ในรูปแบบ standard sizedและ mini sized

a Form basic

   โครงสร้าฟอร์ม
ฟอร์มจะมี action และ method ที่ใช้เป็นตัวกำหนดกระบวนการของฟอร์มบน server
ตัวอย่าง

<form action="form.php" method="post"> ... </form>

action คือการกำหนดให้การส่งฟอร์มไปยังไฟล์ที่เราต้องการ

method คือการกำหนดชนิดของการส่งฟอร์ม มีสองแบบคือ แบบ POST และ แบบ GET

องค์ประกอบฟอร์ม Mini version

CD ไฟล์: docs-forms.html

การซ่อน Label(Hiding labels accessibly)

ตัวอย่างโค้ด: docs-forms.html

หรือเพิ่ม class ui-hide-label

CD ไฟล์: docs-forms.html

   เนื่องจาก radio และ checkbox ไม่สามารถใช้คลาส ui-hidden-accessible ได้ในกรณีนี้ แต่สามารถใช้คลาส ui-hide-label ใช้ซ่อนองค์ประกอบใน <legend>

CD ไฟล์: docs-forms.html

การปิดการใช้งานฟอร์ม(Disabling form elements)

CD ไฟล์ : docs-forms.html

พื้นที่ของฟิวล์(Field containers)

   สามารถใช้ div หรือ fieldset ร่วมกับ attribute data-role="fieldcontain"

ฟอร์มในทูลบาร์(Forms in toolbars)

   สำหรับฟีเจอร์นี้อาจก่อให้เกิดปัญหาความไม่แน่นอนกับเบราว์เซอร์ของมือถือต่างๆโดยเฉพาะ Android 2.2/2.3

รูปแบบการรีเฟรชขององค์ประกอบฟอร์มรูปแบบต่างๆ(Refreshing form elements)

• Checkboxes:

  $("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

• Radios:

  $("input[type='radio']").prop("checked",true).checkboxradio("refresh");

• Selects:

  
  var myselect = $("#selectfoo");
      myselect[0].selectedIndex = 3;
      myselect.selectmenu("refresh");
  

• Sliders:

  
       $("input[type='range']").val(60).slider("refresh");
           Flip switches (they use slider):
           var myswitch = $("#selectbar");
           myswitch[0].selectedIndex = 1;
           myswitch.slider("refresh");
  

การป้องกัน auto-initialization ขององค์ประกอบฟอร์ม (Preventing auto-initialization of form elements)

   สามารถเพิ่ม attribute data-role=”none” ใน elements ของฟอร์มตามความเหมาะสม

ตัวอย่าง

<label for="foo">
<select name="foo" id="foo" data-role="none">
	<option value="a">A</option>
	<option value="b">B</option>
	<option value="c">C</option>
</select>
</label>

   ผู้ใช้สามารถปรับแต่ง selector นั้นๆที่จะนำมาป้องกัน auto-initialization โดยการ set หน้าเพจของปลั๊กอิน keepNative ซึ่งปกติมีการ set เป็น [data-role="none"]
ตัวอย่าง

$(document).bind('mobileinit',function(){
	$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

   อีกวิธีหนึ่ง สามารถใช้ data-enhance="false" ในองค์ประกอบหลักร่วมกับ $.mobile.ignoreContentEnabled กำหนดค่าให้เป็น true และสามารถกำหนดค่า $.mobile.selectmenu.prototype.options.nativeMenu ที่มีค่าเป็น true ใน mobileinit เรียกให้กลับคืนสู่ค่าพื้นฐานตามเดิมหรือใช้ data-native-menu="true"