Form Validation এবং Custom Form Designs

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 একটি চমৎকার ফ্রেমওয়ার্ক। আপনি কাস্টম বাটন, আইকন যুক্ত ইনপুট, এবং বিভিন্ন রঙ এবং আকারে ফর্ম উপাদান কাস্টমাইজ করে সুন্দর

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