Form তৈরি এবং পরিচালনা

Framework7 ফর্ম তৈরি এবং পরিচালনার জন্য সহজ এবং কার্যকর উপায় সরবরাহ করে। এটি বিভিন্ন প্রকার ইনপুট ফিল্ড, ভ্যালিডেশন এবং ডায়নামিক ফর্ম পরিচালনার জন্য প্রি-বিল্ট স্টাইল ও কম্পোনেন্ট প্রদান করে।

Framework7 দিয়ে ফর্ম তৈরির ধাপ

১. ফর্মের মৌলিক গঠন

Framework7-এ ফর্ম তৈরি করতে form এবং list ক্লাস ব্যবহার করা হয়।

উদাহরণ:

<div class="page" data-name="form">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Form Example</div>
    </div>
  </div>
  <div class="page-content">
    <form 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" name="name" placeholder="Your name">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Email</div>
              <div class="item-input-wrap">
                <input type="email" name="email" placeholder="Your email">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input-wrap">
                <input type="password" name="password" placeholder="Your password">
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="block">
        <button type="submit" class="button button-fill">Submit</button>
      </div>
    </form>
  </div>
</div>

২. ইনপুট টাইপ সমর্থন

Framework7 বিভিন্ন প্রকার ইনপুট টাইপ সমর্থন করে যেমন:

• টেক্সট (text)
• ইমেইল (email)
• পাসওয়ার্ড (password)
• নম্বর (number)
• ডেট (date)
• চেকবক্স (checkbox)
• রেডিও (radio)
• সিলেক্ট (select)

উদাহরণ (চেকবক্স এবং রেডিও):

<ul>
  <li>
    <label class="item-checkbox item-content">
      <input type="checkbox" name="agree" value="yes">
      <i class="icon icon-checkbox"></i>
      <div class="item-inner">
        <div class="item-title">I Agree</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>
</ul>

৩. ফর্ম ভ্যালিডেশন (Validation)

Framework7 ইনপুট ফিল্ডে বিল্ট-ইন ভ্যালিডেশন সমর্থন করে। আপনি required অ্যাট্রিবিউট ব্যবহার করে সহজ ভ্যালিডেশন করতে পারেন।

উদাহরণ:

<form 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" name="name" placeholder="Your name" required validate>
            <div class="item-input-error-message">Name is required</div>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Email</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="Your email" required validate>
            <div class="item-input-error-message">Please enter a valid email</div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>

৪. ডায়নামিক ফর্ম পরিচালনা

Framework7 এর মাধ্যমে JavaScript ব্যবহার করে ডায়নামিক ফর্ম ডেটা পরিচালনা করা যায়।

উদাহরণ:

// ফর্ম ডেটা সংগ্রহ করা
var formData = app.form.convertToData('form');

// ফর্ম ডেটা দেখানো
console.log(formData);

// ফর্ম রিসেট করা
app.form.fillFromData('form', {
  name: 'John Doe',
  email: 'john@example.com'
});

৫. সাবমিশন এবং AJAX কল

Framework7 এর মাধ্যমে ফর্ম সাবমিট করার পর AJAX কল ব্যবহার করে ডেটা সার্ভারে পাঠানো যায়।

উদাহরণ:

$$('form').on('submit', function (e) {
  e.preventDefault();
  var formData = app.form.convertToData(this);
  app.request.post('https://example.com/api/submit', formData, function (data) {
    app.dialog.alert('Form submitted successfully!');
  });
});

৬. UI উন্নত করার উপায়

Framework7 বিভিন্ন স্টাইলিং অপশন এবং ক্লাস প্রদান করে যা ফর্মের UI উন্নত করতে সাহায্য করে।

• item-input: ইনপুটের জন্য।
• item-input-wrap: ইনপুট ফিল্ডের চারপাশে।
• button-fill: সাবমিট বাটনের জন্য।

Framework7 এর মাধ্যমে ফর্ম ব্যবহারের সুবিধা

1. সহজ গঠন: HTML এবং CSS ব্যবহার করে ফর্ম তৈরি করা সহজ।
2. বিল্ট-ইন ভ্যালিডেশন: JavaScript ছাড়াই সহজ ভ্যালিডেশন সম্ভব।
3. AJAX সমর্থন: ফর্ম সাবমিশনের জন্য সার্ভার কল করা সহজ।
4. প্রি-বিল্ট স্টাইলিং: নেটিভ-লুক ফর্ম তৈরি করতে Framework7 স্টাইলিং ব্যবহার করা যায়।
5. ডায়নামিক ফর্ম ডেটা পরিচালনা: Framework7 এর API দিয়ে ডায়নামিক ফর্ম ডেটা পড়া এবং রিসেট করা যায়।

Framework7 ফর্ম তৈরি এবং পরিচালনার জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক। এর সহজ গঠন, প্রি-বিল্ট UI কম্পোনেন্ট এবং ভ্যালিডেশন সাপোর্ট ডেভেলপারদের দ্রুত এবং কার্যকরভাবে ফর্ম তৈরি করতে সাহায্য করে।