জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
প্রতিদিন আমরা জেকোয়েরি মোবাইলের নতুন একেকটি বিষয় শিখছি , আজ আমাদের শেখার বিষয় হলো জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো ।
জেকোয়েরি মোবাইল এইচটিএমএল ফর্মকে স্টাইল করে আরো আকর্ষণীয় এবং টাচকে আরো উন্নত করে তোলে ।
জেকোয়েরি মোবাইলের ফর্মের গঠন(jQuery Mobile Form Structure):
জেকোয়েরি মোবাইল সিএসএস ব্যবহার করে এইচটিএমএল এলিমেন্টস গুলোকে আরো আকর্ষণীয় এবং ব্যবহারে খুব সহজ করে তোলে ।
জেকোয়েরি মোবাইলে আপনি নিচের কনট্রোল গুলো ব্যবহার করতে পারবেন ।
- Text Inputs
- Search Inputs
- Radio Buttons
- Checkboxes
- Select Menus
- Sliders
- Flip Toggle Switches
যখন আপনি জেকোয়েরি মোবাইল ফর্ম নিয়ে কাজ করবেন তখন আপনার নিচের বিষয়গুলো অবশ্যই মনে রাখতে হবে ।
১। <form> এলিমেন্ট অবশ্যই একটি মেথড এবং এটা একটি কার্যকরী এট্রিবিউট(action attribute) ।
২। সকল ফর্মের একটি স্বতন্ত্র আইডি নাম্বার থাকবে । সাইটের সকল পেজে এই আইডি গুলো স্বতন্ত্রভাবে আড়াআড়ি থাকবে । কারণ জেকোয়েরি মোবাইলের সিঙ্গেল পেজ নেভিগেশন মডেলে(jQuery Mobile's single-page navigation model) একই সাথে অনেক পেজকে একসাথে রাখে ।
৩। সকল ফর্ম এট্রিবিউটের একটি করে অবশ্যই লেবেল থাকবে । লেবেলের আইডি কে এলিমেন্টের আইডির সাথে মেলানোর জন্য for attribute ব্যবহার করতে হয় ।
উদাহরণঃ
<form method="post" action="demoform.asp">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
</form>
আপনি ইচ্ছা করলে ফর্মের সাথে placeholder ট্যাগ ব্যবহার করে কিছু সংকেত বা সাহায্যপূর্ণ ইঙ্গিত রাখতে পারেন ।
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
লেবেল ঢেকে রাখার জন্য "ui-hidden-accessible" ক্লাস ব্যবহার করতে পারেন । এটা মাঝে মাঝে দরকার হতে পারে ।
<label for="fname class="ui-hidden-accessible"">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
আপনি যদি একটি ক্লিয়ার বাটন চান তাহলে data-clear-btn="true" এট্রিবিউট ব্যবহার করতে পারেন ।
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
এই ক্লিয়ার বাটন
জেকোয়েরি মোবাইল ফর্ম বাটন(jQuery Mobile Form Buttons):
ফর্মের বাটনগুলো এইচটিএমএল <input> এলিমেন্টস দ্বারা কোড করা হয়ে থাকে । তারা স্বয়ংক্রিয়ভাবে ডিজাইন করা থাকে । আপনি একে খুব সহজে আকর্ষণীয় এবং ডেস্কটপ এবং মোবাইলে সহজভাবে ব্যবহারের জন্য সাজাতে পারেন ।
<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
আপনি <input> বাঁটনকে নিচের লিস্ট থেকে data-* এট্রিবিউট ব্যবহার করে আরো সুন্দরভাবে ডিজাইন করতে পারেন ।
এট্রিবিউটঃ data-corners
মানঃ true | false
বর্ণনাঃ বাটনের কোণা গুলো গোলাকার হবে কিনা তা নির্দেশ করে ।
এট্রিবিউটঃ data-icon
মানঃ Icons Reference
বর্ণনাঃ বাটনের আইকনকে নির্দেশ করে ।
এট্রিবিউটঃ data-iconpos
মানঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।
এট্রিবিউটঃ data-inline
মানঃ true | false
বর্ণনাঃ বাটন কি একই লাইনে হবে কিনা তা নির্দেশ করে ।
এট্রিবিউটঃ data-mini
মানঃ true | false
বর্ণনাঃ বাটনের আকার কেমন হবে তা নির্দেশ করে ।
এট্রিবিউটঃ data-shadow
মানঃ true | false
বর্ণনাঃ বাটনে ছায়া(shadow) থাকবে কিনা তা নির্দেশ করে ।
উপরের মোটা অক্ষরের মান গুলো ডিফল্টভাবে থাকবে ।
আপনার চাওয়া মতে নিচের এট্রিবিউট গুলো যোগ করতে পারেন ।
<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
ফিল্ড কন্টেইনার(Field Containers) :
লেবেল এবং ফর্মের উপাদানগুলোকে চওড়া স্ক্রীনে(wider screen) দেখানোর জন্য লেবেলের বা ফর্মের চারিদিকে <div> অথবা <fieldset> এর সাথে "ui-field-contain" ক্লাস যোগ করতে হবে ।
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<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>
এটা পেজের চওড়ার(width) উপর নির্ভর করে দেখাবে । 480px এর উপর বা নিচে হলে পরিবর্তন করে দেখাবে ।
জেকোয়েরি মোবাইল যাতে ক্লিক করা এলিমেন্টগুলোকে স্টাইল না করে এজন্য আপনাকে data-role="none" এট্রিবিউট ব্যবহার করতে হবে ।
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
জেকোয়েরি মোবাইলে ফর্ম সাবমিশন করা(Form submission in jQuery Mobile) :
জেকোয়েরি মোবাইল অ্যাজাক্স ব্যবহার করে স্বয়ংক্রিয়ভাবে ফর্ম সাবমিশন নিয়ন্ত্রণ করতে পারে । সার্ভারের রেসপন্স অনুসারে অ্যাপ্লিকেশনের DOM কে নিয়ন্ত্রণ করতে পারে ।
তাহলে আমরা কিন্তু জেকোয়েরি ব্যবহার করে একটি ফর্মকে কিভাবে সাজাতে হয় তা শিখে ফেললাম । এরপর আমরা যখন জেকোয়েরিতে আরো বেশি এক্সপার্ট হয়ে যাবো তখন ফর্মকে আমাদের মনের মত করে আরো সুন্দর করে কাস্টোমাইজ করতে পারবো ।
http://www.w3schools.com/jquerymobile/jquerymobile_form_basic.asp
