জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
জেকোয়েরি মোবাইল তো আস্তে আস্তে আপনারা অনেক দূর শিখে ফেললেন । আজ আপনাদেরকে তাই অনেক গুরুত্বপূর্ণ বিষয় শেখাবো । আজ আমি আপনাদের জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা শিখাবো ।
জেকোয়েরি মোবাইলে টেক্সট ইনপুট করা ।
আমরা যেখানে টেক্সট ইনপুট করবো সেগুলো আদর্শ এইচটিএমএল দ্বারা তৈরি করা । জেকয়েরি মোবাইল একে মোবাইল ডিভাইসে ব্যবহার করার জন্য আরো আকর্ষণীয় এবং সহজ করে ডিজাইন করেছে । এছাড়া আপনি এইচটিএমএল ৫ এর <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>
উপরের উদাহরণটা আমরা ভালভাবে খেয়াল করলে বুঝতে পারবো ।
Text area ঃ
লেখা অনেক লাইনে লেখার জন্য আপনাকে <textarea> এলিমেন্টস ব্যবহার করতে হবে ।
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>
যখন আপনি লিখতে থাকবেন তখন লেখার জায়গাটা স্বয়ংক্রিয়ভাবে বৃদ্ধি করে নিবে ।
সার্চ ইনপুট করাঃ
এইচটিএমএল ৫ এ type="search" ইনপুট করা হয় নতুন কোন কিছু খোঁজার জন্য ।
<label for="search">Search:</label>
<input type="search" name="search" id="search">
উপরের উদাহরণ দেখুন তাহলেই বুঝবেন ।
রেডিও বাটনঃ
রেডিও বাটন ব্যবহার করা হয় কারণ ব্যবহারকারীরা অনেক গুলো অপশন থেকে একটি সিলেক্ট করতে পারে ।
রেডিও বাটনের সেট তৈরি করার জন্য আপনাকে অনুরুপ লেবেলের সাথে type="radio" ইনপুট ব্যবহার করতে হবে । রেডিও বাটনগুলো <fieldset> এলিমেন্টস এর সাথে মোড়ানো থাকে । <fieldset> কে নামকরণের জন্য এর সাথে <legend> এলিমেন্ট যোগ করতে পারেন ।
<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>
বাটনগুলোকে একসাথে গ্রুপ করার জন্য আপনাকে data-role="controlgroup" এলিমেন্ট ব্যবহার করতে হবে ।
চেকবক্সঃ
অনেকগুলো অপশন থেকে যখন ব্যবহারকারী একের অধিক অপশন সিলেক্ট করে তখন চেকবক্সের ব্যবহার করা হয় ।
<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 data-role="controlgroup" data-type="horizontal">
ফিল্ডের উপাদানগুলোকে <fieldset> ব্যবহার করে মোড়ানোর মত বানাতে পারেন ।
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
অনেকগুলো বাঁটনকে সিলেক্ট দেখানোর জন্য <input> এর সাথে "pre-selected" ব্যবহার করতে হবে ।
<input type="radio" checked>
<input type="checkbox" checked>
আপনি চাইলে আপনার ফর্মের পাশে একটি পপ-আপও দেখাতে পারেন ।
<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>
উদাহরণ গুলো খুব ভালভাবে খেয়াল করুন তাহলে সব কিছু ভালভাবে বুঝতে পারবেন এবং আপনার মত করে সাজাতে পারবেন ।
