Material Design Lite (MDL) গুগলের Material Design নীতির অনুসরণ করে তৈরি করা একটি হালকা ওজনের ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। MDL-এ টেক্সট ফিল্ড এবং ফর্ম ইলিমেন্টস ডিজাইন করার জন্য একাধিক সুন্দর এবং ইন্টারঅ্যাকটিভ উপাদান রয়েছে, যা ব্যবহারকারীদের জন্য একটি সুশৃঙ্খল এবং স্বজ্ঞাত ইন্টারফেস প্রদান করে।
এটি ডিজাইনের মধ্যে এনিমেশন, ফোকাসিং এবং ভিজ্যুয়াল ইফেক্টস ব্যবহার করে টেক্সট ফিল্ড এবং ফর্ম ইলিমেন্টগুলোর কার্যকারিতা ও সৌন্দর্য উন্নত করে।
MDL এর টেক্সট ফিল্ড (Text Fields)
টেক্সট ফিল্ড ব্যবহারকারীদের থেকে ইনপুট নেয়ার জন্য সবচেয়ে সাধারণ উপাদান। MDL-এ টেক্সট ফিল্ড ডিজাইন করতে খুবই সহজ এবং এটি গুগলের Material Design নীতির সাথে মানানসই।
MDL টেক্সট ফিল্ডের সাধারণ কাঠামো
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Your Name</label>
</div>
এখানে:
- mdl-textfield: টেক্সট ফিল্ডের বেস ক্লাস যা MDL-এর স্টাইল প্রয়োগ করে।
- mdl-js-textfield: MDL এর জাভাস্ক্রিপ্ট কার্যকারিতা অ্যাপ্লাই করে, যেমন ফোকাসিং এবং অ্যানিমেশন।
- mdl-textfield--floating-label: এই ক্লাস ব্যবহার করলে লেবেলটি ইনপুট ফিল্ডের ওপর ভাসমান হয়ে যায় এবং ব্যবহারকারীর ইনপুটের সময় এটি উপরে চলে যায়।
- mdl-textfield__input: এটি ইনপুট ফিল্ডের জন্য ব্যবহার হয়।
- mdl-textfield__label: এটি লেবেল তৈরি করে যা ইনপুট ফিল্ডের কাছে থাকবে।
১. সাধারণ টেক্সট ফিল্ড
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="text1">
<label class="mdl-textfield__label" for="text1">Enter Text</label>
</div>
২. পাসওয়ার্ড ইনপুট ফিল্ড
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">Password</label>
</div>
৩. ইমেইল ইনপুট ফিল্ড
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="email">
<label class="mdl-textfield__label" for="email">Email</label>
</div>
MDL এর ফর্ম ইলিমেন্টস
MDL ফর্ম ইলিমেন্টস বিভিন্ন ধরনের ইনপুট ফিল্ড, সিলেক্ট বক্স, চেকবক্স, রেডিও বাটন ইত্যাদি দিয়ে ওয়েব ফর্ম তৈরি করতে সাহায্য করে। MDL-এর ফর্ম উপাদানগুলি এক্সট্রা অ্যানিমেশন এবং স্টাইলিং এর সাথে ওয়েব ফর্মের অভিজ্ঞতাকে উন্নত করে।
১. সিলেক্ট বক্স (Select Box)
<div class="mdl-textfield mdl-js-textfield">
<select class="mdl-textfield__input" id="select-box" name="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label class="mdl-textfield__label" for="select-box">Select an Option</label>
</div>
এটি একটি সিলেক্ট বক্স তৈরি করবে, যেখানে ব্যবহারকারী একাধিক অপশন থেকে একটি নির্বাচন করতে পারবেন।
২. চেকবক্স (Checkbox)
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
<input type="checkbox" id="checkbox" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Agree to Terms</span>
</label>
এটি একটি চেকবক্স তৈরি করবে। এখানে mdl-checkbox ক্লাস চেকবক্সকে Material Design স্টাইল দেয় এবং mdl-js-ripple-effect ক্লাস রিপল অ্যানিমেশন অ্যাপ্লাই করে।
৩. রেডিও বাটন (Radio Button)
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio1">
<input type="radio" id="radio1" class="mdl-radio__button" name="options" value="Option 1">
<span class="mdl-radio__label">Option 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio2">
<input type="radio" id="radio2" class="mdl-radio__button" name="options" value="Option 2">
<span class="mdl-radio__label">Option 2</span>
</label>
এটি দুটি রেডিও বাটন তৈরি করবে। mdl-radio ক্লাস ব্যবহার করা হয়েছে, যা রেডিও বাটনকে সুন্দরভাবে ডিজাইন করে।
MDL ফর্মের কাস্টমাইজেশন
MDL-এর মাধ্যমে ফর্মের উপাদানগুলোর স্টাইল খুব সহজেই কাস্টমাইজ করা যায়। আপনি চাইলে ফর্মের ইনপুট ফিল্ডের সাইজ, রঙ, এবং স্টাইল পরিবর্তন করতে পারেন।
উদাহরণ: কাস্টম স্টাইল
/* টেক্সট ফিল্ডের কাস্টম স্টাইল */
.mdl-textfield__input {
font-size: 16px;
color: #000;
}
/* সিলেক্ট বক্সের কাস্টম স্টাইল */
.mdl-textfield__input {
background-color: #f0f0f0;
}
এটি MDL এর ফর্ম উপাদানগুলোর কাস্টমাইজেশন সহজ করে দেয় এবং আপনার ডিজাইনকে আরও আকর্ষণীয় করে তোলে।
সারাংশ
Material Design Lite (MDL) এর টেক্সট ফিল্ড এবং ফর্ম ইলিমেন্টস খুবই সহজ এবং ইন্টারঅ্যাকটিভ ডিজাইন উপাদান প্রদান করে। MDL ফর্ম উপাদানগুলোর মধ্যে রয়েছে টেক্সট ফিল্ড, সিলেক্ট বক্স, চেকবক্স, রেডিও বাটন ইত্যাদি, যা Material Design স্টাইলে ডিজাইন করা হয়। এই উপাদানগুলি সহজে কাস্টমাইজ করা যায়, এবং বিভিন্ন অ্যানিমেশন ও স্টাইলিং প্রয়োগ করে ব্যবহারকারী অভিজ্ঞতা উন্নত করা যায়। MDL ফর্ম ডিজাইন ওয়েবসাইটকে আরও আধুনিক, সুশৃঙ্খল এবং আকর্ষণীয় করে তোলে।
Material Design Lite (MDL) একটি আধুনিক এবং রেসপন্সিভ ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL-এ Text Field এবং Input Field কম্পোনেন্টগুলি ব্যবহারকারীর ইন্টারঅ্যাকশন উন্নত করার জন্য ডিজাইন করা হয়েছে। এই কম্পোনেন্টগুলো ব্যবহারকারীকে ডেটা ইনপুট করার জন্য একটি সহজ এবং আকর্ষণীয় ইন্টারফেস প্রদান করে।
এখানে MDL এর Text Field এবং Input Field কম্পোনেন্টের বিভিন্ন বৈশিষ্ট্য এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হবে।
MDL এর Text Field এবং Input Field Components
MDL এ Text Field এবং Input Field দুটি গুরুত্বপূর্ণ কম্পোনেন্ট যা বিভিন্ন ধরনের ডেটা ইনপুট করার জন্য ব্যবহৃত হয়। MDL এর এই কম্পোনেন্টগুলি স্টাইলিশ এবং ব্যবহারকারী-বান্ধব।
১. Basic Text Field
MDL এর বেসিক Text Field সাধারণত mdl-textfield ক্লাস ব্যবহার করে তৈরি করা হয়। এটি সাধারণ input ফিল্ডের মতো কাজ করে এবং গুগলের Material Design স্টাইল অনুযায়ী ইনপুট নেয়।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Enter Text</label>
</div>
এখানে:
- mdl-textfield: Text Field কম্পোনেন্টের জন্য প্রয়োজনীয় ক্লাস।
- mdl-js-textfield: JavaScript ফিচার প্রয়োগ করতে ব্যবহৃত ক্লাস।
- mdl-textfield__input: ইনপুট ফিল্ডের জন্য প্রয়োজনীয় ক্লাস।
- mdl-textfield__label: ইনপুট ফিল্ডের লেবেল (placeholder)।
এটি একটি বেসিক Text Field তৈরি করবে যেখানে ব্যবহারকারী টেক্সট ইনপুট করতে পারবেন।
২. Password Field
MDL-এ Password Field তৈরি করার জন্য type="password" ব্যবহার করা হয়। এটি সাধারণ input ফিল্ডের মতোই কাজ করে, তবে এতে ইনপুট করা ডেটা গোপন থাকে।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="sample2">
<label class="mdl-textfield__label" for="sample2">Password</label>
</div>
৩. Text Area
MDL-এ Text Area তৈরি করতে, আপনি textarea ট্যাগ ব্যবহার করতে পারেন, যা সাধারণত বড় টেক্সট ইনপুটের জন্য ব্যবহৃত হয়।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea class="mdl-textfield__input" type="text" rows="3" id="sample3"></textarea>
<label class="mdl-textfield__label" for="sample3">Enter Text</label>
</div>
এখানে, rows="3" দিয়ে টেক্সট এরিয়ার উচ্চতা নির্ধারণ করা হয়েছে।
৪. Number Field
MDL-এ Number Field তৈরি করতে, type="number" ব্যবহার করা হয়। এটি শুধুমাত্র সংখ্যা ইনপুট গ্রহণ করবে।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="number" id="sample4">
<label class="mdl-textfield__label" for="sample4">Enter Number</label>
</div>
৫. Input Field with Validation
MDL-এ Input Field এর সাথে ইনপুট ভ্যালিডেশন সহজেই যোগ করা যায়। এটি বিশেষত required অথবা pattern অ্যাট্রিবিউট ব্যবহার করে করা হয়।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="sample5" required>
<label class="mdl-textfield__label" for="sample5">Enter Email</label>
</div>
এখানে, required অ্যাট্রিবিউট ব্যবহার করা হয়েছে যা ইনপুট ফিল্ডটি পূর্ণ না হলে সাবমিট হওয়ার অনুমতি দেবে না।
৬. Input Field with Error
MDL এর Input Field এ ত্রুটি (error) বার্তা দেখানোর জন্য আপনি is-invalid ক্লাস ব্যবহার করতে পারেন। এটি ব্যবহারকারীকে ইনপুট ভুল হলে সতর্ক করবে।
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid">
<input class="mdl-textfield__input" type="text" id="sample6">
<label class="mdl-textfield__label" for="sample6">Enter Text</label>
<span class="mdl-textfield__error">This field is required</span>
</div>
এখানে, is-invalid ক্লাস এবং mdl-textfield__error ক্লাস ব্যবহার করে ত্রুটি বার্তা দেখানো হয়েছে।
MDL এর Text Field এবং Input Field এর কাস্টমাইজেশন
MDL এর Text Field এবং Input Field কম্পোনেন্টগুলোর স্টাইল এবং কার্যকারিতা সহজেই কাস্টমাইজ করা যায়। আপনি এগুলোর আকার, রঙ, প্রতীক (Icon) এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন।
উদাহরণ: কাস্টমাইজড Text Field
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="customField">
<label class="mdl-textfield__label" for="customField">Custom Text Field</label>
</div>
<style>
.mdl-textfield__input {
background-color: #f0f0f0;
border-radius: 4px;
}
.mdl-textfield__label {
color: #2196F3;
}
</style>
এখানে, background-color এবং border-radius কাস্টমাইজেশন ব্যবহার করা হয়েছে। এছাড়া, লেবেলের রঙ #2196F3 করা হয়েছে।
সারাংশ
Material Design Lite (MDL) এর Text Field এবং Input Field কম্পোনেন্টগুলি ব্যবহারকারীর ইন্টারঅ্যাকশনকে সহজ এবং সুন্দর করে তোলে। MDL এর এই কম্পোনেন্টগুলোর মধ্যে রয়েছে Basic Text Field, Password Field, Text Area, Number Field, Input Field with Validation, এবং Input Field with Error। আপনি MDL এর মাধ্যমে সহজেই এই কম্পোনেন্টগুলো ব্যবহার করে একটি আধুনিক এবং ব্যবহারকারী-বান্ধব ইনপুট ফর্ম তৈরি করতে পারেন। MDL এর সোজাসাপ্টা কাস্টমাইজেশন পদ্ধতির মাধ্যমে আপনি সহজে ইনপুট ফিল্ডের ডিজাইন এবং কার্যকারিতা পরিবর্তন করতে পারেন।
Material Design Lite (MDL) ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই আধুনিক এবং ইন্টারঅ্যাকটিভ ফর্ম উপাদান তৈরি করতে পারেন। MDL বিভিন্ন ধরনের form elements প্রদান করে, যেমন Checkbox, Radio Button, এবং Switch। এগুলো ব্যবহারকারী ইন্টারফেসের মধ্যে সুন্দর এবং কার্যকরী ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে।
এই টিউটোরিয়ালে আমরা MDL এর Checkbox, Radio Button, এবং Switch কম্পোনেন্টগুলো কীভাবে ব্যবহার করতে হয় তা দেখব।
Checkbox ব্যবহার
Checkbox ব্যবহারকারীকে একাধিক অপশন থেকে একটি বা একাধিক নির্বাচন করার সুযোগ দেয়। MDL এর 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: Checkbox এর MDL স্টাইল।
- mdl-js-checkbox: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-checkbox__input: চেকবক্স ইনপুট এলিমেন্ট।
- mdl-checkbox__label: চেকবক্সের লেবেল টেক্সট।
এটি একটি সিম্পল চেকবক্স তৈরি করে যেখানে "Accept Terms and Conditions" লেবেল থাকবে। ব্যবহারকারী এক বা একাধিক চেকবক্স নির্বাচন করতে পারবেন।
Radio Button ব্যবহার
Radio Button ব্যবহারকারীদের একটি নির্দিষ্ট অপশন নির্বাচন করতে দেয়। MDL এ Radio Buttons খুবই সোজা এবং প্রাঞ্জলভাবে ডিজাইন করা হয়েছে। এটি একাধিক অপশন থেকে একটি অপশন নির্বাচন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<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="options" value="option1">
<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="options" value="option2">
<span class="mdl-radio__label">Option 2</span>
</label>
এখানে:
- mdl-radio: Radio button এর MDL স্টাইল।
- mdl-js-radio: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-radio__button: রেডিও বাটনের ইনপুট এলিমেন্ট।
- mdl-radio__label: রেডিও বাটনের লেবেল টেক্সট।
এটি দুটি রেডিও বাটন তৈরি করে, যা একসাথে কাজ করবে এবং ব্যবহারকারী একটি অপশন নির্বাচন করতে পারবে।
Switch ব্যবহার
Switch একটি টগল বাটন যা ব্যবহারকারীকে দুটি বিকল্পের মধ্যে একটি নির্বাচন করার সুযোগ দেয়, সাধারণত ON/OFF বা True/False এর জন্য। MDL এ Switch ব্যবহার করা সহজ এবং এটি অনেক সুন্দরভাবে কাজ করে।
উদাহরণ:
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input">
<span class="mdl-switch__label">Enable Notifications</span>
</label>
এখানে:
- mdl-switch: Switch এর MDL স্টাইল।
- mdl-js-switch: JavaScript কার্যকারিতা সক্রিয় করার জন্য ক্লাস।
- mdl-switch__input: সুইচ ইনপুট এলিমেন্ট।
- mdl-switch__label: সুইচের লেবেল টেক্সট।
এটি একটি সুইচ তৈরি করবে, যার মাধ্যমে ব্যবহারকারী "Enable Notifications" টগল করতে পারবে।
MDL এর ফর্ম এলিমেন্টের বিশেষ বৈশিষ্ট্য
১. রেসপন্সিভ ডিজাইন
MDL এর ফর্ম উপাদানগুলো রেসপন্সিভ ডিজাইন সমর্থন করে, অর্থাৎ সেগুলো মোবাইল, ট্যাবলেট এবং ডেস্কটপে ভালোভাবে কাজ করবে।
২. স্মুথ অ্যানিমেশন
MDL এর ফর্ম উপাদানগুলোতে স্মুথ অ্যানিমেশন এবং রিপল এফেক্ট যুক্ত থাকে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
৩. সহজ কাস্টমাইজেশন
MDL এর ফর্ম উপাদানগুলো সহজেই কাস্টমাইজ করা যায়, যেমন এর সাইজ, রঙ, এবং স্টাইল পরিবর্তন করা সম্ভব।
সারাংশ
Material Design Lite (MDL) এর Checkbox, Radio Button, এবং Switch ফর্ম উপাদানগুলো ব্যবহার করে আপনি সুন্দর এবং ইন্টারঅ্যাকটিভ ফর্ম ডিজাইন করতে পারেন। এগুলো ব্যবহারকারীদের সাথে কার্যকরভাবে ইন্টারঅ্যাক্ট করতে সহায়তা করে এবং MDL এর স্মুথ অ্যানিমেশন এবং রেসপন্সিভ ডিজাইন ফিচারগুলোর মাধ্যমে আরো আকর্ষণীয় হয়ে ওঠে। MDL এর ফর্ম উপাদানগুলো খুবই সহজ, কাস্টমাইজযোগ্য এবং আধুনিক ডিজাইনের জন্য উপযোগী।
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 ফিচারগুলো ব্যবহার করে সহজেই করতে পারে, যাতে ব্যবহারকারী ইন্টারফেস এবং কার্যকারিতা উন্নত হয়।
Material Design Lite (MDL) ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের সাথে ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং পরিচালনা করা একটি সাধারণ এবং কার্যকরী প্রক্রিয়া। MDL এর ফর্ম কম্পোনেন্ট এবং HTML5 form elements এর সাথে ইন্টিগ্রেট করে, আপনি একটি সিম্পল, আধুনিক এবং ইউজার ফ্রেন্ডলি ফর্ম তৈরি করতে পারবেন।
এখানে, আমরা MDL ব্যবহার করে ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং করার পদ্ধতি এবং টিপস আলোচনা করব।
MDL ফর্ম কম্পোনেন্টস
MDL বেশ কিছু প্রাক-ডিফাইনড ফর্ম উপাদান প্রদান করে, যেমন টেক্সট ফিল্ডস, সিলেক্ট মেনু, চেকবক্স, রেডিও বাটনস, টেক্সট এরিয়া, এবং বাটন। এগুলি Material Design এর স্টাইল অনুসারে সাজানো থাকে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক।
MDL ফর্ম কম্পোনেন্টের উদাহরণ
১. টেক্সট ফিল্ড
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Your Name</label>
</div>
এটি একটি টেক্সট ইনপুট ফিল্ড তৈরি করবে যা floating label স্টাইল অনুসরণ করে। যখন ব্যবহারকারী ইনপুট দেয়, লেবেলটি ইনপুট ফিল্ডের উপরে চলে যাবে।
২. সিলেক্ট মেনু
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="sample2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label class="mdl-textfield__label" for="sample2">Choose an Option</label>
</div>
এটি একটি সিলেক্ট মেনু তৈরি করবে যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারবে।
৩. চেকবক্স
<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</span>
</label>
এটি একটি চেকবক্স তৈরি করবে যা ব্যবহারকারী টিক চিহ্ন করতে পারে।
৪. রেডিও বাটন
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">Option 1</span>
</label>
এটি একটি রেডিও বাটন তৈরি করবে যা একাধিক অপশন থেকে একটি নির্বাচন করার সুযোগ দেয়।
৫. সাবমিট বাটন
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Submit
</button>
এটি একটি সাবমিট বাটন তৈরি করবে যা ফর্ম ডেটা পাঠানোর জন্য ব্যবহৃত হবে।
ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং
MDL ফ্রেমওয়ার্ক শুধুমাত্র ফর্ম কম্পোনেন্ট প্রদান করে না, বরং আপনি ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং এর জন্য JavaScript ব্যবহার করতে পারেন। সাধারণত, MDL এর ফর্ম ডেটা হ্যান্ডলিং করার জন্য AJAX অথবা সাধারণ form submission পদ্ধতি ব্যবহার করা হয়। এখানে আমরা কিছু প্রাথমিক ফর্ম সাবমিশন পদ্ধতি দেখাব।
১. ফর্ম সাবমিশন (সাধারণ HTML ফর্ম)
<form action="/submit" method="POST">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name" name="name" required>
<label class="mdl-textfield__label" for="name">Your Name</label>
</div>
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Submit
</button>
</form>
এই ফর্মটি একটি সাধারণ HTML ফর্ম যেখানে ব্যবহারকারী নাম ইনপুট করবে এবং তারপর submit বাটন টিপে ডেটা পাঠাবে।
২. AJAX ব্যবহার করে ফর্ম সাবমিশন
AJAX ব্যবহার করে আপনি ফর্ম ডেটা সাবমিট করতে পারেন এবং পৃষ্ঠার রিফ্রেশ ছাড়া সার্ভারে ডেটা পাঠাতে পারেন।
<form id="contact-form">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name" name="name" required>
<label class="mdl-textfield__label" for="name">Your Name</label>
</div>
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Submit
</button>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
const formData = new FormData(this);
// Send data using fetch (AJAX)
fetch('/submit', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => alert('Form submitted successfully!'))
.catch(error => console.error('Error:', error));
});
</script>
এখানে, ফর্মটি AJAX ব্যবহার করে সাবমিট হচ্ছে, যা পেজ রিফ্রেশ ছাড়াই ডেটা পাঠায় এবং রেসপন্স পেলে ইউজারকে সফলতার বার্তা দেখায়।
৩. ফর্ম ভ্যালিডেশন
MDL ফর্মগুলোর সাথে HTML5 form validation স্বয়ংক্রিয়ভাবে কাজ করে, যেমন ইনপুট ফিল্ডে required, pattern এবং maxlength অ্যাট্রিবিউট ব্যবহার করলে, ব্যবহারকারী সঠিক তথ্য প্রদান না করলে তা সতর্ক করবে।
উদাহরণ:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="email" name="email" required>
<label class="mdl-textfield__label" for="email">Your Email</label>
</div>
এখানে, required অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যা নিশ্চিত করবে যে ব্যবহারকারী ইমেল ঠিকমতো প্রদান করেছেন।
সারাংশ
Material Design Lite (MDL) ফ্রেমওয়ার্কে ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং খুবই সহজ এবং কার্যকরী। MDL এর প্রাক-ডিফাইনড ফর্ম কম্পোনেন্টগুলো, যেমন টেক্সট ফিল্ড, সিলেক্ট মেনু, চেকবক্স এবং বাটন, ব্যবহার করে আপনি দ্রুত একটি সুন্দর এবং ফাংশনাল ফর্ম তৈরি করতে পারেন। AJAX ব্যবহার করে আপনি ডেটা সাবমিট করতে পারেন এবং পৃষ্ঠার রিফ্রেশ ছাড়াই সার্ভারে ডেটা পাঠাতে পারেন। এছাড়াও, HTML5 ফর্ম ভ্যালিডেশন ফিচারের মাধ্যমে আপনি ব্যবহারকারীর ইনপুট যাচাই করতে পারেন। MDL ব্যবহার করে ফর্ম সাবমিশন এবং ডেটা হ্যান্ডলিং সহজ এবং আকর্ষণীয়ভাবে করা যায়।
Read more
