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 এর সোজাসাপ্টা কাস্টমাইজেশন পদ্ধতির মাধ্যমে আপনি সহজে ইনপুট ফিল্ডের ডিজাইন এবং কার্যকারিতা পরিবর্তন করতে পারেন।
Read more
