জুনুইয়ার্ড মোবাইল ফর্ম

জুনুইয়ার্ড মোবাইল স্বয়ংক্রিয়ভাবে HTML ফর্মকে একটি সুবিধাজনক টাচফ্রেন্ডলী অপেক্ষাকৃত প্রদর্শন করে

জুনুইয়ার্ড মোবাইল ফর্ম স্ট্রাকচার

জুনুইয়ার্ড মোবাইল সিএসএস (CSS) ব্যবহার করে HTML ফর্ম ইউনিটের শৈলী নিয়ে তৈরি করে, যাতে তা আকর্ষণীয় এবং ব্যবহারযোগ্য হয়

জুনুইয়ার্ড মোবাইলে, আপনি নিচের ফর্ম কন্ট্রোলকে ব্যবহার করতে পারেন:

  • টেক্সট বক্স
  • সার্চ বক্স
  • রেডিও বক্স
  • চেকবক্স
  • সিলেকশন মেনু
  • স্লাইডার
  • রিভার্স সুইচ

জুনুইয়ার্ড মোবাইল ফর্মের সাথে কাজ করতে আপনাকে নিচের তথ্য জানা উচিত:

  • <form> ইউনিটকে method এবং action অ্যাট্রিবিউট নিতে হবে
  • প্রত্যেক ফর্ম ইউনিটকে একটি অভিন্ন "id" অ্যাট্রিবিউট নিতে হবে। এই id-টি সাইটের পেজে অভিন্ন হতে হবে। কারণ জুনুইয়ার্ড মোবাইলের একক পেজ নেভিগেশন মডেল একইসঙ্গে অনেকগুলি ভিন্ন "পেজ"-কে প্রদর্শন করতে পারে。
  • প্রত্যেক ফর্ম এলিমেন্টকে একটি ট্যাগ (label) থাকতে হবে।label-এর for এটিবিউটকে এলিমেন্টের id-এর সাথে ম্যাচ করাতে হবে।

উদাহরণ

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

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

যদি লেবেলকে লুকাতে হয়, 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>

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

ডোমেইন কনটেন্ট

যদি লেবেল এবং ফর্ম এলিমেন্টকে প্রশান্ত স্ক্রিনে সঠিকভাবে দেখাতে হয়, তবে data-role="fieldcontain" এটিবিউট সহ উপস্থাপক বা <fieldset> এলিমেন্টকে লেবেল বা ফর্ম এলিমেন্টকে ভার্চ্যুয়াল করুন:

উদাহরণ

<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 এটিবিউট লেবেল এবং ফর্ম কন্ট্রোলারের স্টাইল নির্ধারণ করে যা পানেল চেয়ার্জের ভিত্তিতে নির্ধারিত।যখন পানেল চেয়ার্জ 480px বেশি হলে, তা স্বয়ংক্রিয়ভাবে লেবেল এবং ফর্ম কন্ট্রোলারকে একই সারিতে রাখে।যখন 480px কম হলে, লেবেলটি ফর্ম এলিমেন্টের উপরে রাখা হয়。

คำแนะนำ:জিনারেটিক মোবাইল স্বয়ংক্রিয়ভাবে ক্লিকযোগ্য এলিমেন্টগুলির স্টাইল নিয়ে যাবে না কারণ হলে, 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 ของโปรแกรม