ফর্ম ইভেন্টে প্রতিক্রিয়া
আপনি আপনার ফর্মে ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে, অতিরিক্ত ফর্ম ক্ষেত্রগুলি প্রকাশ করতে, একটি ফর্ম জমা দিতে এবং আরও অনেক কিছু করতে JavaScript ব্যবহার করতে পারেন৷
ব্যবহারকারীদের অতিরিক্ত ফর্ম নিয়ন্ত্রণ পূরণ করতে সাহায্য করুন
কল্পনা করুন যে আপনি একটি জরিপ ফর্ম তৈরি করেছেন। একজন ব্যবহারকারী একটি বিকল্প নির্বাচন করার পরে, আপনি নির্বাচন সম্পর্কিত একটি নির্দিষ্ট প্রশ্ন জিজ্ঞাসা করতে একটি অতিরিক্ত <input> দেখাতে চান। কিভাবে আপনি শুধুমাত্র প্রাসঙ্গিক <input> উপাদান দেখাতে পারেন?
আপনি JavaScript ব্যবহার করতে পারেন একটি <input> প্রকাশ করতে যখন সংশ্লিষ্ট <input type="radio"> বর্তমানে নির্বাচন করা হয়।
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
ডেমোর জন্য জাভাস্ক্রিপ্ট কোড দেখি। আপনি কি aria-controls এবং aria-expanded বৈশিষ্ট্যগুলি লক্ষ্য করেছেন? স্ক্রিন রিডার ব্যবহারকারীদের বুঝতে সাহায্য করার জন্য এই ARIA বৈশিষ্ট্যগুলি ব্যবহার করুন যখন একটি অতিরিক্ত ফর্ম নিয়ন্ত্রণ দেখানো হয় বা লুকানো হয়।
ব্যবহারকারীরা একটি পৃষ্ঠা ছাড়াই একটি ফর্ম জমা দিতে পারেন তা নিশ্চিত করুন৷
আপনার একটি মন্তব্য ফর্ম আছে কল্পনা করুন. যখন একজন পাঠক একটি মন্তব্য যোগ করেন এবং ফর্ম জমা দেন, তারা যদি পৃষ্ঠা রিফ্রেশ ছাড়াই অবিলম্বে মন্তব্যটি দেখতে পান তবে এটি আদর্শ হবে৷
এটি অর্জন করতে, onsubmit ইভেন্টটি শুনুন, তারপর ডিফল্ট আচরণ প্রতিরোধ করতে event.preventDefault() ব্যবহার করুন এবং Fetch API ব্যবহার করে FormData পাঠান।
আপনার POST স্ক্রিপ্টটি ব্রাউজার থেকে (একটি ফর্ম উপাদানের action অ্যাট্রিবিউট ব্যবহার করে, যেখানে method="post" ) বা জাভাস্ক্রিপ্ট থেকে, যেমন একটি fetch() অনুরোধ থেকে এসেছে বলে মনে হচ্ছে কিনা তা পরীক্ষা করতে পারে।
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
গতিশীল বিষয়বস্তু পরিবর্তন সম্পর্কে সর্বদা স্ক্রিন রিডার ব্যবহারকারীদের অবহিত করুন। আপনার HTML-এ aria-live="polite" অ্যাট্রিবিউট সহ একটি উপাদান যোগ করুন এবং পরিবর্তনের পর উপাদানটির বিষয়বস্তু আপডেট করুন। উদাহরণস্বরূপ, একজন ব্যবহারকারী একটি মন্তব্য জমা দেওয়ার পরে, পাঠ্যটিকে 'আপনার মন্তব্য সফলভাবে পোস্ট করা হয়েছে'-তে আপডেট করুন।
ARIA লাইভ অঞ্চল সম্পর্কে আরও জানুন।
জাভাস্ক্রিপ্টের সাথে বৈধতা
আপনার সাইটের স্টাইল এবং টোনের সাথে ত্রুটি বার্তাগুলি সারিবদ্ধ করা নিশ্চিত করুন৷
ডিফল্ট ত্রুটি বার্তাগুলির শব্দগুলি ব্রাউজারগুলির মধ্যে আলাদা। আপনি কিভাবে নিশ্চিত করতে পারেন যে একই বার্তাটি সকল ব্যবহারকারীকে দেখানো হয়েছে এবং বার্তাটি আপনার সাইটের স্টাইল এবং টোনের সাথে সারিবদ্ধ? আপনার নিজের ত্রুটি বার্তা সংজ্ঞায়িত করতে সীমাবদ্ধতা যাচাইকরণ API এর setCustomValidity() পদ্ধতি ব্যবহার করুন।
ব্যবহারকারীদের রিয়েল টাইমে ত্রুটি সম্পর্কে অবহিত করা নিশ্চিত করুন
ফর্ম যাচাইকরণের জন্য অন্তর্নির্মিত HTML বৈশিষ্ট্যগুলি আপনার ব্যাকএন্ডে ডেটা পাঠানোর আগে ব্যবহারকারীদের অবৈধ ফর্ম ক্ষেত্র সম্পর্কে অবহিত করার জন্য দুর্দান্ত। একটি ফর্ম ফিল্ড ছেড়ে যাওয়ার সাথে সাথে ব্যবহারকারীদের অবহিত করা কি দুর্দান্ত হবে না?
blur ইভেন্টের জন্য শুনুন যা একটি উপাদান ফোকাস হারায় যখন ফায়ার হয়, এবং একটি ফর্ম নিয়ন্ত্রণ অবৈধ কিনা তা সনাক্ত করতে ValidityState ইন্টারফেস ব্যবহার করুন৷
নিশ্চিত করুন যে ব্যবহারকারীরা তাদের প্রবেশ করা পাসওয়ার্ড দেখতে পাচ্ছেন
<input type="password"> এর জন্য লেখা পাঠ্যটি ব্যবহারকারীদের গোপনীয়তাকে সম্মান করার জন্য ডিফল্টরূপে অস্পষ্ট থাকে। প্রবেশ করা পাঠ্যের দৃশ্যমানতা টগল করতে একটি <button> দেখিয়ে ব্যবহারকারীদের তাদের পাসওয়ার্ড লিখতে সহায়তা করুন।
ডেমো চেষ্টা করে দেখুন . পাসওয়ার্ড দেখান <button> ব্যবহার করে প্রবেশ করা পাঠ্যের দৃশ্যমানতা টগল করুন। কিভাবে কাজ করে? Show Password এ ক্লিক করলে, পাসওয়ার্ড ফিল্ডের type অ্যাট্রিবিউট type="password" থেকে type="text" এ পরিবর্তন হয় এবং <button> পাঠ্য 'Hide Password'-এ পরিবর্তিত হয়।
পাসওয়ার্ড দেখান বোতামটি অ্যাক্সেসযোগ্য করে তোলা গুরুত্বপূর্ণ। aria-controls অ্যাট্রিবিউট ব্যবহার করে <input type="password"> দিয়ে <button> সংযোগ করুন।
পাসওয়ার্ডটি বর্তমানে দেখানো বা লুকানো থাকলে স্ক্রিন রিডার ব্যবহারকারীদের জানানোর জন্য, aria-live="polite" সহ একটি লুকানো উপাদান ব্যবহার করুন এবং সেই অনুযায়ী এর পাঠ্য পরিবর্তন করুন। স্ক্রিন রিডার ব্যবহারকারীদের সক্রিয় করা গুরুত্বপূর্ণ যে কখন একটি পাসওয়ার্ড প্রদর্শিত হয় এবং অন্য কেউ তাদের স্ক্রীনের দিকে তাকাচ্ছেন তা জানতে।
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
একটি শো পাসওয়ার্ড বিকল্প বাস্তবায়ন সম্পর্কে আরও জানুন।