Bulma এর Input Field এবং Textarea

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 এর এই সুন্দর ও সহজ স্টাইলিং ফিচারগুলো আপনাকে দ্রুত এবং কার্যকরী ওয়েব ফর্ম তৈরি করতে সহায়তা করবে।