jQuery Mobile – Forms

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল ফর্ম

জেক্যুয়েরি মোবাইল স্বয়ংক্রিয়ভাবেই HTML ফর্ম তৈরি করে যেন তা দেখতে অত্যন্ত মনোরম এবং স্পর্শের অনুকূল হয়। [image]

জেক্যুয়েরি মোবাইল ফর্ম স্টাকচারঃ জেক্যুয়েরি মোবাইল ইলিমেন্ট হিসেবে HTMLকে স্টাইল করার জন্য CSS ব্যবহার করে, ইলিমেন্টকে আকর্ষণীয় এবং ব্যবহার উপযোগী করে তোলে। জেক্যুয়েরি মোবাইলে আপনি নিচের কন্ট্রোলগুলো ব্যবহার করতে পারবেনঃ • Text Inputs • Search Inputs • Radio Buttons • Checkboxes • Select Menus • Sliders • Flip Toggle Switches

জেক্যুয়েরি মোবাইল ফর্ম নিয়ে কাজ করতে চাইলে আপনাকে অবশ্যই যে জিনিসগুলো জানতে হবেঃ •

উদাহরণঃ

কৌশলঃ ইনপুট ফিল্ডে কি ধরনের ভ্যালু দেয়া যাবে তা সংক্ষেপে বোঝানোর জন্য placeholder ব্যবহার করা যায়। উদাহরণঃ First name:

কৌশলঃ লেভেলকে হাইড করার জন্য "ui-hidden-accessible" ব্যবহার করা হয়। এটা সাধারনত তখন ব্যবহার করা যখন আপনি আপনার ফর্মের placeholderকে লেভেলের মতো করে দেখাতে চাইবেনঃ উদাহরণঃ First name:

কৌশলঃ ক্লিয়ার বাটন (একটি X আইকন যা ইনপুট ফিল্ডের ডানপাশে থাকে কন্টেন্টকে মুছে ফেলার জন্য), অ্যাড করতে চাইলে data-clear-btn="true" অ্যাট্রিবিউট ব্যবহার করতে হয়ঃ উদাহরণঃ First name: ইঙ্গিতঃ ক্লিয়ার বাটন ইলিমেন্টে অ্যাড করা যায়, <span class="mceItemHidden" data-mce-bogus="1"> ইলিমেন্টে যায়না। সার্চ ফিল্ডে এই অ্যাট্রিবিউট ডিফল্টভাবেই “true” করা থাকে, এটাকে পরিবর্তন করতে চাইলে শুধুমাত্র <span class="hiddenSpellError" pre="" data-mce-bogus="1">data-</span>clear-btn="false" করে দিলেই হবে। </p> <p>জেক্যুয়েরি মোবাইল বাটনসঃ ফর্মের বাটনগুলো ইনপুট ইলিমেন্টের ষ্ট্যাণ্ডার্ড HTML দ্বারা করা হয় (button, reset, submit)। এগুলোর স্টাইল নিজে থেকেই হয় তবে মোবাইল ডিভাইস বা ডেক্সটপের জন্য আরও আকর্ষণীয় এবং ব্যবহার উপযোগী করা যায়ঃ উদাহরণঃ <<span class="hiddenSuggestion" pre="" data-mce-bogus="1">input</span> type="button" value="Button"/> <input type="reset" value="Reset Button"/> <input type="submit" value="Submit Button"/></p> <p>ইনপুট বাটনকে আরও আকর্ষণীয় করার জন্য নিচের লিস্টের 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 বাটনের শেডো থাকবে কি না তা নির্দেশ করে</p> <p>আপনি আপনার ইচ্ছা অনুযায়ী অ্যাট্রিবিউটগুলো ব্যবহার করতে পারেনঃ <input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true"/></p> <p>ফিল্ড কন্টেইনারঃ লেভেল এবং ইলিমেন্টগুলো বড় স্ক্রিনে সঠিকভাবে প্রদর্শনের জন্য</p> <div> বা</p> <fieldset> ইলিমেন্টে "ui-field-contain" ক্লাসটি লেভেল এবং ফর্মের মাঝে কল করতে হবেঃ </p> <p>উদাহরণঃ</p> <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> <p> </p> </form> <p>কৌশলঃ জেক্যুয়েরি মোবাইল ফর্মকে অটোক্লিক অ্যাট্রিবিউট না রাখতে চাইলে data-role="none" অ্যাট্রিবিউট ব্যবহার করতে হবে। <label for="fname">First name:</label> <input type="text" name="fname" id="fname" data-role="none"/></fieldset> </div> <p> </p> <p></span>