Materialize এর Form Elements

Materialize CSS ফ্রেমওয়ার্কটি ইউজার ইন্টারফেস ডিজাইনে উন্নত এবং সুন্দর form elements প্রদান করে, যা খুবই কার্যকরী এবং সিম্পল। Materialize এর ফর্ম উপাদানগুলো Material Design এর নীতির সাথে সামঞ্জস্যপূর্ণ এবং এটি responsive (প্রতিক্রিয়াশীল) ও user-friendly। এখানে Materialize এর বিভিন্ন ফর্ম উপাদান এবং তাদের ব্যবহার নিয়ে আলোচনা করা হলো।

Materialize Form Elements

Materialize CSS ফ্রেমওয়ার্কে input fields, select menus, checkboxes, radio buttons, textarea, date pickers, switches ইত্যাদি বিভিন্ন ফর্ম উপাদান রয়েছে যা সহজে কাস্টমাইজ এবং ব্যবহার করা যায়।

১. Input Fields

Materialize এ text input ফিল্ডগুলো খুবই সিম্পল এবং স্টাইলিশ। আপনি floating labels ব্যবহার করতে পারেন, যা ব্যবহারকারীর জন্য আরও সুবিধাজনক করে তোলে।

<div class="input-field">
  <input id="name" type="text" class="validate">
  <label for="name">Name</label>
</div>

এখানে input-field ক্লাস ব্যবহার করা হয়েছে এবং validate ক্লাস ব্যবহার করে ইনপুট ফিল্ডটি যাচাই করা হয়। label এর মাধ্যমে ইনপুট ফিল্ডের নাম প্রদর্শিত হয় এবং floating label দ্বারা ইউজার যখন ইনপুট দেয়, তখন লেবেলটি ওপরে চলে যায়।

২. Password Input

Password ইনপুট ফিল্ডেও একই রকম স্টাইল এবং বৈশিষ্ট্য রয়েছে। আপনি eye icon ব্যবহার করতে পারেন, যা পাসওয়ার্ড দেখানোর জন্য ব্যবহৃত হয়।

<div class="input-field">
  <input id="password" type="password" class="validate">
  <label for="password">Password</label>
</div>

এখানে type="password" ব্যবহার করা হয়েছে, যা পাসওয়ার্ড ইনপুট ফিল্ডের জন্য সঠিক ফিচার প্রদান করে।

৩. Checkboxes

Materialize CSS এ checkboxes খুব সহজে তৈরি করা যায়। সাধারণত multiple selections এর জন্য এটি ব্যবহৃত হয়। এর মাধ্যমে আপনি ইউজারদের একাধিক অপশন নির্বাচিত করতে পারবেন।

<p>
  <label>
    <input type="checkbox" class="filled-in" />
    <span>Remember me</span>
  </label>
</p>

এখানে filled-in ক্লাস ব্যবহার করা হয়েছে, যা বক্সটির ভেতর রঙ পূর্ণ করে। এছাড়া span দিয়ে বক্সের পাশের টেক্সট যুক্ত করা হয়েছে।

৪. Radio Buttons

Radio buttons একাধিক অপশন থেকে একটি অপশন নির্বাচন করার জন্য ব্যবহার করা হয়। Materialize এ রেডিও বাটনগুলো খুবই স্টাইলিশ এবং সহজে কাস্টমাইজ করা যায়।

<p>
  <label>
    <input name="group1" type="radio" checked />
    <span>Option 1</span>
  </label>
</p>
<p>
  <label>
    <input name="group1" type="radio" />
    <span>Option 2</span>
  </label>
</p>

এখানে name="group1" ব্যবহার করা হয়েছে, যাতে একই গ্রুপের রেডিও বাটনগুলোর মধ্যে একটিই নির্বাচিত হবে। checked ক্লাসটি প্রথম অপশনটিকে ডিফল্ট সিলেক্ট করে।

৫. Select Menus

Materialize এ select menus খুবই সুবিধাজনক এবং সুন্দরভাবে ডিজাইন করা যায়। এটি dropdown list তৈরি করতে সহায়ক।

<div class="input-field">
  <select>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Options</label>
</div>

এখানে select এলিমেন্টের মাধ্যমে ড্রপডাউন তৈরি করা হয়েছে এবং option দিয়ে এর মান নির্ধারণ করা হয়েছে।

৬. Textarea

Textarea এলিমেন্টটি ব্যবহারকারীদের বড় আকারে টেক্সট ইনপুট দেয়ার জন্য ব্যবহৃত হয়। Materialize এ floating label ব্যবহার করা হয়, যা UI কে আরও সুন্দর এবং ইন্টারেক্টিভ করে তোলে।

<div class="input-field">
  <textarea id="textarea1" class="materialize-textarea"></textarea>
  <label for="textarea1">Textarea</label>
</div>

এখানে materialize-textarea ক্লাস ব্যবহার করা হয়েছে, যা টেক্সটএরিয়া ফিল্ডকে সঠিকভাবে স্টাইল করে।

৭. Date Picker

Materialize CSS এ date picker ব্যবহার করা যায়, যা ইউজারদের একটি নির্দিষ্ট তারিখ নির্বাচন করতে সাহায্য করে।

<div class="input-field">
  <input type="text" class="datepicker">
  <label for="datepicker">Select a date</label>
</div>

এখানে datepicker ক্লাস ব্যবহার করা হয়েছে, যা ইউজারদের একটি তারিখ নির্বাচন করার জন্য ডেট পিকার প্রদর্শন করে।

৮. Switches

Switches হলো একটি আধুনিক এবং সিম্পল স্টাইলের বাটন, যা সাধারণত হ্যাঁ/না অথবা চালু/বন্ধ অপশন প্রদর্শন করতে ব্যবহৃত হয়।

<p>
  <label>
    <input type="checkbox" class="switch" />
    <span class="lever"></span>
  </label>
</p>

এখানে switch ক্লাস দ্বারা বাটনটি সুইচের মতো তৈরি হয়েছে এবং lever ক্লাস দ্বারা এটি চালু/বন্ধ অবস্থায় পরিবর্তিত হয়।

উপসংহার

Materialize CSS এর form elements ওয়েব ডিজাইনে ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব উপাদান প্রদান করে। Input fields, checkboxes, radio buttons, select menus, textarea, date pickers, switches ইত্যাদি ফর্ম উপাদানগুলো খুবই সহজে কাস্টমাইজ করা যায় এবং Materialize CSS এর দ্বারা খুবই সুন্দরভাবে প্রদর্শিত হয়। এই ফর্ম উপাদানগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেস আরও আকর্ষণীয় এবং ফাংশনাল করতে পারবেন।