আমরা যখন ফর্মগুলি তৈরি করি, তখন আমরা সেগুলিকে আমাদের ক্লায়েন্ট বা গ্রাহকদের কাছে অনন্য এবং আকর্ষণীয় করে তুলতে চাই৷ এটা সত্য যে আমরা যেভাবে আমাদের ফর্মগুলি উপস্থাপন করি তা ব্যবহারকারী-অভিজ্ঞতাকে আরও ভাল করে তোলে। আমাদের ফর্ম স্টাইল করার জন্য, আমরা বিভিন্ন ধরনের CSS ইনপুট টাইপ নির্বাচক ব্যবহার করি।
সিনট্যাক্স এবং উদাহরণ
আপনি যখন এই নিবন্ধটি পড়বেন তখন সহগামী কোডপেন দেখুন।
আমি অনুমান করছি যে আপনার এইচটিএমএল দিয়ে ফর্ম তৈরি করার কিছু অভিজ্ঞতা আছে, তাই আমি বিশদভাবে এইচটিএমএল কভার করব না।
কোনো স্টাইল ছাড়াই আমাদের ফর্মটি কিছুটা এইরকম দেখায়:
আমরা যদি 1990 এর দশকে থাকতাম তবে এটি এতটা খারাপ হবে না, আমি বলতে চাচ্ছি Netscape এর (90 এর দশকের একটি জনপ্রিয় ব্রাউজার) হোমপেজটি দেখুন।
কিন্তু আমরা নব্বইয়ের দশকে নেই। সৌভাগ্যক্রমে আজ আমাদের কাছে CSS আছে এবং আমরা এই সহজ সিনট্যাক্সের মাধ্যমে ইনপুট স্টাইল করতে পারি:
input[type="<type>"] {
/* styles here */
}
স্টাইলিং টেক্সট ইনপুট
আমরা যা করতে পারি তা হল আমাদের ইনপুট এবং লেবেলের ফন্ট সাইজ স্টাইল করা। আমরা এগুলোকে কীওয়ার্ড দ্বারা নির্বাচন করতে পারি যতটা সহজ:
input, label {
font-size: 2rem;
padding: 1rem;
}
এটি আমাদের পাঠ্যকে আরও সুস্পষ্ট করে তুলবে এবং ইনপুটগুলির মধ্যে কিছুটা স্থান দেবে। এর সাথে, আসুন এগিয়ে যাই এবং আমাদের ইমেলের পাশাপাশি নাম আছে এমন টেক্সট ইনপুটটিকে স্টাইল করি৷
input[type="text"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
border: 0;
border-left: 0.3rem solid mediumspringgreen;
border-radius: 0.5rem;
}
এখানে কৌশলটি হল যে আমরা সীমানাগুলি সরিয়ে ফেলি এবং আমাদের প্রয়োজনীয় নির্দিষ্ট সীমানা যোগ করি। আমাদের ইমেলের জন্য আমরা আমাদের সীমানায় কিছু ব্যাসার্ধ যোগ করেছি যাতে এটিকে বৃত্তাকার দেখায়। এত কম কোড সহ, আমরা ইতিমধ্যেই কিছু ভাল উন্নতি করেছি৷
সতর্কতা:ড্রপডাউন
আরেকটি ইনপুট যা আমরা স্টাইল করতে পারি তা হল ড্রপডাউন। কিন্তু একটি সতর্কতা আছে। যদি আমরা input[type="select"] করি এটি আমাদের ড্রপডাউন নির্বাচন করবে না। আমাদের select ব্যবহার করতে হবে ড্রপডাউন নির্বাচন করতে কীওয়ার্ড।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
select {
padding: 2rem;
font-size: 2rem;
width: 25rem;
border: none;
border-bottom: 0.3rem solid mediumspringgreen;
}
অন্যান্য ইনপুট স্টাইলিং
এখন পর্যন্ত আপনার স্টাইলিং ইনপুটগুলির হ্যাং থাকা উচিত। এছাড়াও, আমরা ইতিমধ্যে একটি শৈলী প্যাটার্ন আছে বলে মনে হচ্ছে. আসুন এগিয়ে যাই এবং নম্বর এবং তারিখ ইনপুটগুলিতে আমাদের স্টাইল প্যাটার্ন যোগ করি।
input[type="number"], input[type="date"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
CSS-এর মাত্র কয়েকটি স্ট্রোকের মাধ্যমে, এবং খুব সহজ নির্বাচক ব্যবহার করে আমরা আমাদের ইনপুটগুলিকে নতুন চেহারা দিতে সক্ষম!
এটি কেবল শুরু, তাই আপনি আর কী করতে পারেন তা কল্পনা করুন।
আসলে, আমি কোডপেনে কিছু ইনপুট অসমাপ্ত রেখেছি। তাই এগিয়ে যান এবং আপনি চান যে কোনো শৈলী প্রয়োগ করুন. আপনি ইতিমধ্যে এটি কিভাবে করতে জানেন. এটার জন্য যান!
