গ্লিচ

ভালভাবে ডিজাইন করা ফর্মগুলি ব্যবহারকারীদের সাহায্য করে এবং রূপান্তর হার বাড়ায়। একটি ছোট ফিক্স একটি বড় পার্থক্য করতে পারে!

এখানে একটি সাধারণ অর্থপ্রদান ফর্মের একটি উদাহরণ রয়েছে যা সমস্ত সেরা অনুশীলনগুলি প্রদর্শন করে:

এখানে একটি সাধারণ ঠিকানা ফর্মের একটি উদাহরণ যা সমস্ত সেরা অনুশীলনগুলি প্রদর্শন করে:

উদাহরণস্বরূপ, নিম্নলিখিত HTML 1900 এবং 2020-এর মধ্যে একটি জন্ম বছরের জন্য ইনপুট নির্দিষ্ট করে type="number" ব্যবহার করে min এবং max দ্বারা নির্দিষ্ট সীমার মধ্যে ইনপুট মানগুলিকে শুধুমাত্র সংখ্যাগুলিতে সীমাবদ্ধ করে৷ আপনি যদি পরিসরের বাইরে একটি সংখ্যা প্রবেশ করার চেষ্টা করেন, ইনপুটটি একটি অবৈধ অবস্থায় সেট করা হবে।

নিচের উদাহরণটি pattern="[\d ]{10,30}" ব্যবহার করে একটি বৈধ পেমেন্ট কার্ড নম্বর নিশ্চিত করতে, যেখানে স্পেস দেওয়া আছে:

আধুনিক ব্রাউজারগুলি টাইপ email বা url সহ ইনপুটগুলির জন্য মৌলিক বৈধতাও করে।

CSS গ্রিড লেআউট

CSS গ্রিড লেআউট সহজবোধ্যভাবে নমনীয় গ্রিড তৈরি করার অনুমতি দেয়। যদি আমরা আগের ভাসমান উদাহরণ বিবেচনা করি, শতাংশের সাথে আমাদের কলাম তৈরি করার পরিবর্তে, আমরা গ্রিড লেআউট এবং fr ইউনিট ব্যবহার করতে পারি, যা কন্টেইনারে উপলব্ধ স্থানের একটি অংশকে উপস্থাপন করে।

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

নিয়মিত গ্রিড লেআউট তৈরি করতেও গ্রিড ব্যবহার করা যেতে পারে, যতগুলো আইটেম ফিট হবে। স্ক্রীনের আকার সঙ্কুচিত হওয়ার সাথে সাথে উপলব্ধ ট্র্যাকের সংখ্যা হ্রাস পাবে৷ নীচের ডেমোতে, আমাদের কাছে ন্যূনতম 200px আকারের প্রতিটি সারিতে যতগুলি কার্ড ফিট হবে ততগুলি কার্ড রয়েছে৷

CSS গ্রিড লেআউট সম্পর্কে আরও পড়ুন

একাধিক-কলাম বিন্যাস

কিছু ধরণের লেআউটের জন্য আপনি একাধিক-কলাম লেআউট (মাল্টিকোল) ব্যবহার করতে পারেন, যা column-width বৈশিষ্ট্য সহ কলামের প্রতিক্রিয়াশীল সংখ্যা তৈরি করতে পারে। নীচের ডেমোতে, আপনি দেখতে পাচ্ছেন যে কলামগুলি যোগ করা হয়েছে যদি অন্য 200px কলামের জন্য জায়গা থাকে।