আমি কি ফর্ম ক্ষেত্র ব্যবহার করতে পারি?
সর্বোত্তম সম্ভাব্য ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, ব্যবহারকারীর প্রবেশ করানো ডেটার জন্য সবচেয়ে উপযুক্ত উপাদান এবং উপাদানের type ব্যবহার নিশ্চিত করুন৷
ব্যবহারকারীদের পাঠ্য পূরণ করতে সহায়তা করুন
পাঠ্য সন্নিবেশ করার জন্য ব্যবহারকারীদের একটি ফর্ম ক্ষেত্র প্রদান করতে, <input> উপাদান ব্যবহার করুন। এটি একক শব্দ এবং সংক্ষিপ্ত পাঠ্যের জন্য সেরা পছন্দ। দীর্ঘ পাঠ্যের জন্য, <textarea> উপাদান ব্যবহার করুন। এটি পাঠ্যের একাধিক লাইনের অনুমতি দেয় এবং ব্যবহারকারীর জন্য তাদের প্রবেশ করা পাঠ্য দেখতে সহজ করে তোলে, কারণ উপাদানটি স্ক্রোলযোগ্য এবং আকার পরিবর্তনযোগ্য।
ব্যবহারকারীদের সঠিক বিন্যাসে তথ্য প্রবেশ করানো নিশ্চিত করুন
আপনি কি ব্যবহারকারীদের একটি টেলিফোন নম্বর পূরণ করতে সাহায্য করতে চান? <input> এর জন্য type="tel" type অ্যাট্রিবিউট পরিবর্তন করুন। মোবাইল ডিভাইসের ব্যবহারকারীরা একটি অভিযোজিত অন-স্ক্রিন কীবোর্ড পান, যাতে তারা দ্রুত এবং আরও সহজে টেলিফোন নম্বর প্রবেশ করতে পারে।
একটি ইমেল ঠিকানার জন্য, type="email" ব্যবহার করুন। আবার, একটি অভিযোজিত অন-স্ক্রিন কীবোর্ড দেখানো হয়েছে। ফর্ম ক্ষেত্র বাধ্যতামূলক করতে required বৈশিষ্ট্য ব্যবহার করুন। যখন ফর্মটি জমা দেওয়া হয়, ব্রাউজারটি পরীক্ষা করে যে ইনপুটের একটি মান আছে এবং এটি বৈধ: এই ক্ষেত্রে, এটি একটি ভাল-ফরম্যাট করা ইমেল ঠিকানা৷
বিভিন্ন ধরনের ইনপুট সম্পর্কে আরও জানুন। এগুলি অন্তর্নির্মিত বৈধতা বৈশিষ্ট্যগুলিও সরবরাহ করে।
ব্যবহারকারীদের তারিখ পূরণ করতে সাহায্য করুন
আপনি কখন আপনার পরবর্তী ট্রিপ শুরু করতে চান? ব্যবহারকারীদের তারিখ পূরণ করতে সাহায্য করতে, type="date" ব্যবহার করুন। কিছু ব্রাউজার বিন্যাসটিকে প্লেসহোল্ডার হিসাবে দেখায় যেমন yyyy-mm-dd , প্রদর্শন করে কিভাবে তারিখ লিখতে হয়।
সমস্ত আধুনিক ব্রাউজার একটি তারিখ পিকার আকারে তারিখ নির্বাচন করার জন্য কাস্টম ইন্টারফেস প্রদান করে।
ব্যবহারকারীদের একটি বিকল্প নির্বাচন করতে সাহায্য করুন
ব্যবহারকারীরা একটি সম্ভাব্য বিকল্প নির্বাচন বা অনির্বাচন করতে পারেন তা নিশ্চিত করতে, type="checkbox" ব্যবহার করুন। আপনি একাধিক বিকল্প অফার করতে চান? আপনার ব্যবহারের ক্ষেত্রে উপর নির্ভর করে, বিভিন্ন বিকল্প আছে। প্রথমত, আসুন সম্ভাব্য সমাধানগুলি দেখি যদি ব্যবহারকারীরা শুধুমাত্র একটি একক বিকল্প বেছে নিতে সক্ষম হন।
আপনি type="radio" এবং একই name মান সহ একাধিক <input> উপাদান ব্যবহার করতে পারেন। ব্যবহারকারীরা একবারে সমস্ত বিকল্প দেখতে পান, কিন্তু শুধুমাত্র একটি বেছে নিতে পারেন।
আরেকটি বিকল্প হল <select> উপাদান ব্যবহার করা। ব্যবহারকারীরা উপলব্ধ বিকল্পগুলির একটি তালিকার মাধ্যমে স্ক্রোল করতে পারেন এবং একটি চয়ন করতে পারেন৷
কিছু ব্যবহারের ক্ষেত্রে, যেমন সংখ্যার একটি পরিসর বেছে নেওয়ার জন্য, প্রকার range <input> একটি ভাল বিকল্প হতে পারে।
আপনি একাধিক বিকল্প নির্বাচন করার ক্ষমতা অফার করতে হবে? multiple অ্যাট্রিবিউট সহ একটি <select> উপাদান বা একাধিক <input> এলিমেন্ট টাইপ checkbox ব্যবহার করুন।
আপনি <datalist> উপাদানের সাথে একত্রে একটি <input> ব্যবহার করতে পারেন। এটি আপনাকে একটি পাঠ্য ক্ষেত্র এবং <option> উপাদানগুলির একটি তালিকার সংমিশ্রণ দেয়।
ব্যবহারকারীরা বিভিন্ন ধরণের ডেটা পূরণ করতে পারে তা নিশ্চিত করুন
নির্দিষ্ট ব্যবহারের ক্ষেত্রে আরও ইনপুট প্রকার রয়েছে।
সমর্থিত ব্রাউজারগুলিতে ব্যবহারকারীদের একটি রঙ চয়নকারী প্রদান করার জন্য একটি <input> টাইপ color রয়েছে এবং অন্যান্য বিভিন্ন প্রকারও রয়েছে। ব্যবহারকারীরা তাদের পাসওয়ার্ড লিখতে পারেন তা নিশ্চিত করতে, type="password" দিয়ে <input> ব্যবহার করুন। প্রবেশ করা প্রতিটি অক্ষর একটি তারকাচিহ্ন ("*") বা একটি বিন্দু ("•") দ্বারা অস্পষ্ট হয়, যাতে পাসওয়ার্ডটি পড়া যায় না।
আপনি কি ফর্ম ডেটাতে একটি অনন্য নিরাপত্তা টোকেন অন্তর্ভুক্ত করতে চান? type="hidden" এর সাথে <input> ব্যবহার করুন। hidden ধরনের <input> এর মান ব্যবহারকারীদের দ্বারা দেখা বা পরিবর্তন করা যাবে না।
ব্যবহারকারীদের ফাইল আপলোড এবং জমা দিতে সক্ষম করতে, type="file" এর সাথে <input> ব্যবহার করুন।
আপনি কাস্টম উপাদানগুলিও সংজ্ঞায়িত করতে পারেন যদি আপনার একটি বিশেষ ব্যবহারের ক্ষেত্রে থাকে, যেখানে কোনও অন্তর্নির্মিত উপাদান বা প্রকার উপযুক্ত নয়৷
ব্যবহারকারীদের আপনার ফর্ম পূরণ করতে সাহায্য করুন
অনেক ফর্ম উপাদান এবং প্রকার আছে, কিন্তু আপনি কোনটি নির্বাচন করা উচিত?
কিছু ব্যবহারের ক্ষেত্রে, উপযুক্ত উপাদান এবং প্রকার নির্বাচন করা সহজ, যেমন <input type="date"> । অন্যদের জন্য, এটা নির্ভর করে. উদাহরণস্বরূপ, আপনি type="checkbox" বা একটি <select> উপাদান সহ একাধিক <input> উপাদান ব্যবহার করতে পারেন। তালিকাবাক্স এবং ড্রপডাউন তালিকার মধ্যে নির্বাচন করার বিষয়ে আরও জানুন।
সাধারণভাবে, সেরা ফর্ম উপাদান এবং টাইপ খুঁজে পেতে প্রকৃত ব্যবহারকারীদের সাথে আপনার ফর্মটি পরীক্ষা করা নিশ্চিত করুন৷
আপনার উপলব্ধি পরীক্ষা করুন
ফর্ম ক্ষেত্র আপনার জ্ঞান পরীক্ষা করুন
এটি একটি ফর্ম নিয়ন্ত্রণ সঙ্গে একাধিক ফাইল আপলোড করা সম্ভব?
<input type="files"> ব্যবহার করে।<input type="file" multiple> ব্যবহার করে।<input type="multiple-files"> ব্যবহার করে। type="text" এবং type="password" এর মধ্যে পার্থক্য কী?
type="password" এর জন্য দেখানো হয়েছে।type="password" ব্যবহার করার সময় প্রবেশ করা প্রতিটি অক্ষর একটি তারকাচিহ্ন ( * ) বা একটি বিন্দু ( • ) দ্বারা অস্পষ্ট হয়।type="password" -এর জন্য পাসওয়ার্ড দেওয়ার জন্য একটি কাস্টম ইন্টারফেস দেখানো হয়েছে।