ปัจจัยข้อความมือถือ jQuery
ช่องใส่จะเขียนด้วยองค์ประกอบ HTML มาตรฐานและ jQuery Mobile จะทรงให้พวกเขาดูน่าสนใจและง่ายต่อการใช้งานสำหรับอุปกรณ์มือถือ นอกจากนี้คุณยังสามารถใช้ใหม่ HTML5 <input> ประเภท:
ตัวอย่าง
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
ลองตัวเอง» พื้นที่ข้อความ
ใช้ <textarea> สำหรับปัจจัยข้อความหลายบรรทัด
หมายเหตุ: พื้นที่ข้อความโดยอัตโนมัติจะเติบโตเพื่อให้พอดีกับสายใหม่ขณะที่คุณพิมพ์ข้อความบางส่วน
ตัวอย่าง
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
ลองตัวเอง» ป้อนข้อมูลการค้นหา
อินพุต type="search" เป็นของใหม่ใน HTML5 และกำหนดฟิลด์ข้อความสำหรับป้อนการค้นหา:
ตัวอย่าง
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
ลองตัวเอง» ปุ่ม
ปุ่มจะใช้เมื่อผู้ใช้สามารถเลือกได้เพียงหนึ่งในจำนวนที่ จำกัด ของตัวเลือก
เพื่อสร้างชุดของปุ่มเพิ่มการป้อนข้อมูลที่มี type="radio" และป้ายที่สอดคล้องกัน ห่อปุ่มใน <fieldset> องค์ประกอบ นอกจากนี้คุณยังสามารถเพิ่ม <legend> องค์ประกอบในการกำหนดคำบรรยายใต้ที่ <fieldset>
เคล็ดลับ: ใช้ data-role="controlgroup" เพื่อกลุ่มปุ่มด้วยกัน
ตัวอย่าง
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
ลองตัวเอง» ช่องทำเครื่องหมาย
ช่องทำเครื่องหมายถูกนำมาใช้เมื่อผู้ใช้สามารถเลือกหนึ่งหรือมากกว่าหนึ่งตัวเลือกของมีจำนวน จำกัด ของตัวเลือก:
ตัวอย่าง
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
ลองตัวเอง» ตัวอย่างเพิ่มเติม
ไปยังกลุ่มปุ่มหรือช่องทำเครื่องหมายแนวนอนใช้ data-type="horizontal" :
นอกจากนี้คุณยังสามารถห่อภาชนะฟิลด์รอบ <fieldset> :
ตัวอย่าง
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
ลองตัวเอง» ถ้าคุณต้องการที่ปุ่มใดปุ่มหนึ่งของคุณจะ "pre-selected" ใช้ HTML <input> แอตทริบิวต์การตรวจสอบ:
นอกจากนี้คุณยังสามารถวางรูปแบบของคุณภายในป๊อปอัพ:
ตัวอย่าง
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
ลองตัวเอง»