Materialize এর ফর্মস এবং ইনপুট এলিমেন্টস

Materialize CSS ফ্রেমওয়ার্কটি ওয়েব ডিজাইন এবং ডেভেলপমেন্টে বিশেষভাবে জনপ্রিয় তার forms এবং input elements এর জন্য। Forms এবং inputs ওয়েবসাইটে ইউজারদের থেকে তথ্য সংগ্রহ করার একটি গুরুত্বপূর্ণ উপাদান। Materialize CSS সহজেই সুন্দর এবং ইউজার-বান্ধব ফর্ম তৈরি করতে সহায়তা করে, যা responsive (প্রতিক্রিয়াশীল) এবং modern ডিজাইনের সাথে মানানসই।

Materialize Forms

Materialize CSS ফর্ম তৈরি করার জন্য বেশ কিছু বিল্ট-ইন ক্লাস প্রদান করে। এগুলো ব্যবহার করে আপনি বিভিন্ন ধরনের ফর্ম উপাদান তৈরি করতে পারেন, যেমন input fields, checkboxes, radio buttons, select dropdowns, text areas, submit buttons ইত্যাদি। Materialize CSS এর ফর্মগুলো এর সাথে জড়িত CSS এবং JavaScript প্লাগইনগুলোর মাধ্যমে অটোমেটিক্যালি সুন্দরভাবে স্টাইল করা থাকে।

Simple Form Example

<form action="#">
  <div class="input-field">
    <input type="text" id="name" required>
    <label for="name">Your Name</label>
  </div>

  <div class="input-field">
    <input type="email" id="email" required>
    <label for="email">Email</label>
  </div>

  <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</form>

এই উদাহরণে:

• input-field ক্লাস ব্যবহার করা হয়েছে, যা ফর্মের ইনপুট এলিমেন্টগুলোর সঠিক স্টাইলিং নিশ্চিত করে।
• label ট্যাগ ইনপুট ফিল্ডের নাম বা ট্যাগ প্রদর্শন করতে ব্যবহার করা হয়।
• required অ্যাট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের জন্য বাধ্যতামূলক পূরণ নিশ্চিত করা হয়েছে।

Input Elements in Materialize

Materialize CSS ইনপুট এলিমেন্টগুলোর জন্য একাধিক কাস্টম ক্লাস প্রদান করে, যার মাধ্যমে আপনি text inputs, password fields, radio buttons, checkboxes, select dropdowns, file uploads ইত্যাদি ডিজাইন করতে পারবেন।

Text Input

<div class="input-field">
  <input type="text" id="username" required>
  <label for="username">Username</label>
</div>

• input-field ক্লাস ইনপুট ফিল্ডের সঠিক স্টাইলিং প্রদান করে।
• label ক্লাসের মাধ্যমে ইনপুট ফিল্ডের নাম প্রদর্শিত হয়।

Password Input

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

• password ইনপুট ফিল্ড ব্যবহারকারীদের গোপন তথ্য প্রবেশের জন্য উপযোগী।

Email Input

<div class="input-field">
  <input type="email" id="email" required>
  <label for="email">Email</label>
</div>

• email ইনপুট ফিল্ড ইমেল এড্রেস সংগ্রহের জন্য ব্যবহৃত হয়।

Materialize Forms for Checkbox, Radio Button and Select

Materialize CSS ফর্মের অন্যান্য ইনপুট এলিমেন্টগুলোও স্টাইল করার জন্য প্রস্তুত ক্লাস প্রদান করে, যেমন checkbox, radio buttons, এবং select dropdowns।

Checkbox

<p>
  <label>
    <input type="checkbox" />
    <span>Accept terms and conditions</span>
  </label>
</p>

• checkbox ইনপুট এলিমেন্টে ইউজারদের একটি বা একাধিক অপশন নির্বাচন করার সুযোগ দেওয়া হয়।

Radio Button

<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>

• radio বাটন ব্যবহার করে ইউজারদের একাধিক অপশন থেকে একটি অপশন নির্বাচন করার সুযোগ দেওয়া হয়।

Select Dropdown

<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>Select a number</label>
</div>

• select ড্রপডাউন ব্যবহার করে ইউজাররা একটি তালিকা থেকে একটি অপশন নির্বাচন করতে পারেন।

File Upload

<div class="file-field input-field">
  <div class="btn">
    <span>File</span>
    <input type="file" />
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text" />
  </div>
</div>

• file input ব্যবহারকারীকে ফাইল আপলোড করার সুবিধা দেয়।

Submit Button

Materialize CSS ফর্মের submit button এর জন্য সুন্দর স্টাইল দেয়, যা ইউজারদের কাছে আরও আকর্ষণীয় হয়।

<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>

• btn ক্লাসটি একটি স্টাইলিশ বাটন তৈরি করে।
• waves-effect ক্লাস ইন্টারঅ্যাক্টিভ ওয়েভ (এনিমেশন) প্রদান করে যখন ইউজার বাটনে ক্লিক করেন।

Form Validation in Materialize

Materialize CSS ফর্মের ইনপুট এলিমেন্টের জন্য স্বয়ংক্রিয় validation সরবরাহ করে। উদাহরণস্বরূপ, যদি কোনো ইনপুট ফিল্ড ভুলভাবে পূর্ণ হয়, তবে required এবং pattern অ্যাট্রিবিউটগুলি আপনাকে ব্যবহারকারীদের সতর্ক করার জন্য সাহায্য করবে।

<form action="#">
  <div class="input-field">
    <input type="text" id="name" required>
    <label for="name">Your Name</label>
    <span class="helper-text" data-error="This field is required" data-success="Looks good!"></span>
  </div>

  <div class="input-field">
    <input type="email" id="email" class="validate" required>
    <label for="email">Email</label>
  </div>

  <button class="btn waves-effect waves-light" type="submit">Submit</button>
</form>

এখানে:

• helper-text ইউজারদের ইনপুট ফিল্ডের স্থানে হেল্পার টেক্সট প্রদর্শন করে, যেমন data-error এবং data-success।

উপসংহার

Materialize CSS ফ্রেমওয়ার্কটি forms এবং input elements তৈরিতে এক শক্তিশালী টুল। এর pre-styled components ব্যবহার করে আপনি দ্রুত এবং আকর্ষণীয় ফর্ম তৈরি করতে পারেন, যা responsive এবং modern ডিজাইনের সাথে পুরোপুরি মানানসই। Materialize এর ফর্ম সিস্টেমের মাধ্যমে আপনি সহজেই ফর্ম উপাদান কাস্টমাইজ করতে পারবেন এবং ইউজার ইন্টারফেসে উন্নতি আনতে পারবেন।

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

Materialize CSS ফ্রেমওয়ার্কে Text Inputs, Radio Buttons, এবং Checkboxes এর জন্য প্রস্তুত স্টাইল এবং উপাদান রয়েছে যা ওয়েব ডিজাইনে অনেক সুবিধা প্রদান করে। Materialize এর এই উপাদানগুলো Material Design এর নীতির উপর ভিত্তি করে তৈরি, যা ব্যবহারকারীদের জন্য একটি আধুনিক, সোজাসাপ্টা এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।

Text Inputs

Text inputs হলো একটি ওয়েব ফর্মের অন্যতম গুরুত্বপূর্ণ উপাদান, যার মাধ্যমে ব্যবহারকারী তথ্য প্রদান করে। Materialize CSS এ text input এর জন্য সুন্দর স্টাইল ও এনিমেশন রয়েছে, যা ব্যবহারকারীকে একটি সজীব অভিজ্ঞতা প্রদান করে।

উদাহরণ:

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

এখানে:

• input-field ক্লাসটি ব্যবহারকারীর ইনপুট ফিল্ডকে সঠিকভাবে স্টাইল করার জন্য ব্যবহৃত।
• validate ক্লাসটি ইনপুটের ভ্যালিডেশনকে সক্রিয় করে।
• label ট্যাগটি ইনপুট ফিল্ডের জন্য একটি ট্যাগ প্রদান করে যা ইউজারদের বোঝাতে সহায়ক।

Text Input এর বৈশিষ্ট্য:

• Floating Labels: Materialize এর ইনপুট ফিল্ডের ট্যাগগুলো floating থাকে, অর্থাৎ ইনপুট ফিল্ডে কিছু টাইপ করলে ট্যাগটি উপরে চলে যায়।
• Validation: validate ক্লাসের মাধ্যমে আপনি ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করতে পারেন, যেমন required, email, min-length ইত্যাদি।

Radio Buttons

Radio buttons সাধারণত ব্যবহার করা হয় যেখানে একজন ব্যবহারকারী একটি নির্দিষ্ট বিকল্প নির্বাচন করতে পারে। Materialize CSS এ radio buttons সুন্দরভাবে স্টাইল করা হয় এবং এর উপর কিছু এনিমেশনও প্রয়োগ করা হয় যা ইউজার ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় করে তোলে।

উদাহরণ:

<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": একই গ্রুপের রেডিও বাটনগুলির জন্য একটিই name ব্যবহার করতে হবে যাতে শুধুমাত্র একটি বিকল্প নির্বাচন করা যায়।
• checked: এটি একটি রেডিও বাটনকে ডিফল্টভাবে নির্বাচিত অবস্থায় রাখে।

Radio Button এর বৈশিষ্ট্য:

• Custom Styling: Materialize রেডিও বাটনগুলোর জন্য খুবই আধুনিক এবং সোজাসাপ্টা স্টাইল প্রদান করে।
• Selected Option: ইউজার যখন একটি রেডিও বাটন নির্বাচন করেন, তখন এটি সুন্দরভাবে নির্দেশনা দেয়।

Checkboxes

Checkboxes সাধারণত ব্যবহার করা হয় যেখানে একাধিক বিকল্প নির্বাচন করার প্রয়োজন হয়। Materialize CSS এ checkboxes এর ডিজাইন খুবই সহজ, পরিষ্কার এবং ইন্টারঅ্যাকটিভ। ইউজাররা সহজেই একাধিক বিকল্প চেক করতে পারেন।

উদাহরণ:

<p>
  <label>
    <input type="checkbox" />
    <span>Option 1</span>
  </label>
</p>
<p>
  <label>
    <input type="checkbox" checked />
    <span>Option 2</span>
  </label>
</p>

এখানে:

• input[type="checkbox"]: এটি চেকবক্স তৈরির জন্য ব্যবহৃত।
• checked: এটি একটি চেকবক্সকে ডিফল্টভাবে নির্বাচিত অবস্থায় রাখে।

Checkbox এর বৈশিষ্ট্য:

• Customizable: Materialize এর চেকবক্সগুলো কাস্টমাইজ করা সহজ, এবং এগুলো মোবাইল ডিভাইসে সুন্দরভাবে কাজ করে।
• Multiple Selections: চেকবক্স ব্যবহারকারীকে একাধিক বিকল্প নির্বাচনের সুযোগ দেয়, যা বিভিন্ন ওয়েব ফর্মে খুবই সহায়ক।

Styling with Materialize CSS

Materialize CSS এ text inputs, radio buttons, এবং checkboxes সবকিছুর জন্য প্রি-স্টাইলড ক্লাস এবং এডভান্সড কাস্টমাইজেশন পদ্ধতি রয়েছে। আপনি সহজেই এগুলোকে আপনার ডিজাইনের সাথে একীভূত করতে পারেন। এছাড়া SASS ব্যবহার করে আরও কাস্টম রঙ, আকার এবং ডিজাইন পরিবর্তন করা সম্ভব।

উদাহরণ:

<div class="input-field">
  <input id="email" type="email" class="validate">
  <label for="email">Email</label>
</div>

<p>
  <label>
    <input name="group1" type="radio" />
    <span>Yes</span>
  </label>
</p>
<p>
  <label>
    <input name="group1" type="radio" />
    <span>No</span>
  </label>
</p>

<p>
  <label>
    <input type="checkbox" />
    <span>Agree to terms</span>
  </label>
</p>

উপসংহার

Materialize CSS এর text inputs, radio buttons, এবং checkboxes ব্যবহারকারীদের জন্য একটি উন্নত, সুন্দর এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। Materialize এর প্রস্তুত উপাদানগুলি ডিজাইনারদের ওয়েবসাইট বা অ্যাপের ডিজাইন দ্রুত এবং কার্যকরীভাবে তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি আধুনিক ডিজাইনের সাথে সঙ্গতিপূর্ণ ইনপুট ফিল্ড, রেডিও বাটন এবং চেকবক্স তৈরি করতে পারেন।

Materialize CSS ফ্রেমওয়ার্কটি ওয়েব ফর্ম তৈরি করার জন্য অনেক কার্যকরী কম্পোনেন্ট এবং বৈশিষ্ট্য প্রদান করে, এর মধ্যে রয়েছে form validation (ফর্ম ভ্যালিডেশন) এবং custom error messages (কাস্টম এরর মেসেজ)। এই দুটি বৈশিষ্ট্য ব্যবহার করে আপনি আপনার ফর্মে সহজে ইনপুট ভ্যালিডেশন এবং ব্যবহারকারীর জন্য পরিষ্কার এবং কাস্টম এরর মেসেজ তৈরি করতে পারবেন।

Form Validation

Form validation হল একটি প্রক্রিয়া যেখানে ফর্মের ইনপুটগুলি যাচাই করা হয়, যাতে ইউজার সঠিক তথ্য প্রদান করেছে তা নিশ্চিত করা যায়। Materialize CSS এর মাধ্যমে আপনি সহজেই ফর্মের ইনপুট এলিমেন্টে ভ্যালিডেশন অ্যাড করতে পারেন।

Materialize CSS এর মাধ্যমে ফর্ম ভ্যালিডেশন

Materialize CSS এ HTML5 validation এবং JavaScript এর মাধ্যমে ফর্ম ভ্যালিডেশন করা সম্ভব। এটি ইনপুট ফিল্ডে required, pattern, email ইত্যাদি ভ্যালিডেশন ব্যবহার করার মাধ্যমে করতে পারেন।

উদাহরণ: HTML5 Form Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation Example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

<div class="container">
    <h4>Login Form</h4>
    <form id="login-form">
        <div class="input-field">
            <input id="email" type="email" class="validate" required>
            <label for="email">Email</label>
            <span class="helper-text" data-error="Invalid email address" data-success="Valid email"></span>
        </div>
        <div class="input-field">
            <input id="password" type="password" class="validate" required>
            <label for="password">Password</label>
        </div>
        <button type="submit" class="btn">Submit</button>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    // Initialize form validation
    document.addEventListener('DOMContentLoaded', function() {
        M.AutoInit();
    });
</script>

</body>
</html>

এই উদাহরণে, email এবং password ফিল্ডে required এবং email ভ্যালিডেশন ব্যবহার করা হয়েছে। যখন ইউজার ভুল ইনপুট দিবে, তখন Materialize স্বয়ংক্রিয়ভাবে এরর মেসেজ দেখাবে।

Custom Error Messages

Materialize CSS ফ্রেমওয়ার্কে আপনি custom error messages তৈরি করতে পারেন, যাতে ব্যবহারকারীরা কোন ভুল করেছেন তা সহজে বুঝতে পারে। আপনি JavaScript বা HTML5 এর মাধ্যমে কাস্টম এরর মেসেজ দিতে পারেন।

উদাহরণ: Custom Error Message

<div class="input-field">
    <input id="email" type="email" class="validate" required>
    <label for="email">Email</label>
    <span class="helper-text" data-error="Please enter a valid email address" data-success="Looks good!"></span>
</div>

এখানে, data-error এবং data-success অ্যাট্রিবিউট ব্যবহার করে কাস্টম মেসেজ তৈরি করা হয়েছে:

• data-error: যখন ইনপুটটি সঠিক না হবে, তখন এটি ইউজারকে এরর মেসেজ দেখাবে।
• data-success: যখন ইনপুটটি সঠিক হবে, তখন এটি ইউজারকে সাফল্যের মেসেজ দেখাবে।

উদাহরণ: Custom Error Message Using JavaScript

<div class="input-field">
    <input id="username" type="text" class="validate" required>
    <label for="username">Username</label>
    <span id="username-error" class="helper-text" style="color: red;"></span>
</div>

<script>
    document.getElementById('username').addEventListener('blur', function() {
        var username = document.getElementById('username').value;
        if (username.length < 5) {
            document.getElementById('username-error').textContent = "Username must be at least 5 characters long.";
        } else {
            document.getElementById('username-error').textContent = "";
        }
    });
</script>

এই উদাহরণে, JavaScript এর মাধ্যমে কাস্টম এরর মেসেজ তৈরি করা হয়েছে। যখন ইউজার username ইনপুট ফিল্ডে ৫টি ক্যারেক্টার কম লিখবেন, তখন একটি কাস্টম এরর মেসেজ প্রদর্শিত হবে।

Form Validation এবং Custom Error Message এর কাজের মূল উপকারিতা

1. ব্যবহারকারী অভিজ্ঞতা উন্নত করা: ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ ইউজারের জন্য একটি পরিষ্কার নির্দেশনা প্রদান করে, যাতে তারা দ্রুত এবং সঠিকভাবে ফর্ম পূর্ণ করতে পারে।
2. সহজ কাস্টমাইজেশন: Materialize CSS এর মাধ্যমে আপনি সহজেই কাস্টম মেসেজ কনফিগার করতে পারেন, যা আপনার ডিজাইন এবং থিমের সাথে সঙ্গতিপূর্ণ হবে।
3. রিয়েল-টাইম ইনপুট যাচাই: JavaScript ব্যবহার করে আপনি ইনপুট যাচাই রিয়েল-টাইমে করতে পারবেন এবং সঠিক তথ্য পেলে ব্যবহারকারীদের ত্রুটি মেসেজ কমিয়ে সাফল্যের মেসেজ দেখাতে পারবেন।

Materialize CSS এর মাধ্যমে ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ তৈরি করা সহজ, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে।

Materialize CSS একটি শক্তিশালী ফ্রেমওয়ার্ক যা Material Design এর নীতির উপর ভিত্তি করে বিভিন্ন ধরনের UI উপাদান প্রদান করে, যার মধ্যে range sliders এবং switches অন্যতম। এই উপাদানগুলো আপনার ওয়েবসাইটের ইন্টারফেসে ইন্টারঅ্যাকটিভ ফিচার যোগ করতে সাহায্য করে। নিচে আমরা range slider এবং switches তৈরি করার পদ্ধতি জানব।

Range Slider তৈরি করা

Range Slider এমন একটি ইনপুট এলিমেন্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করার সুযোগ দেয়। এটি সাধারণত input type="range" হিসেবে ব্যবহৃত হয়। Materialize CSS এর সাহায্যে আপনি এটি আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলতে পারেন।

Range Slider এর HTML কোড

<div class="input-field">
  <input type="range" id="test5" min="0" max="100" value="50" />
  <label for="test5">Range Slider</label>
</div>

এখানে:

• type="range": এটি ইনপুট ট্যাগের মাধ্যমে স্লাইডার তৈরি করবে।
• min: স্লাইডারের সর্বনিম্ন মান (এখানে 0)।
• max: স্লাইডারের সর্বোচ্চ মান (এখানে 100)।
• value: ডিফল্ট মান, যেটি স্লাইডারের বর্তমান অবস্থান নির্ধারণ করে।

Range Slider স্টাইলিং

Materialize CSS এর মাধ্যমে স্লাইডারকে আরো সুন্দর এবং Material Design এর মতো দেখতে তৈরি করতে, আপনি range slider এ class যোগ করতে পারেন।

<div class="input-field">
  <input type="range" id="test5" min="0" max="100" value="50" class="slider" />
  <label for="test5">Range Slider</label>
</div>

এখানে, slider ক্লাসটি স্লাইডারকে Materialize স্টাইলের সঙ্গে উপস্থাপন করবে।

Range Slider JavaScript (Optional)

Materialize CSS এ slider এর সাথে স্লাইডার মানের পরিবর্তন ট্র্যাক করতে JavaScript ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, স্লাইডার মান পরিবর্তন হলে তা দেখতে চাইলে:

<script>
  var slider = document.getElementById('test5');
  var output = document.getElementById('rangeOutput');
  
  slider.oninput = function() {
    output.innerHTML = this.value;
  }
</script>

<p>Value: <span id="rangeOutput">50</span></p>

এখানে, স্লাইডারের মান output এ প্রদর্শিত হবে।

Switches তৈরি করা

Switch একটি UI উপাদান যা সাধারণত দুটি অবস্থার মধ্যে (যেমন, অন বা অফ) সুইচ করার জন্য ব্যবহৃত হয়। Materialize CSS এ সুইচ তৈরি করা খুবই সহজ এবং আকর্ষণীয়।

Switch এর HTML কোড

<div class="switch">
  <label>
    Off
    <input type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>

এখানে:

• input type="checkbox": এটি সাধারণ চেকবক্স ইনপুট তৈরি করে।
• span class="lever": Materialize CSS এর সুইচের লিভার প্রভাব তৈরি করতে ব্যবহৃত হয়।
• Off এবং On: সুইচের দুইটি অবস্থান, যা ব্যবহারকারীকে অবস্থান পরিবর্তন করতে দেয়।

Switch এর স্টাইলিং

Materialize CSS এর switch ক্লাস স্বয়ংক্রিয়ভাবে সুইচকে সঠিকভাবে স্টাইল করে। সুইচটি স্বাভাবিকভাবে মোবাইল বা ডেস্কটপ স্ক্রীনে মসৃণভাবে চলতে থাকে এবং একটি "লিভার" প্রভাবের সাথে আসে, যা একটি আকর্ষণীয় ইন্টারফেস তৈরি করে।

Switch এর JavaScript (Optional)

আপনি যদি চান, তাহলে সুইচের মান পরিবর্তন হলে কোনো কাজ সম্পন্ন করতে JavaScript ব্যবহার করতে পারেন। যেমন:

<script>
  var switchElement = document.querySelector('.switch input');
  
  switchElement.addEventListener('change', function() {
    if(this.checked) {
      alert("Switch is ON");
    } else {
      alert("Switch is OFF");
    }
  });
</script>

এখানে, সুইচটি অন বা অফ হলে alert প্রদর্শিত হবে।

উপসংহার

Materialize CSS এর মাধ্যমে range slider এবং switch তৈরি করা খুবই সহজ এবং আকর্ষণীয়। Range slider ব্যবহারকারীদের একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে সহায়তা করে, এবং switch দুটি অবস্থার মধ্যে (অন বা অফ) সুইচ করার জন্য একটি সুবিধাজনক উপায় প্রদান করে। Materialize CSS এর স্টাইল এবং ইন্টারঅ্যাকটিভ ফিচারগুলির মাধ্যমে আপনি এই উপাদানগুলোকে আরও সুন্দর ও কার্যকরী করতে পারবেন, যা আপনার ওয়েবসাইটের ব্যবহারকারীদের অভিজ্ঞতাকে আরও উন্নত করবে।