Form Validation এবং Custom Form Elements কাস্টমাইজেশন

Material Design Lite (MDL) ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই ফর্ম তৈরি করতে পারেন এবং সেগুলোর ভ্যালিডেশন ও কাস্টমাইজেশন করতে পারেন। MDL ফ্রেমওয়ার্কের মধ্যে বিভিন্ন Form Components (যেমন Text Fields, Checkboxes, Radio Buttons, Selects, etc.) এবং ফর্ম ভ্যালিডেশন সরঞ্জাম রয়েছে, যা আপনাকে একটি আধুনিক এবং কার্যকরী ব্যবহারকারী অভিজ্ঞতা (UX) প্রদান করতে সহায়তা করে।

এখানে, আমরা দেখবো কীভাবে MDL ব্যবহার করে ফর্ম ভ্যালিডেশন এবং কাস্টম ফর্ম এলিমেন্ট কাস্টমাইজ করা যায়।

ফর্ম ভ্যালিডেশন MDL-এ

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

উদাহরণ: Basic Form Validation

<form action="#" method="post">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="username" required>
    <label class="mdl-textfield__label" for="username">Username</label>
    <span class="mdl-textfield__error">Username is required!</span>
  </div>

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="email" id="email" required>
    <label class="mdl-textfield__label" for="email">Email</label>
    <span class="mdl-textfield__error">Valid email is required!</span>
  </div>

  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    Submit
  </button>
</form>

এখানে:

• required অ্যাট্রিবিউট ইনপুট ফিল্ডে যোগ করা হয়েছে, যা নিশ্চিত করে যে ইউজার ইনপুটটি পূর্ণ করেছে।
• mdl-textfield__error ক্লাসটি ত্রুটি বার্তা প্রদর্শন করতে ব্যবহৃত হয়েছে।
• MDL এর Floating Labels ব্যবহৃত হয়েছে, যাতে ফর্ম লেবেলটি ইনপুট ফিল্ডের উপরে স্লাইড করে এবং ব্যবহারকারী সহজে ফিল্ডের উদ্দেশ্য বুঝতে পারে।

কাস্টম ফর্ম এলিমেন্ট কাস্টমাইজেশন MDL-এ

MDL ফ্রেমওয়ার্কের অনেক ফর্ম এলিমেন্ট কাস্টমাইজ করা সম্ভব, এবং আপনি ফর্মের ডিজাইন পরিবর্তন করে আপনার প্রজেক্টের প্রয়োজন অনুসারে সুন্দর এবং ইন্টারঅ্যাক্টিভ ইন্টারফেস তৈরি করতে পারেন। এই সেকশনে আমরা MDL এর কাস্টম ফর্ম এলিমেন্ট কাস্টমাইজেশন দেখবো, যেমন Checkboxes, Radio Buttons, Select Menus, এবং Text Fields।

১. কাস্টম Text Field

MDL এর Text Fields ইন্টারঅ্যাক্টিভ এবং সুন্দর। আপনি floating label ব্যবহার করে সহজে টেক্সট ইনপুট ফিল্ড কাস্টমাইজ করতে পারেন।

উদাহরণ: Floating Label Text Field

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="name" required>
  <label class="mdl-textfield__label" for="name">Your Name</label>
</div>

এখানে, mdl-textfield--floating-label ক্লাসটি ইনপুট ফিল্ডে একটি স্লাইডিং লেবেল তৈরি করবে।

২. কাস্টম Checkbox

MDL এর Checkboxes সাধারণ চেকবক্সের চেয়ে একটু বেশি স্টাইলড এবং ব্যবহারকারীর জন্য সুন্দর দেখায়।

উদাহরণ: Custom Checkbox

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Accept Terms and Conditions</span>
</label>

এখানে, mdl-checkbox ক্লাস ব্যবহার করে চেকবক্সটি MDL স্টাইলে তৈরি করা হয়েছে। mdl-js-ripple-effect ক্লাসটি রিঁপল ইফেক্ট যোগ করতে ব্যবহৃত হয়েছে, যা স্লাইড এবং ক্লিক ইফেক্ট তৈরি করে।

৩. কাস্টম Radio Button

MDL এর Radio Buttons স্বাভাবিক রেডিও বাটনের তুলনায় আরো আধুনিক এবং সুদৃশ্য।

উদাহরণ: Custom Radio Button

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio-1">
  <input type="radio" id="radio-1" class="mdl-radio__button" name="group1" value="1">
  <span class="mdl-radio__label">Option 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio-2">
  <input type="radio" id="radio-2" class="mdl-radio__button" name="group1" value="2">
  <span class="mdl-radio__label">Option 2</span>
</label>

এখানে, mdl-radio ক্লাস ব্যবহার করে সুন্দর রেডিও বাটন তৈরি করা হয়েছে।

৪. কাস্টম Select Menu

MDL এর Select Menus ব্যবহার করে আপনি ড্রপডাউন মেনু তৈরি করতে পারেন যা খুবই সুন্দর এবং কার্যকরী।

উদাহরণ: Custom Select Menu

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <select class="mdl-textfield__input" id="sample2" required>
    <option value="" disabled selected>Select an Option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <label class="mdl-textfield__label" for="sample2">Select Menu</label>
</div>

এখানে, mdl-textfield--floating-label এবং mdl-textfield__input ক্লাস ব্যবহার করে সুন্দর একটি Select Menu তৈরি করা হয়েছে।

সারাংশ

MDL (Material Design Lite) ফ্রেমওয়ার্কে Form Validation এবং Custom Form Elements কাস্টমাইজেশন খুবই সহজ এবং সুবিধাজনক। MDL ফ্রেমওয়ার্কের সাহায্যে আপনি আধুনিক Text Fields, Checkboxes, Radio Buttons, Select Menus ইত্যাদি তৈরি করতে পারেন, যা আপনার ওয়েবসাইটের ডিজাইনকে আরও সুন্দর, ইন্টারঅ্যাক্টিভ এবং ব্যবহারকারীর জন্য আরও কার্যকরী করে তোলে। MDL ফর্ম ভ্যালিডেশন সরাসরি HTML5 ফিচারগুলো ব্যবহার করে সহজেই করতে পারে, যাতে ব্যবহারকারী ইন্টারফেস এবং কার্যকারিতা উন্নত হয়।