jQuery Mobile ফর্ম ইনপুট ইলেকট্রন

jQuery Mobile টেক্সট ইনপুট

ইনপুট ফিল্ডগুলি প্রমাণিত HTML ইলেকট্রন দ্বারা লেখা হয়, jQuery Mobile তাদের জন্য মোবাইল ডিভাইসের জন্য বিশেষ সুন্দর এবং সহজ ব্যবহারযোগ্য শৈলী সেট করে। আপনি আরও নতুন HTML5 <input> ধরনগুলি ব্যবহার করতেও পারেন:

ইনস্ট্যান্স

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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">ইমেইল:</label>
    <input type="email" name="email" id="email" placeholder="আপনার ইমেইল ঠিকানা..">
  </div>
</form>

আপনার হাতে পরীক্ষা করুন

সূচনা:placeholder ব্যবহার করে স্বল্প টিপপদ্ধতি যোগ করুন, যাতে ইনপুট ফিল্ডের প্রত্যাশিত মান বর্ণনা করেন:

<input placeholder="sometext">

টেক্সট বক্স

অতিরিক্ত টেক্সট ইনপুট করতে <textarea> ব্যবহার করুন。

মন্তব্য:টেক্সট বক্সটি আপনার টেক্সট লাইন অনুযায়ী স্বয়ংক্রিয়ভাবে প্রসারিত হবে。

ইনস্ট্যান্স

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">অতিরিক্ত তথ্য:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

আপনার হাতে পরীক্ষা করুন

সার্চ বক্স

ইনপুট ধরন type="search" হলো একটি নতুন HTML5 ধরন, যা সার্চ করার জন্য টেক্সট ফিল্ডকে নির্ধারণ করেছে:

ইনস্ট্যান্স

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

আপনার হাতে পরীক্ষা করুন

একক রেডিও বাটন

যখন ব্যবহারকারী সীমিত সংখ্যক বিকল্পগুলির মধ্যে একটি নির্বাচন করেন, তখন একক রেডিও বাটনকে ব্যবহার করা হয়。

একটি একক রেডিও বাটন তৈরি করতে, type="radio" সহ ইনপুট ইলেকট্রন এবং এর সাথে সম্পর্কিত লেবেল যোগ করুন। <fieldset> ইলেকট্রনের মধ্যে একক রেডিও বাটনকে বোঝাইয়াছে। আপনি আরও একটি <legend> ইলেকট্রন যোগ করতে পারেন, যাতে <fieldset> এর শিরোনাম নির্ধারণ করেন।

সূচনা:এই বাটনগুলিকে জুটানোর জন্য data-role="controlgroup" এটি প্রয়োগ করুন:

ইনস্ট্যান্স

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>আপনার লিঙ্গ বাছাই করুন:</legend>
      <label for="male">পুরুষ</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">মহিলা</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

আপনার হাতে পরীক্ষা করুন

চেকবক্স

যখন ব্যবহারকারী সীমিত সংখ্যক বিকল্পগুলির একটি বা একাধিক বাছাই করে, তখন চেকবক্সকে ব্যবহার করা হয়:

ইনস্ট্যান্স

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>আপনি যতটা পছন্দ করুন সেই পছন্দের রঙ বাছাই করুন:</legend>
      <label for="red">রেড</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">গ্রীন</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="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 data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>আপনার লিঙ্গ বাছাই করুন:</legend>
  </fieldset>
</div>

আপনার হাতে পরীক্ষা করুন

আপনি একটি বাটনকে 'প্রিভিউ' করতে চান তবে, HTML <input> ট্যাগের checked এট্রিবিউট ব্যবহার করুন:

ইনস্ট্যান্স

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

আপনার হাতে পরীক্ষা করুন