Foundation এ Form তৈরি এবং কাস্টমাইজ করা

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

Foundation এ ফর্ম তৈরি

Foundation ফ্রেমওয়ার্কে ফর্ম তৈরি করতে মূলত .form ক্লাস এবং উপাদানগুলি ব্যবহার করা হয়। নিচে একটি সাধারণ ফর্ম তৈরি করার উদাহরণ দেওয়া হলো:

উদাহরণ: সাধারণ ফর্ম

<div class="row">
  <div class="small-12 medium-6 columns">
    <label for="name">নাম</label>
    <input type="text" id="name" placeholder="আপনার নাম লিখুন">
  </div>
  <div class="small-12 medium-6 columns">
    <label for="email">ইমেল</label>
    <input type="email" id="email" placeholder="আপনার ইমেল লিখুন">
  </div>
  <div class="small-12 columns">
    <label for="message">বার্তা</label>
    <textarea id="message" placeholder="আপনার বার্তা লিখুন"></textarea>
  </div>
  <div class="small-12 columns">
    <button type="submit" class="button">সাবমিট</button>
  </div>
</div>

এখানে:

• .small-12: মোবাইল স্ক্রীনে পুরো প্রস্থ (full width)।
• .medium-6: মিডিয়াম স্ক্রীনে অর্ধেক প্রস্থ (half width)।
• .columns: গ্রিড সিস্টেমের কলাম।

এই ফর্মটি রেসপনসিভ এবং Foundation এর গ্রিড সিস্টেমের সাহায্যে মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে দেখাবে।

ফাউন্ডেশন এ ফর্ম কাস্টমাইজেশন

Foundation ফ্রেমওয়ার্কটি ফর্ম কাস্টমাইজেশন-এর জন্য বিভিন্ন স্টাইল এবং টুলস প্রদান করে। এর মধ্যে ইনপুট ফিল্ড, বাটন, সিলেক্ট ড্রপডাউন, চেকবক্স ইত্যাদির কাস্টমাইজেশন করা যায়। ফাউন্ডেশনের সিএসএস ক্লাস ব্যবহার করে এই উপাদানগুলিকে আরও আকর্ষণীয় এবং ইউজার-বান্ধব বানানো যায়।

১. ইনপুট ফিল্ড কাস্টমাইজেশন

Foundation এ ইনপুট ফিল্ড কাস্টমাইজ করার জন্য সহজ ক্লাস এবং স্টাইল ব্যবহার করা যায়।

<label for="name">নাম</label>
<input type="text" id="name" class="input-group-field" placeholder="আপনার নাম লিখুন">

এখানে input-group-field ক্লাস ব্যবহার করা হয়েছে, যা ইনপুট ফিল্ডকে আরও সুন্দর এবং নির্দিষ্ট আকারে প্রদর্শিত করে।

২. বাটন কাস্টমাইজেশন

Foundation ফ্রেমওয়ার্কের বাটন ক্লাস ব্যবহার করে বিভিন্ন ধরনের বাটন তৈরি করা যায়। যেমন:

<button type="submit" class="button primary">সাবমিট</button>
<button type="reset" class="button secondary">রিসেট</button>

এখানে:

• primary: প্রধান বাটন (যেমন, সিলেক্ট বা সাবমিট বাটন)
• secondary: সেকেন্ডারি বাটন (যেমন, রিসেট বাটন)

Foundation এ আপনি বাটনের আকার এবং রঙ পরিবর্তন করতে পারেন।

৩. সিলেক্ট ড্রপডাউন কাস্টমাইজেশন

Foundation সিলেক্ট ড্রপডাউন মেনু কাস্টমাইজ করতে সহজ স্টাইল প্রদান করে।

<label for="dropdown">দেশ নির্বাচন করুন</label>
<select id="dropdown">
  <option value="1">বাংলাদেশ</option>
  <option value="2">ভারত</option>
  <option value="3">পাকিস্তান</option>
</select>

এখানে সিলেক্ট ড্রপডাউন এলিমেন্টের জন্য select ট্যাগ ব্যবহার করা হয়েছে, যা মোবাইল এবং ডেস্কটপে রেসপনসিভ লেআউট প্রদান করবে।

৪. চেকবক্স এবং রেডিও বাটন কাস্টমাইজেশন

Foundation ফ্রেমওয়ার্ক চেকবক্স এবং রেডিও বাটন কাস্টমাইজ করতে সুবিধা প্রদান করে।

<label><input type="checkbox" name="agree"> আমি শর্তাবলী মেনে নিচ্ছি</label>

চেকবক্সের জন্য input type="checkbox" ব্যবহার করা হয়েছে। একইভাবে রেডিও বাটনও Foundation এর স্টাইল দ্বারা কাস্টমাইজ করা যায়।

৫. ফর্ম ইনপুট গ্রুপ

Foundation ফ্রেমওয়ার্ক ইনপুট ফিল্ডগুলিকে গ্রুপ করতে সহায়তা করে। আপনি সহজেই বিভিন্ন ইনপুট ফিল্ড একসাথে যুক্ত করতে পারেন।

<div class="input-group">
  <span class="input-group-label">@</span>
  <input type="text" class="input-group-field" placeholder="ইমেল লিখুন">
</div>

এখানে .input-group ক্লাসের মাধ্যমে ইনপুট ফিল্ডের সাথে লেবেল যুক্ত করা হয়েছে। এটি স্লিম এবং স্টাইল করা উপাদান তৈরি করে।

ফর্মের জন্য আরও কিছু ফিচার

১. ফর্ম ভ্যালিডেশন

Foundation ফ্রেমওয়ার্কের ফর্ম ভ্যালিডেশন ব্যবহার করে ফর্মের ইনপুট যাচাই করা যায়।

<form data-abide="ajax">
  <label for="email">ইমেল</label>
  <input type="email" id="email" placeholder="ইমেল লিখুন" required>
  <button type="submit" class="button">সাবমিট</button>
</form>

এখানে data-abide="ajax" ব্যবহার করা হয়েছে, যা ফর্ম ভ্যালিডেশন সক্ষম করে।

২. মডাল উইন্ডো

ফাউন্ডেশন ফ্রেমওয়ার্ক মডাল উইন্ডো তৈরি করতে সাহায্য করে। এটি ফর্মের তথ্য জমা দেয়ার জন্য ব্যবহার করা যেতে পারে।

<a href="#" data-open="modal1" class="button">ফর্ম দেখুন</a>

<div class="reveal" id="modal1" data-reveal>
  <h1>ফর্ম</h1>
  <form>
    <!-- ফর্ম ফিল্ডস -->
    <button type="submit" class="button">সাবমিট</button>
  </form>
  <button class="close-button" data-close aria-label="Close modal">×</button>
</div>

এখানে data-open="modal1" এবং data-reveal ক্লাস ব্যবহার করা হয়েছে, যা মডাল উইন্ডোতে ফর্ম দেখানোর জন্য ব্যবহৃত হয়।

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