Bulma এর Form Components

Bulma ফ্রেমওয়ার্কে ফর্ম উপাদানগুলি (Form Components) তৈরি করা খুবই সহজ এবং সুন্দর। Bulma এর ফর্ম কম্পোনেন্টগুলি আপনার ওয়েবসাইটে সুশৃঙ্খল, রেসপনসিভ এবং ইউজার-ফ্রেন্ডলি ফর্ম তৈরি করতে সাহায্য করে। ফর্মের বিভিন্ন উপাদান যেমন ইনপুট ফিল্ড, বাটন, চেকবক্স, রেডিও বাটন, সিলেক্ট, টেক্সট এরিয়া ইত্যাদি অত্যন্ত কাস্টমাইজযোগ্য এবং রেসপনসিভ।

১. ফর্ম এলিমেন্টস

Bulma ফ্রেমওয়ার্কে ফর্ম এলিমেন্টস সাধারণত দুটি অংশে ভাগ করা হয়:

1. Form Control (যে অংশে ইনপুট এবং অন্যান্য কম্পোনেন্ট থাকে)
2. Form Field (যে অংশে লেবেল এবং ইনপুট থাকে)

আপনি যখন ফর্ম তৈরি করবেন, তখন এই দুইটি অংশের ব্যবহার খুবই গুরুত্বপূর্ণ।

২. Text Input (টেক্সট ইনপুট)

Bulma-তে সাধারণ টেক্সট ইনপুট ফিল্ড তৈরি করা সহজ। input ট্যাগের মাধ্যমে ইনপুট ফিল্ড তৈরি করা হয় এবং class="input" ক্লাসের মাধ্যমে Bulma এর স্টাইল প্রয়োগ করা হয়।

উদাহরণ:

<div class="field">
  <label class="label">Your Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Enter your name">
  </div>
</div>

এখানে:

• field: ফর্ম এলিমেন্টের একক কন্টেইনার।
• label: ইনপুট ফিল্ডের জন্য টেক্সট (লেবেল)।
• control: ইনপুট ফিল্ডের নিয়ন্ত্রণ অংশ।
• input: টেক্সট ইনপুট ফিল্ড।

৩. Password Input (পাসওয়ার্ড ইনপুট)

পাসওয়ার্ড ইনপুট ফিল্ডও একইভাবে তৈরি করা যায়, তবে এখানে type="password" ব্যবহার করা হয়, যাতে ইনপুটটি আড়াল থাকে।

উদাহরণ:

<div class="field">
  <label class="label">Password</label>
  <div class="control">
    <input class="input" type="password" placeholder="Enter your password">
  </div>
</div>

৪. Textarea (টেক্সট এরিয়া)

টেক্সট এরিয়া ব্যবহার করে বড় ইনপুট ফিল্ড তৈরি করা যায়, যেমন কমেন্ট বা বড় টেক্সট ইনপুট।

উদাহরণ:

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Write your message here"></textarea>
  </div>
</div>

এখানে textarea ট্যাগ ব্যবহার করা হয়েছে, যা বড় আকারের টেক্সট ইনপুট এর জন্য।

৫. Select (ড্রপডাউন সিলেক্ট)

Bulma এর সিলেক্ট উপাদান ব্যবহার করে আপনি একটি ড্রপডাউন সিলেক্ট বক্স তৈরি করতে পারেন। এই সিলেক্ট বক্সটি ব্যবহারকারীদের নির্দিষ্ট অপশন থেকে নির্বাচন করতে দেয়।

উদাহরণ:

<div class="field">
  <label class="label">Select your country</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select a country</option>
        <option>USA</option>
        <option>Canada</option>
        <option>India</option>
      </select>
    </div>
  </div>
</div>

এখানে select এবং option ট্যাগ ব্যবহার করা হয়েছে, যা ড্রপডাউন মেনু তৈরি করবে।

৬. Radio Buttons (রেডিও বাটন)

Bulma রেডিও বাটন তৈরি করার জন্য input ট্যাগের সাথে type="radio" ব্যবহার করতে হয়। আপনি একাধিক রেডিও বাটন একসাথে ব্যবহার করতে পারেন, তবে একে গ্রুপ করে রাখতে হবে।

উদাহরণ:

<div class="field">
  <label class="label">Gender</label>
  <div class="control">
    <label class="radio">
      <input type="radio" name="gender" value="male">
      Male
    </label>
    <label class="radio">
      <input type="radio" name="gender" value="female">
      Female
    </label>
  </div>
</div>

এখানে দুটি রেডিও বাটন তৈরি করা হয়েছে, যার মাধ্যমে ব্যবহারকারী পুরুষ বা নারী নির্বাচন করতে পারবে।

৭. Checkboxes (চেকবক্স)

Bulma চেকবক্স তৈরি করতে input ট্যাগের সাথে type="checkbox" ব্যবহার করে থাকে। একাধিক চেকবক্সও একসাথে ব্যবহার করা যায়।

উদাহরণ:

<div class="field">
  <label class="label">Select your interests</label>
  <div class="control">
    <label class="checkbox">
      <input type="checkbox" value="sports">
      Sports
    </label>
    <label class="checkbox">
      <input type="checkbox" value="music">
      Music
    </label>
    <label class="checkbox">
      <input type="checkbox" value="reading">
      Reading
    </label>
  </div>
</div>

এখানে তিনটি চেকবক্স তৈরি করা হয়েছে, যা ব্যবহারকারীকে এক বা একাধিক অপশন চেক করতে দেয়।

৮. File Input (ফাইল ইনপুট)

ফাইল ইনপুট ফিল্ড ব্যবহার করে আপনি ব্যবহারকারীদের ফাইল আপলোড করতে অনুমতি দিতে পারেন।

উদাহরণ:

<div class="field">
  <label class="label">Upload a file</label>
  <div class="control">
    <input class="input" type="file">
  </div>
</div>

এখানে input type="file" ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে ফাইল আপলোড করতে দেয়।

৯. Submit Button (সাবমিট বাটন)

ফর্ম সাবমিট করতে একটি বাটন প্রয়োজন। Bulma এর button ক্লাস দিয়ে খুব সহজে একটি সুন্দর বাটন তৈরি করা যায়।

উদাহরণ:

<div class="field">
  <div class="control">
    <button class="button is-primary" type="submit">Submit</button>
  </div>
</div>

এখানে button is-primary ক্লাস ব্যবহার করা হয়েছে, যা একটি প্রাইমারি বাটন তৈরি করবে।

সারাংশ

Bulma এর ফর্ম কম্পোনেন্টগুলি সহজে কাস্টমাইজ করা যায় এবং এগুলোর মাধ্যমে সুন্দর, রেসপনসিভ এবং ইউজার-ফ্রেন্ডলি ফর্ম তৈরি করা সম্ভব। ফর্ম এলিমেন্টস যেমন text input, password input, textarea, select, radio buttons, checkboxes, file input, এবং submit button Bulma এর মাধ্যমে খুব সহজে তৈরি করা যায়। আপনি চাইলে এগুলোর ডিজাইন পরিবর্তন করতে পারেন বা নতুন স্টাইল অ্যাপ্লাই করতে পারেন, এবং সবকিছু খুবই রেসপনসিভ এবং ব্যবহারযোগ্য হয়।

Bulma CSS ফ্রেমওয়ার্কে Input Field এবং Textarea এর জন্য স্টাইল কাস্টমাইজেশন সহজ এবং সুন্দরভাবে করা যায়। Bulma এর ইনপুট ফিল্ডগুলো ডিফল্টভাবে সুন্দর ও সিম্পল ডিজাইন করে থাকে, এবং আপনি চাইলে এগুলোর স্টাইল সহজেই কাস্টমাইজ করতে পারেন।

১. Bulma Input Field

Bulma তে ইনপুট ফিল্ড তৈরি করতে খুবই সহজ, শুধুমাত্র input ট্যাগে class="input" যোগ করতে হবে। এর মাধ্যমে একটি সাদা বর্ডার সহ সিম্পল ইনপুট ফিল্ড তৈরি হবে। এছাড়াও, বিভিন্ন ক্লাসের মাধ্যমে আপনি ইনপুট ফিল্ডের স্টাইল পরিবর্তন করতে পারবেন।

উদাহরণ: সাধারণ Input Field

<div class="field">
  <label class="label">Your Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Enter your name">
  </div>
</div>

এখানে একটি সিম্পল ইনপুট ফিল্ড তৈরি করা হয়েছে, যা ব্যবহারকারীকে নাম ইনপুট করার জন্য অনুরোধ করবে।

২. Input Field এর ধরন কাস্টমাইজ করা

Bulma তে ইনপুট ফিল্ডের ধরন কাস্টমাইজ করা খুব সহজ। আপনি text, email, password, number ইত্যাদি ইনপুট ধরনের জন্য বিভিন্ন ফর্ম তৈরি করতে পারেন।

উদাহরণ: বিভিন্ন ইনপুট ধরন

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="Enter your email">
  </div>
</div>

<div class="field">
  <label class="label">Password</label>
  <div class="control">
    <input class="input" type="password" placeholder="Enter your password">
  </div>
</div>

<div class="field">
  <label class="label">Phone Number</label>
  <div class="control">
    <input class="input" type="tel" placeholder="Enter your phone number">
  </div>
</div>

এই উদাহরণে, আপনি একটি email, password, এবং phone number ইনপুট ফিল্ড দেখছেন।

৩. Input Field এর স্টাইল কাস্টমাইজ করা

Bulma তে আপনি ইনপুট ফিল্ডের রঙ এবং সাইজ কাস্টমাইজ করতে পারেন। is-small, is-medium, is-large, is-success, is-danger ইত্যাদি ক্লাস ব্যবহার করে আপনি ইনপুট ফিল্ডের সাইজ এবং স্টাইল পরিবর্তন করতে পারবেন।

উদাহরণ: Input Field এর স্টাইল কাস্টমাইজ করা

<div class="field">
  <label class="label">Username</label>
  <div class="control">
    <input class="input is-success" type="text" placeholder="Enter your username">
  </div>
</div>

<div class="field">
  <label class="label">Password</label>
  <div class="control">
    <input class="input is-danger" type="password" placeholder="Enter your password">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input is-large" type="email" placeholder="Enter your email">
  </div>
</div>

• is-success: গ্রিন বর্ডার সহ ইনপুট ফিল্ড।
• is-danger: রেড বর্ডার সহ ইনপুট ফিল্ড।
• is-large: বড় আকারের ইনপুট ফিল্ড।

৪. Input Field এর সঙ্গে Addons

Bulma তে ইনপুট ফিল্ডের সঙ্গে addons (যেমন: বাটন বা আইকন) যোগ করা সম্ভব। এটি সাধারণত ইনপুট ফিল্ডের পাশে একটি বাটন বা আইকন যুক্ত করতে ব্যবহৃত হয়, যেমন search বা password visibility toggle।

উদাহরণ: Addons সহ Input Field

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Enter search term">
  </div>
  <div class="control">
    <button class="button is-info">
      Search
    </button>
  </div>
</div>

এখানে একটি search ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে একটি Search বাটন ইনপুট ফিল্ডের পাশে যুক্ত করা হয়েছে।

৫. Bulma Textarea

Bulma তে textarea তৈরি করার জন্য খুবই সহজ। textarea ট্যাগে class="textarea" যোগ করে আপনি একটি সুন্দর এবং সিম্পল টেক্সট এরিয়া তৈরি করতে পারেন।

উদাহরণ: সাধারণ Textarea

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Write your message"></textarea>
  </div>
</div>

এটি একটি সাধারণ টেক্সট এরিয়া যা ব্যবহারকারীকে মেসেজ লেখার জন্য প্রদান করে।

৬. Textarea এর সাইজ কাস্টমাইজ করা

Bulma তে textarea এর সাইজ পরিবর্তন করার জন্য is-small, is-medium, is-large ক্লাস ব্যবহার করা যেতে পারে।

উদাহরণ: Textarea সাইজ কাস্টমাইজ করা

<div class="field">
  <label class="label">Message (Small)</label>
  <div class="control">
    <textarea class="textarea is-small" placeholder="Write your message"></textarea>
  </div>
</div>

<div class="field">
  <label class="label">Message (Large)</label>
  <div class="control">
    <textarea class="textarea is-large" placeholder="Write your message"></textarea>
  </div>
</div>

এখানে is-small এবং is-large ক্লাস ব্যবহার করে টেক্সট এরিয়ার সাইজ কাস্টমাইজ করা হয়েছে।

৭. Textarea এর সাথে Addons

Bulma তে textarea এর সাথে addons যোগ করা সম্ভব, যেমন ইনপুট ফিল্ডের সাথে করা যায়।

উদাহরণ: Addons সহ Textarea

<div class="field has-addons">
  <div class="control">
    <textarea class="textarea" placeholder="Write your message"></textarea>
  </div>
  <div class="control">
    <button class="button is-primary">
      Send
    </button>
  </div>
</div>

এখানে একটি textarea ফিল্ডের সাথে একটি Send বাটন যুক্ত করা হয়েছে, যা বিশেষভাবে পাঠানোর জন্য ব্যবহার করা যেতে পারে।

সারাংশ

Bulma তে input field এবং textarea এর ব্যবহার খুবই সহজ এবং সোজা। input ফিল্ডগুলো ডিফল্টভাবে সুন্দর ডিজাইন থাকে, এবং আপনি চাইলে এর ধরন, সাইজ, স্টাইল কাস্টমাইজ করতে পারেন। ইনপুট ফিল্ডে addons যোগ করে আপনি আরও কার্যকরী ফর্ম তৈরি করতে পারেন। textarea ট্যাগের মাধ্যমে আপনি বড় পরিসরের টেক্সট ইনপুট নিতে পারেন, এবং এর সাইজও কাস্টমাইজ করা যায়। Bulma এর এই সুন্দর ও সহজ স্টাইলিং ফিচারগুলো আপনাকে দ্রুত এবং কার্যকরী ওয়েব ফর্ম তৈরি করতে সহায়তা করবে।

Bulma ফ্রেমওয়ার্কের মধ্যে Select Dropdowns এবং Checkbox ও Radio Buttons এর মতো ফর্ম উপাদানগুলো খুবই সহজে স্টাইল করা যায়। Bulma এ তৈরি করা এই উপাদানগুলো দেখতে সুন্দর, ব্যবহারযোগ্য এবং রেসপনসিভ হয়। এখানে Bulma এর Select Dropdowns এবং Checkbox, Radio Buttons সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Select Dropdowns

Bulma এর select ক্লাস দিয়ে আপনি খুব সহজেই একটি স্টাইলড ড্রপডাউন তৈরি করতে পারেন। এটি সাধারণ HTML select এলিমেন্টের উপর ভিত্তি করে কাজ করে, কিন্তু Bulma এর স্টাইলের মাধ্যমে এটি আরও আকর্ষণীয় হয়ে ওঠে।

Select Dropdown তৈরি করা

<div class="field">
  <label class="label">Select a country</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select your country</option>
        <option>United States</option>
        <option>Canada</option>
        <option>India</option>
        <option>United Kingdom</option>
      </select>
    </div>
  </div>
</div>

এখানে:

• field: Bulma এর field ক্লাস ফর্মের একটি এলিমেন্টকে গ্রুপ করার জন্য ব্যবহার করা হয়।
• control: control ক্লাস ফর্মের ইনপুট বা সিলেক্ট এলিমেন্টের চারপাশে প্যাডিং এবং স্টাইল প্রয়োগ করে।
• select: সিলেক্ট এলিমেন্টটি সুন্দরভাবে স্টাইল করতে select ক্লাস ব্যবহৃত হয়।

এটি একটি বেসিক সিলেক্ট ড্রপডাউন তৈরি করবে।

সিলেক্ট ড্রপডাউনের আকার পরিবর্তন করা

Bulma তে আপনি সিলেক্ট ড্রপডাউন এর আকার নিয়ন্ত্রণ করতে পারেন is-small, is-medium, বা is-large ক্লাস ব্যবহার করে।

<div class="field">
  <label class="label">Choose a size</label>
  <div class="control">
    <div class="select is-large">
      <select>
        <option>Small</option>
        <option>Medium</option>
        <option>Large</option>
      </select>
    </div>
  </div>
</div>

এখানে is-large ক্লাস সিলেক্ট ড্রপডাউন এর আকার বড় করবে।

২. Checkbox

Bulma এর checkbox ক্লাস দিয়ে আপনি খুব সহজেই সুন্দরভাবে চেকবক্স তৈরি করতে পারেন। এটি HTML এর input type="checkbox" এলিমেন্টের উপর ভিত্তি করে কাজ করে, কিন্তু Bulma এর স্টাইলের মাধ্যমে এটি সুন্দর এবং রেসপনসিভ হয়ে ওঠে।

Checkbox তৈরি করা

<div class="field">
  <label class="label">Do you agree?</label>
  <div class="control">
    <label class="checkbox">
      <input type="checkbox"> I agree to the terms and conditions
    </label>
  </div>
</div>

এখানে:

• checkbox: checkbox ক্লাস চেকবক্সের স্টাইল প্রণয়ন করে।
• label: label এলিমেন্টের মাধ্যমে চেকবক্সের পাশে টেক্সট প্রদর্শন করা হয়।

এই কোডটি একটি সাধারণ চেকবক্স তৈরি করবে, যেখানে ব্যবহারকারী শর্তাবলীতে সম্মত হতে পারে।

চেকবক্সের আকার পরিবর্তন

Bulma তে আপনি is-small, is-medium, এবং is-large ক্লাস ব্যবহার করে চেকবক্সের আকার নিয়ন্ত্রণ করতে পারেন।

<div class="field">
  <div class="control">
    <label class="checkbox is-large">
      <input type="checkbox"> I want to receive newsletters
    </label>
  </div>
</div>

এখানে is-large ক্লাস চেকবক্সটির আকার বড় করবে।

৩. Radio Buttons

Bulma এর radio ক্লাস দিয়ে আপনি সুন্দরভাবে রেডিও বাটন তৈরি করতে পারেন। রেডিও বাটনগুলো ব্যবহার করা হয় একাধিক অপশন থেকে একটিকে নির্বাচন করতে। Bulma ফ্রেমওয়ার্কে এটি স্টাইল করা অত্যন্ত সহজ।

Radio Button তৈরি করা

<div class="field">
  <label class="label">Choose your plan</label>
  <div class="control">
    <label class="radio">
      <input type="radio" name="plan" value="basic"> Basic
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="premium"> Premium
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="enterprise"> Enterprise
    </label>
  </div>
</div>

এখানে:

• radio: radio ক্লাস রেডিও বাটনের জন্য স্টাইল প্রণয়ন করে।
• name অ্যাট্রিবিউট: একই নাম দিয়ে একাধিক রেডিও বাটনকে গ্রুপ করা হয়, যাতে ব্যবহারকারী কেবল একটিই নির্বাচন করতে পারে।

এই কোডটি তিনটি রেডিও বাটন তৈরি করবে, যেখানে ব্যবহারকারী একটি পরিকল্পনা নির্বাচন করতে পারবেন।

রেডিও বাটনের আকার পরিবর্তন

Bulma তে is-small, is-medium, এবং is-large ক্লাস ব্যবহার করে রেডিও বাটনের আকারও পরিবর্তন করা যেতে পারে।

<div class="field">
  <div class="control">
    <label class="radio is-medium">
      <input type="radio" name="size" value="small"> Small
    </label>
    <label class="radio is-medium">
      <input type="radio" name="size" value="large"> Large
    </label>
  </div>
</div>

এখানে is-medium ক্লাস রেডিও বাটনের আকার মাঝারি করবে।

৪. Disabled Checkbox এবং Radio Button

Bulma তে আপনি চেকবক্স বা রেডিও বাটনকে disabled করতে পারেন, যাতে ব্যবহারকারী সেগুলো নির্বাচন করতে না পারে।

Disabled Checkbox

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox" disabled> I cannot agree
    </label>
  </div>
</div>

Disabled Radio Button

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="plan" value="basic" disabled> Basic
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="premium" disabled> Premium
    </label>
  </div>
</div>

এখানে disabled অ্যাট্রিবিউট চেকবক্স বা রেডিও বাটনগুলোকে নিষ্ক্রিয় করে।

৫. Custom Styles with Checkbox and Radio Buttons

Bulma তে চেকবক্স এবং রেডিও বাটনের স্টাইল কাস্টমাইজ করার জন্য আপনি কাস্টম CSS ব্যবহার করতে পারেন। তবে, এটি করতে গেলে label এবং input এর উপর অতিরিক্ত স্টাইলিং প্রয়োগ করতে হয়।

উদাহরণ: কাস্টম চেকবক্স স্টাইল

/* Custom checkbox styling */
.checkbox input[type="checkbox"]:checked + span {
  color: #4CAF50; /* Green color when checked */
}

সারাংশ

Bulma ফ্রেমওয়ার্কের মাধ্যমে Select Dropdowns, Checkboxes, এবং Radio Buttons খুব সহজেই সুন্দরভাবে তৈরি করা যায়। Bulma এর স্টাইলিং ক্লাসগুলো ব্যবহার করে আপনি এই ফর্ম উপাদানগুলোকে কাস্টমাইজ করতে পারবেন এবং রেসপনসিভ ডিজাইন তৈরি করতে পারবেন। Bulma এর সহায়তায় আপনি আপনার ওয়েবসাইটে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ফর্ম এলিমেন্ট তৈরি করতে পারবেন।

Bulma CSS ফ্রেমওয়ার্কে ফর্ম তৈরির জন্য কিছু অত্যন্ত শক্তিশালী এবং সহজ ব্যবহারযোগ্য উপাদান প্রদান করা হয়েছে। এই উপাদানগুলোর মধ্যে Fieldsets এবং Control Groups অন্যতম। এগুলি ব্যবহার করে আপনি সুন্দর এবং ব্যবহারকারী-বান্ধব ফর্ম ডিজাইন করতে পারবেন। এখানে আমরা Bulma তে Form Fieldsets এবং Control Groups সম্পর্কে বিস্তারিত আলোচনা করব।

১. Form Fieldsets (ফর্ম ফিল্ডসেট)

ফর্মের একটি Fieldset হলো একটি কন্টেইনার যা ফর্মের এক বা একাধিক ফর্ম উপাদানকে গ্রুপ করতে ব্যবহৃত হয়। এটি সাধারণত একটি বর্ডার এবং টাইটেল প্রদর্শন করে, যা ফর্মের বিভিন্ন বিভাগকে আলাদা করে।

Fieldset Syntax

<fieldset>
  <legend>Personal Information</legend>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Enter your name">
    </div>
  </div>
  
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email">
    </div>
  </div>
</fieldset>

এখানে আমরা একটি fieldset ব্যবহার করেছি, যার মধ্যে একটি legend ট্যাগ আছে (যা ফর্মের শিরোনাম হিসেবে কাজ করে)। এই ফিল্ডসেটের মধ্যে দুটি ফর্ম উপাদান রয়েছে: একটি নামের জন্য ইনপুট ফিল্ড এবং একটি ইমেইল ইনপুট ফিল্ড।

২. Form Control Groups (ফর্ম কন্ট্রোল গ্রুপ)

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

Control Group Syntax

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Enter your name">
  </div>
</div>

<div class="field">
  <label class="label">Gender</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select Gender</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <label class="label">Subscription</label>
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      Subscribe to newsletter
    </label>
  </div>
</div>

এখানে:

• Name ফিল্ডটি একটি সাধারণ ইনপুট ফিল্ড।
• Gender ফিল্ডটি একটি সিলেক্ট বক্স (ড্রপডাউন)।
• Subscription ফিল্ডটি একটি চেকবক্স।

এই সব ফর্ম উপাদানকে field ক্লাসে রাখা হয়েছে, এবং control ক্লাস দ্বারা প্রত্যেকটি উপাদানকে গ্রুপ করা হয়েছে।

৩. Fieldsets এর মধ্যে Control Groups

আপনি fieldset এবং control group একসাথে ব্যবহার করে ফর্মের বিভিন্ন অংশকে আরও সাজানো এবং গ্রুপ করা ফিচার পাবেন।

উদাহরণ: Fieldset এর মধ্যে Control Groups

<fieldset>
  <legend>Contact Information</legend>
  
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email">
    </div>
  </div>

  <div class="field">
    <label class="label">Phone Number</label>
    <div class="control">
      <input class="input" type="tel" placeholder="Enter your phone number">
    </div>
  </div>

  <div class="field">
    <label class="label">Subscribe</label>
    <div class="control">
      <label class="checkbox">
        <input type="checkbox">
        I want to receive updates
      </label>
    </div>
  </div>
</fieldset>

এখানে একটি Contact Information নামে fieldset ব্যবহার করা হয়েছে, যার মধ্যে ইমেইল, ফোন নম্বর এবং একটি চেকবক্সের মতো কন্ট্রোল গ্রুপ রয়েছে।

৪. Bulma এর অন্যান্য Form কন্ট্রোল উপাদান

Bulma আরও কিছু ফর্ম কন্ট্রোল উপাদান প্রদান করে যা আপনি আপনার ফর্মে ব্যবহার করতে পারেন। এগুলোর মধ্যে রয়েছে:

1. Select (ড্রপডাউন):

   <div class="field">
     <label class="label">Gender</label>
     <div class="control">
       <div class="select">
         <select>
           <option>Select Gender</option>
           <option>Male</option>
           <option>Female</option>
         </select>
       </div>
     </div>
   </div>
   

2. Radio Buttons:

   <div class="field">
     <label class="label">Gender</label>
     <div class="control">
       <label class="radio">
         <input type="radio" name="gender">
         Male
       </label>
       <label class="radio">
         <input type="radio" name="gender">
         Female
       </label>
     </div>
   </div>
   

3. Checkboxes:

   <div class="field">
     <label class="label">Subscribe to newsletter</label>
     <div class="control">
       <label class="checkbox">
         <input type="checkbox">
         Yes, I want to subscribe
       </label>
     </div>
   </div>
   

4. Textareas:

   <div class="field">
     <label class="label">Message</label>
     <div class="control">
       <textarea class="textarea" placeholder="Enter your message"></textarea>
     </div>
   </div>
   

৫. Form Layouts এবং Alignments

Bulma আপনাকে ফর্মের উপাদানগুলোর লেআউট কাস্টমাইজ করতে is-grouped, is-horizontal, এবং is-centered ক্লাসও প্রদান করে।

Horizontal Form Example

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Name</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Enter your name">
      </div>
    </div>
  </div>
</div>

এটি একটি horizontal form উদাহরণ যেখানে লেবেল এবং ইনপুট এক লাইনে প্রদর্শিত হয়।

Grouped Form Elements Example

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-text">Cancel</button>
  </div>
</div>

এখানে দুটি বাটন একসাথে grouped অবস্থায় রাখা হয়েছে।

সারাংশ

Bulma তে Fieldsets এবং Control Groups ব্যবহার করে আপনি খুব সহজেই সুন্দর এবং কার্যকরী ফর্ম ডিজাইন করতে পারবেন। Fieldsets ব্যবহার করে আপনি ফর্মের বিভিন্ন সেগমেন্ট আলাদা করতে পারেন, এবং Control Groups ব্যবহার করে ইনপুট উপাদানগুলিকে পরিষ্কারভাবে গ্রুপ করতে পারবেন। Bulma এর ফর্ম কন্ট্রোল উপাদানগুলি, যেমন ইনপুট ফিল্ড, সিলেক্ট বক্স, রেডিও বাটন, চেকবক্স ইত্যাদি ব্যবহার করে আপনি আধুনিক, ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে পারেন।

Bulma CSS ফ্রেমওয়ার্কের মাধ্যমে আপনি সহজে আকর্ষণীয় এবং কার্যকরী ফর্ম ডিজাইন করতে পারেন। Bulma তে Form Validation এবং Custom Form Designs তৈরি করা সহজ, যা আপনাকে ব্যবহারকারীদের ইনপুট যাচাই এবং কাস্টম স্টাইল প্রয়োগে সাহায্য করবে।

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

Bulma তে ফর্ম ভ্যালিডেশন ব্যবহার করে আপনি ব্যবহারকারীদের ইনপুট যাচাই করতে পারেন। যদিও Bulma নিজে কোনো JavaScript ভ্যালিডেশন প্রদান করে না, তবে আপনি HTML5 এর বিল্ট-ইন ফর্ম ভ্যালিডেশন সহ Bulma এর স্টাইল ব্যবহার করতে পারেন।

HTML5 ফর্ম ভ্যালিডেশন উদাহরণ:

<form>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Enter your name" required>
    </div>
    <p class="help is-danger">This field is required.</p>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Enter your email" required>
    </div>
    <p class="help is-danger">Please enter a valid email address.</p>
  </div>

  <div class="field">
    <label class="label">Password</label>
    <div class="control">
      <input class="input" type="password" placeholder="Enter your password" required minlength="6">
    </div>
    <p class="help is-danger">Password must be at least 6 characters long.</p>
  </div>

  <div class="field">
    <div class="control">
      <button class="button is-primary" type="submit">Submit</button>
    </div>
  </div>
</form>

এখানে, ফর্মে required, minlength, এবং type="email" এর মাধ্যমে HTML5 এর ভ্যালিডেশন ব্যবহার করা হয়েছে। ব্যবহারকারী যদি সঠিক তথ্য না দেয়, তবে ফর্ম সাবমিট করার সময় ব্রাউজার একটি সতর্কতা দেখাবে।

• .help ক্লাস ব্যবহার করে একটি সাহায্য বার্তা (help message) প্রদান করা হয়েছে।
• .is-danger ক্লাস ব্যবহার করা হয়েছে বার্তাগুলোকে লাল রঙের করার জন্য, যা ভ্যালিডেশন বার্তাগুলোর জন্য ব্যবহৃত হয়।

২. Custom Form Designs (কাস্টম ফর্ম ডিজাইন)

Bulma তে ফর্ম এলিমেন্টগুলোর কাস্টম ডিজাইন সহজেই করা যায়। আপনি ফর্মের প্রতিটি অংশ যেমন input, select, textarea, এবং button কাস্টমাইজ করে একটি সুন্দর এবং ব্যবহারকারী বান্ধব ফর্ম তৈরি করতে পারেন।

উদাহরণ: Custom Form Design

<form>
  <div class="field">
    <label class="label">Username</label>
    <div class="control has-icons-left">
      <input class="input is-medium" type="text" placeholder="Enter your username">
      <span class="icon is-small is-left">
        <i class="fas fa-user"></i>
      </span>
    </div>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control has-icons-left">
      <input class="input is-medium" type="email" placeholder="Enter your email">
      <span class="icon is-small is-left">
        <i class="fas fa-envelope"></i>
      </span>
    </div>
  </div>

  <div class="field">
    <label class="label">Password</label>
    <div class="control has-icons-left">
      <input class="input is-medium" type="password" placeholder="Enter your password">
      <span class="icon is-small is-left">
        <i class="fas fa-lock"></i>
      </span>
    </div>
  </div>

  <div class="field">
    <div class="control">
      <button class="button is-primary is-medium">Register</button>
    </div>
  </div>
</form>

এই উদাহরণে, আমরা has-icons-left ক্লাস ব্যবহার করে ইনপুট ফিল্ডের বাম পাশে আইকন যোগ করেছি। এছাড়া is-medium ক্লাস ব্যবহার করা হয়েছে ফর্ম এলিমেন্টগুলোকে মাঝারি আকারে তৈরি করতে।

• has-icons-left ক্লাস ইনপুট ফিল্ডে আইকন যোগ করার জন্য ব্যবহৃত হয়।
• icon is-small is-left ক্লাস আইকনটি ইনপুট ফিল্ডের বাম পাশে ছোট আকারে দেখানোর জন্য ব্যবহৃত হয়।

৩. কাস্টম বাটন ডিজাইন

Bulma এর button ক্লাস ব্যবহার করে আপনি সহজেই কাস্টম বাটন তৈরি করতে পারেন, যা বিভিন্ন রঙ এবং স্টাইল সহ আসবে। এছাড়া is-large, is-small, এবং is-fullwidth ক্লাস ব্যবহার করে আপনি বাটনের আকার এবং প্রস্থ কাস্টমাইজ করতে পারবেন।

উদাহরণ: Custom Button Design

<div class="field">
  <div class="control">
    <button class="button is-primary is-rounded is-large">
      <span class="icon">
        <i class="fas fa-check"></i>
      </span>
      <span>Submit</span>
    </button>
  </div>
</div>

এখানে is-rounded ক্লাস বাটনটির কোণগুলোকে গোলাকার করেছে, এবং is-large ক্লাস বাটনটিকে বড় আকারে তৈরি করেছে। icon ক্লাস এবং fas fa-check আইকন ব্যবহার করে বাটনের মধ্যে একটি চেক মার্ক আইকন যোগ করা হয়েছে।

৪. Select এবং Textarea কাস্টমাইজেশন

Bulma তে select এবং textarea এর ডিজাইনও কাস্টমাইজ করা যায়। Bulma এর ডিফল্ট ডিজাইন খুবই সিম্পল, তবে আপনি চাইলে এগুলো আরও কাস্টমাইজ করতে পারেন।

উদাহরণ: Custom Select Dropdown

<div class="field">
  <label class="label">Select a country</label>
  <div class="control">
    <div class="select is-fullwidth">
      <select>
        <option>United States</option>
        <option>Canada</option>
        <option>United Kingdom</option>
        <option>Australia</option>
      </select>
    </div>
  </div>
</div>

এখানে is-fullwidth ক্লাস ব্যবহার করা হয়েছে, যাতে সিলেক্ট ড্রপডাউন পুরো প্রস্থে প্রদর্শিত হয়।

উদাহরণ: Custom Textarea

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea is-medium" placeholder="Write your message here..."></textarea>
  </div>
</div>

এখানে textarea is-medium ব্যবহার করে টেক্সট এরিয়া ফিল্ডটির আকার কাস্টমাইজ করা হয়েছে।

৫. Form Components with Validation Feedback

ফর্ম ইনপুট ফিল্ডের সাথে সঠিক ইনপুট যাচাই ও ফিডব্যাক প্রদান করার জন্য .is-danger, .is-success, এবং .help ক্লাস ব্যবহার করতে পারেন। যখন ব্যবহারকারী সঠিক বা ভুল তথ্য ইনপুট করবেন, তখন আপনি সেই ইনপুট ফিল্ডে ভাল/খারাপ ইনপুটের স্টাইল প্রদর্শন করতে পারেন।

উদাহরণ: Form with Validation Feedback

<form>
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input is-danger" type="text" placeholder="Enter your username" required>
    </div>
    <p class="help is-danger">This field is required.</p>
  </div>

  <div class="field">
    <div class="control">
      <button class="button is-primary">Submit</button>
    </div>
  </div>
</form>

এখানে .is-danger ক্লাস ইনপুট ফিল্ডের রঙ লাল করে দেয়, যা ভুল ইনপুট বা ভ্যালিডেশন ফেইল হলে প্রদর্শিত হয়।

সারাংশ

Bulma তে Form Validation এবং Custom Form Designs ব্যবহার করা সহজ। আপনি HTML5 এর বিল্ট-ইন ভ্যালিডেশন ব্যবহার করতে পারেন, এবং ফর্ম উপাদানগুলোর স্টাইল কাস্টমাইজ করতে Bulma এর ক্লাসগুলি প্রয়োগ করতে পারেন। ফর্মের উপাদানগুলো যেমন input, select, textarea, এবং button এর জন্য কাস্টম ডিজাইন তৈরি করতে Bulma একটি চমৎকার ফ্রেমওয়ার্ক। আপনি কাস্টম বাটন, আইকন যুক্ত ইনপুট, এবং বিভিন্ন রঙ এবং আকারে ফর্ম উপাদান কাস্টমাইজ করে সুন্দর

এবং কার্যকরী ফর্ম ডিজাইন করতে পারবেন।