Framework7 এর মাধ্যমে ফর্ম ডেটা পরিচালনা (Form Storage) এবং ব্যবহারকারীর ইনপুট নিয়ন্ত্রণ (Input Masking) অত্যন্ত সহজ এবং কার্যকর।
Form Storage
Form Storage ফিচারের মাধ্যমে Framework7 ব্যবহারকারীর ফর্ম ডেটা স্থানীয়ভাবে সংরক্ষণ (Local Storage) করতে পারে। এটি ব্যবহারকারীর ফর্ম পূরণের সময় ডেটা হারানোর সম্ভাবনা কমায় এবং ফর্ম পুনরায় লোড হলে স্বয়ংক্রিয়ভাবে ডেটা পূরণ করতে সাহায্য করে।
Form Storage কীভাবে কাজ করে?
Framework7 ফর্ম ডেটা সংরক্ষণের জন্য localStorage API ব্যবহার করে। এটি স্বয়ংক্রিয়ভাবে ফর্মের ইনপুট ফিল্ডগুলোর ডেটা সংরক্ষণ করে এবং পুনরায় লোড করলে সেই ডেটা পুনরায় লোড করতে পারে।
ফর্ম স্টোরেজ সক্রিয় করার উদাহরণ:
<form data-store="true" data-store-name="myFormData">
<div class="list">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name</div>
<div class="item-input-wrap">
<input type="text" name="name" placeholder="Your Name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="email" name="email" placeholder="Your Email">
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
কীভাবে কাজ করে:
data-store="true": ফর্মের ডেটা স্বয়ংক্রিয়ভাবে সংরক্ষণ করে।data-store-name: ফর্ম ডেটা localStorage-এ সংরক্ষণের জন্য একটি অনন্য নাম প্রদান করে।
সংরক্ষিত ডেটা মুছে ফেলা:
app.form.removeFormData('myFormData');
Input Masking
Input Masking ব্যবহারকারীর ইনপুটের জন্য একটি নির্দিষ্ট প্যাটার্ন সেট করতে সাহায্য করে। এটি ফর্ম ইনপুটগুলোর ভ্যালিডেশন নিশ্চিত করতে এবং ব্যবহারকারীদের অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।
Input Masking কীভাবে কাজ করে?
Input Masking এর মাধ্যমে ইনপুট ফিল্ডে এমন নিয়ম আরোপ করা হয় যা ব্যবহারকারীকে নির্দিষ্ট ফরম্যাটে ডেটা দিতে বাধ্য করে। উদাহরণস্বরূপ, ফোন নম্বর, তারিখ, অথবা ক্রেডিট কার্ড নম্বর।
Input Masking উদাহরণ (JavaScript ব্যবহার করে):
<form>
<div class="list">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Phone Number</div>
<div class="item-input-wrap">
<input type="text" id="phone-number" placeholder="(123) 456-7890">
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
Input Mask সক্রিয় করা:
var phoneInput = document.getElementById('phone-number');
app.input.mask(phoneInput, '(000) 000-0000');
(000) 000-0000: এই প্যাটার্ন অনুযায়ী ইনপুট সীমাবদ্ধ করা হবে।app.input.mask: Framework7 এর ইনপুট মাস্ক ফাংশন ব্যবহার করা হয়।
Input Masking প্লাগইন ব্যবহার
Framework7-এ ইনপুট মাস্কিংয়ের জন্য তৃতীয় পক্ষের প্লাগইন ব্যবহার করা যায়, যেমন Inputmask.js।
উদাহরণ:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>
<form>
<div class="list">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Date</div>
<div class="item-input-wrap">
<input type="text" id="date-input" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
<script>
$(document).ready(function () {
$('#date-input').inputmask('99/99/9999'); // Date format
});
</script>
Form Storage এবং Input Masking ব্যবহারের সুবিধা
Form Storage:
- ডেটা লস কমানো: ব্রাউজার রিফ্রেশ হলেও ডেটা হারায় না।
- ব্যবহারকারীর অভিজ্ঞতা উন্নত: ব্যবহারকারী ফর্ম পূরণে বিরক্তি এড়ায়।
- স্থানীয় ডেটা সংরক্ষণ: সার্ভার সংযোগ ছাড়াই ডেটা সংরক্ষণ।
Input Masking:
- ডেটার সঠিকতা নিশ্চিত: ব্যবহারকারীর ইনপুট নির্ধারিত ফরম্যাটে বাধ্যতামূলক।
- সহজ ফরম্যাটিং: ফর্ম পূরণে সহায়তা করে।
- ভ্যালিডেশন সহজতর: ইনপুট ডেটার প্রাথমিক যাচাই সহজ হয়।
Framework7 এর Form Storage এবং Input Masking ফিচার ব্যবহার করে ডেভেলপাররা দ্রুত এবং কার্যকর ফর্ম তৈরি করতে পারেন। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার পাশাপাশি অ্যাপ্লিকেশন ডেটা ব্যবস্থাপনাকে আরও সহজ করে তোলে।
Read more
