Input Fields, Select, Checkbox, এবং Radio Button ব্যবহারের নিয়ম

Framework7-এ বিভিন্ন ফর্ম ইনপুট উপাদান ব্যবহারের মাধ্যমে ডেভেলপাররা ব্যবহারকারীদের কাছ থেকে ডেটা সংগ্রহ করতে পারেন। এটি ব্যবহারবান্ধব এবং নেটিভ লুক ও ফিল সরবরাহ করে। Framework7-এর সাহায্যে Input Fields, Select, Checkbox, এবং Radio Button ব্যবহার করা খুবই সহজ।

Input Fields

Input Field তৈরি

Framework7-এ Input Field তৈরি করার জন্য HTML ব্যবহার করুন। Framework7-এর স্টাইলিং স্বয়ংক্রিয়ভাবে Input Field-এ প্রয়োগ হবে।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Your Name</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Input Field বৈশিষ্ট্য

• প্লেসহোল্ডার (Placeholder): ইনপুটে টেক্সট নির্দেশিকা দেখানোর জন্য।
• টাইপ (Type): টেক্সট, পাসওয়ার্ড, ইমেল ইত্যাদি।
• রিকোয়্যারড (Required): ফর্ম ভ্যালিডেশনের জন্য প্রয়োজনীয়।

Input Field এর অন্যান্য উদাহরণ:

<input type="password" placeholder="Enter your password">
<input type="email" placeholder="Enter your email">
<input type="number" placeholder="Enter your age">

Select (Dropdown)

Select Field তৈরি

Framework7-এ Select (Dropdown) ব্যবহারের জন্য নিচের HTML ব্যবহার করুন।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Select City</div>
          <div class="item-input-wrap">
            <select>
              <option value="new-york">New York</option>
              <option value="los-angeles">Los Angeles</option>
              <option value="chicago">Chicago</option>
            </select>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Select Field বৈশিষ্ট্য

• ডিফল্ট ভ্যালু (Default Value): ডিফল্ট সিলেকশন সেট করতে selected অ্যাট্রিবিউট ব্যবহার করুন।
• মাল্টিপল সিলেকশন (Multiple Selection): একাধিক সিলেকশন করতে multiple অ্যাট্রিবিউট যোগ করুন।

মাল্টিপল সিলেকশন উদাহরণ:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Checkbox

Checkbox তৈরি

Framework7-এ Checkbox তৈরি করতে নিচের HTML ব্যবহার করুন। এটি একাধিক অপশন নির্বাচন করতে সহায়ক।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="option1" value="Option 1">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Option 1</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="option2" value="Option 2">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Option 2</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Checkbox বৈশিষ্ট্য

• চেক করা (Checked): ডিফল্টভাবে চেক করা অবস্থায় রাখতে checked অ্যাট্রিবিউট ব্যবহার করুন।
• ডিসেবল করা (Disabled): চেকবক্স নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করুন।

উদাহরণ:

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

Radio Button

Radio Button তৈরি

Framework7-এ Radio Button ব্যবহার করে একাধিক অপশনের মধ্যে একটি নির্বাচন করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="radio-group" value="Option 1">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Option 1</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="radio-group" value="Option 2">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Option 2</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Radio Button বৈশিষ্ট্য

• ডিফল্ট সিলেকশন (Default Selection): একটি অপশন ডিফল্টভাবে সিলেক্ট রাখতে checked অ্যাট্রিবিউট ব্যবহার করুন।
• ডিসেবল করা (Disabled): একটি অপশন নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করুন।

উদাহরণ:

<input type="radio" name="group" value="Option 1" checked>
<input type="radio" name="group" value="Option 2" disabled>

ফর্ম তৈরি উদাহরণ

Framework7-এ Input Fields, Select, Checkbox, এবং Radio Button মিলিয়ে একটি পূর্ণাঙ্গ ফর্ম তৈরি করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">City</div>
          <div class="item-input-wrap">
            <select>
              <option value="new-york">New York</option>
              <option value="los-angeles">Los Angeles</option>
              <option value="chicago">Chicago</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="subscribe" value="Yes">
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <div class="item-title">Subscribe to Newsletter</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="gender" value="Male">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Male</div>
        </div>
      </label>
    </li>
    <li>
      <label class="item-radio item-content">
        <input type="radio" name="gender" value="Female">
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Female</div>
        </div>
      </label>
    </li>
  </ul>
</div>

Framework7-এ Input Fields, Select, Checkbox, এবং Radio Button তৈরি এবং পরিচালনা করা খুব সহজ। এর ব্যবহারবান্ধব ডিজাইন এবং নেটিভ লুক অ্যাপ্লিকেশনকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে।