1. Home
  2. jQuery มือถือในรูปแบบการป้อนข้อมูล

บทช่วยสอน jQuery มือถือในรูปแบบการป้อนข้อมูล ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ jQuery มือถือกล่องใส่ข้อความ,ตัวอย่าง,ฟิลด์ข้อความ,ตัวอย่าง,กล่องใส่ค้นหา,ตัวอย่าง,ปุ่ม,ตัวอย่าง,ช่องทำเครื่องหมาย,ตัวอย่าง,ตัวอย่างเพิ่มเติม,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,

jQuery มือถือในรูปแบบการป้อนข้อมูล

jQuery มือถือกล่องใส่ข้อความ

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

ตัวอย่าง

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">

<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">

<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱th">
</div>
</form>

ลอง»

เคล็ดลับ: ใช้ตัวยึดเพื่อระบุคำอธิบายสั้น ๆ ที่อธิบายถึงค่าที่คาดหวังของช่องใส่: 

<input placeholder="sometext">

ฟิลด์ข้อความ

สำหรับหลายคู่สายป้อนข้อความอาจจะใช้ <textarea>

หมายเหตุ: เมื่อคุณพิมพ์ข้อความบางช่องข้อความจะถูกปรับขนาดโดยอัตโนมัติเพื่อให้พอดีกับแถวที่เพิ่มเข้ามาใหม่

ตัวอย่าง

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

ลอง»

กล่องใส่ค้นหา

type = "ค้นหา" ประเภทของกล่องใส่เป็นของใหม่ใน HTML5 ซึ่งถูกกำหนดให้เป็นเขตการค้นหาใส่ข้อความ:

ตัวอย่าง

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>

ลอง»

ปุ่ม

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

เพื่อที่จะสร้างชุดของปุ่มเพิ่มเข้าและฉลากที่สอดคล้องกับประเภท = "วิทยุ" เป็น ปุ่มปิดล้อมภายใน <fieldset> องค์ประกอบ นอกจากนี้คุณยังสามารถเพิ่มชื่อ <ตำนาน> องค์ประกอบในการกำหนด <fieldset>

เคล็ดลับ: ใช้ข้อมูลบทบาท = "controlgroup" เพื่อใส่กัน:

ตัวอย่าง

<form method="post" action="demo_form.php">
<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="demo_form.php">
<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>

ลอง»

ตัวอย่าง

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

สำหรับการรวมกันของปุ่มวิทยุแนวนอนหรือตรวจสอบกล่องใช้ข้อมูลประเภท = "แนวนอน"

ตัวอย่าง

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

ลอง»

นอกจากนี้คุณยังสามารถใช้ข้อมูลภาชนะที่ล้อมรอบไปด้วย <fieldset>:

ตัวอย่าง

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

ลอง»

หากคุณต้องการให้ปุ่มของคุณในคุณลักษณะที่เลือกไว้ก่อนใช้ HTML <input> มีการตรวจสอบ:

ตัวอย่าง

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

ลอง»

คุณสามารถปรากฏในรูปแบบ:

ตัวอย่าง

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> แสดงป๊อปอัพแบบฟอร์ม </a>

<div ข้อมูลบทบาท = "ป๊อปอัพ" id = "myPopup" class = "UI-เนื้อหา">
<วิธีการแบบฟอร์ม = "โพสต์" การกระทำ = "demoform.php">
<div>
<h3> ข้อมูลเข้าสู่ระบบ </ h3>
<label สำหรับ = "usrnm" class = "UI ที่ซ่อนอยู่ที่สามารถเข้าถึง"> ชื่อผู้ใช้: </ label>
<ประเภทขาเข้า = "text" name = "ผู้ใช้" id = "usrnm" ยึด = "ชื่อผู้ใช้">
<label สำหรับ = "PSWD" class = "UI ที่ซ่อนอยู่ที่สามารถเข้าถึง"> รหัสผ่าน: </ label>
<input type = "รหัสผ่าน" name = "passw" id = "PSWD" ยึด = "รหัสผ่าน">
</ div>
</ form>
</ div>

ลอง»

บทแนะนำยอดนิยม

Contact US

jQuery มือถือในรูปแบบการป้อนข้อมูล
10/30