CSS ইনপুট

ওয়েব ফর্মগুলি অনেক ওয়েবসাইটের একটি অপরিহার্য অংশ, এবং একটি ওয়েবসাইটের অপারেটরকে ব্যবহারকারীর কাছ থেকে ইনপুট গ্রহণ করার অনুমতি দেয়। উদাহরণস্বরূপ, একটি ওয়েব ফর্ম ব্যবহারকারীদের ইমেল ঠিকানাগুলি গ্রহণ করতে ব্যবহার করা যেতে পারে যারা একটি ওয়েবসাইটের ইমেল নিউজলেটারে সাইন আপ করতে চান৷

CSS ব্যবহার করে, আপনি একটি ওয়েব পেজে ইনপুট তৈরি করতে কাস্টম শৈলী যোগ করতে পারেন। এটি আপনাকে নান্দনিকভাবে আনন্দদায়ক ফর্ম ক্ষেত্র তৈরি করতে দেয় যা দর্শকরা তথ্য জমা দিতে ব্যবহার করতে পারে।

এই টিউটোরিয়ালটি উদাহরণ সহ, এইচটিএমএল ইনপুটগুলির মূল বিষয়গুলি এবং একটি ওয়েব পেজে ইনপুট ক্ষেত্রগুলিকে স্টাইল করার জন্য কীভাবে CSS ব্যবহার করতে হয় তা নিয়ে আলোচনা করবে। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS ব্যবহার করে ইনপুট ক্ষেত্র স্টাইল করার ক্ষেত্রে একজন বিশেষজ্ঞ হয়ে উঠবেন।

HTML এবং CSS ইনপুট

একটি ওয়েব পৃষ্ঠায় একটি ফর্ম সংজ্ঞায়িত করতে, আমাদের অবশ্যই HTML ব্যবহার করতে হবে। এইচটিএমএল ভাষা আমাদের ফর্মের গঠন সংজ্ঞায়িত করার অনুমতি দেয় - কোন ফর্ম ক্ষেত্রগুলি প্রদর্শিত হবে এবং কোথায় - তারপরে আমরা আমাদের ফর্মের উপাদানগুলিতে কাস্টম শৈলী প্রয়োগ করতে CSS ব্যবহার করতে পারি৷

HTML-এ, ট্যাগটি একটি ফর্মে ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। একটি HTML -এর মৌলিক সিনট্যাক্স হল:

<input type="typeOfInput">

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আপনি যদি HTML ইনপুট সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে HTML ইনপুটগুলির জন্য আমাদের প্রাথমিক নির্দেশিকা পড়ুন। এখানে একটি ফর্ম ফিল্ডের একটি মৌলিক উদাহরণ যা একজন ব্যবহারকারীর নাম গ্রহণ করে:

<label for="userName">Name</label>
<input type="text" name="userName">

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

আমাদের ইনপুট ক্ষেত্রটি ট্যাগের জন্য ডিফল্ট HTML শৈলী ব্যবহার করে, যা বরং মৌলিক। আমাদের ফর্মে একটি লেবেল যোগ করতে আমরা একটি ট্যাগও ব্যবহার করি। কাস্টম ডিজাইন যোগ করতে, আমরা CSS ব্যবহার করতে পারি।

CSS ইনপুট

আসুন সিএসএস ব্যবহার করে উপাদানগুলিকে কীভাবে স্টাইল করা যায় তার কয়েকটি উদাহরণের মাধ্যমে চলুন।

একটি ইনপুটের প্রস্থ নির্ধারণ করা

ধরুন আমরা একটি স্থানীয় স্ট্যাম্প ক্লাবের জন্য একটি ফর্ম ফিল্ড ডিজাইন করছি যা ফর্ম জমা দেওয়া লোকেদের নাম সংগ্রহ করে। এই ফর্মটি একটি ওয়েব পৃষ্ঠার প্রস্থের 50% নিতে হবে। আমরা নিম্নলিখিত কোড ব্যবহার করে এই ফর্মটি তৈরি করতে পারি:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	width: 50%;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

এই উদাহরণে, আমরা একটি ফর্ম ফিল্ড তৈরি করেছি যা ওয়েব পেজের প্রস্থের 50% এর সমান।

আমাদের HTML কোডে, আমরা Name লেবেল যোগ করতে ট্যাগ ব্যবহার করেছি আমাদের ফর্মে। তারপর আমরা আমাদের ফর্ম সংজ্ঞায়িত করার জন্য একটি ট্যাগ ব্যবহার করেছি। তারপর, আমাদের CSS কোডে, আমরা সমস্ত ট্যাগের প্রস্থ তাদের মূল কন্টেইনারের 50% এর সমান সেট করি। এই ক্ষেত্রে, কারণ মূল কন্টেইনার হল ওয়েব পৃষ্ঠা, আমাদের ট্যাগ আমাদের সাইটের প্রস্থের 50% দখল করে।

সীমানা সহ ইনপুট

সিয়াটেল স্ট্যাম্প ক্লাব আমাদের প্রতিটি ফর্ম ফিল্ডের চারপাশে একটি হালকা নীল সীমানা যুক্ত করতে বলেছে কারণ হালকা নীল তাদের ক্লাবের রঙ। সীমানার প্রস্থ 3px হওয়া উচিত। আমরা প্রতিটি ফর্ম ইনপুট ক্ষেত্রের চারপাশে একটি সীমানা যোগ করতে বর্ডার সম্পত্তি ব্যবহার করতে পারি।

এই কোডটি আমরা আমাদের ইনপুট ক্ষেত্রের চারপাশে সীমানা যোগ করতে ব্যবহার করব:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightblue;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের কোডে, আমরা আমাদের ইনপুট ক্ষেত্রের চারপাশে একটি বর্ডার যোগ করতে বর্ডার স্টাইল ব্যবহার করি। এই সীমানা 3px পুরু। আপনি দেখতে পাচ্ছেন, আমাদের ফর্ম ক্ষেত্রের একটি হালকা নীল সীমানা রয়েছে।

আপনি যদি CSS সীমানা সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS সীমানা সম্পর্কে আমাদের চূড়ান্ত নির্দেশিকা পড়ুন।

নিচের সীমানা সহ ইনপুট

উপরন্তু, আমরা আমাদের ফর্মের একটি নির্দিষ্ট প্রান্তে একটি বর্ডার যোগ করতে পারি। সুতরাং, যদি আমরা কেবলমাত্র একটি ক্ষেত্রের নীচে একটি সীমানা দেখতে চাই, আমরা বর্ডার-নিচের সম্পত্তি ব্যবহার করতে পারি। আমরা যে কোডটি ব্যবহার করব তা এখানে:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border-bottom: 3px solid lightblue;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের কোডে, আমরা আমাদের ইনপুট ক্ষেত্রের নীচে একটি বর্ডার যোগ করতে বর্ডার-নিচের বৈশিষ্ট্য ব্যবহার করি।

প্যাডিং সহ ইনপুট

সিয়াটল স্ট্যাম্প ক্লাব আমাদেরকে ফর্মের বিষয়বস্তুর মধ্যে স্থান দেখাতে বলেছে—যে জায়গাটিতে ব্যবহারকারী তথ্য প্রবেশ করেন—এবং ফর্মের সীমানা।

ক্লাব চায় উপরের এবং নীচের সীমানা এবং ফর্মের বিষয়বস্তুর মধ্যে একটি 10px প্যাডিং প্রদর্শিত হোক। ক্লাব বাম এবং ডান সীমানা এবং ফর্মের বিষয়বস্তুর মধ্যে একটি 15px প্যাডিং দেখতে চায়৷

আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	padding: 10px 15px;
	box-sizing: border-box;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

এই উদাহরণে, আমরা আমাদের ফর্ম ক্ষেত্রের বিষয়বস্তু এবং ফর্ম ক্ষেত্রের সীমানার মধ্যে প্যাডিং প্রয়োগ করতে প্যাডিং শৈলী ব্যবহার করেছি। প্রথম মান (10px) উপরের এবং নীচের প্রান্তগুলির জন্য প্যাডিং সেট করে এবং দ্বিতীয় মান (15px) বাম এবং ডান প্রান্তগুলির জন্য প্যাডিং সেট করে৷

আমরা বক্স-আকারের বৈশিষ্ট্যের মান border-box-এ সেট করেছি . এটি নিশ্চিত করে যে প্যাডিং উপাদানগুলির মোট প্রস্থে অন্তর্ভুক্ত রয়েছে।

আপনি যদি CSS প্যাডিং সম্পত্তি সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS প্যাডিংয়ের জন্য আমাদের গাইড পড়ুন।

ফোকাসড ইনপুট সহ শৈলী

বেশিরভাগ ব্রাউজারে, আপনি যখন একটি ফর্ম ফিল্ডে ক্লিক করেন, একটি নীল আউটলাইন ক্ষেত্রে যোগ করা হবে। এই বৈশিষ্ট্যটি আপনি বর্তমানে ফোকাস করা ফর্ম হাইলাইট করতে ব্যবহার করা হয়.

যাইহোক, আমরা :focus CSS নির্বাচক ব্যবহার করে এটি কাস্টমাইজ করতে পারি। সিয়াটেল স্ট্যাম্প ক্লাব আমাদের ফর্মের নীচে একটি হালকা ধূসর সীমানা যোগ করতে বলেছে যখন ব্যবহারকারী ফর্মটিতে ক্লিক করে। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input:focus {
	outline: none;
	border-bottom: 3px solid lightgray;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

ওয়েবফর্মটি ডিফল্ট HTML শৈলী ব্যবহার করে প্রদর্শিত হয়। যাইহোক, যখন আপনি ফর্মটিতে ক্লিক করেন, একটি 3px-চওড়া কঠিন হালকা ধূসর সীমানা আমাদের ফর্মের নীচে প্রয়োগ করা হয়।

কারণ আমরা একটি :focus নির্বাচক ব্যবহার করেছি, যা ব্যবহারকারী ইনপুট ক্ষেত্রে ক্লিক করলে আমাদের একটি স্টাইল প্রয়োগ করতে দেয়। আমরা রূপরেখাও ব্যবহার করেছি:কোনো নিয়ম নেই, যা ব্যবহারকারী যখন ফর্ম ইনপুট ক্ষেত্রে ক্লিক করে তখন ডিফল্ট নীল আউটলাইন দেখাতে বাধা দেয়।

ফোকাস নির্বাচক সম্পর্কে আরও জানতে, সিএসএস :ফোকাস নির্বাচকের আমাদের নির্দেশিকা পড়ুন।

গোলাকার কোণ সহ ইনপুট

সিয়াটেল স্ট্যাম্প ক্লাব আমাদের ইনপুট ক্ষেত্রের প্রতিটি প্রান্তের চারপাশে একটি হালকা ধূসর সীমানা যোগ করতে বলেছে এবং ইনপুটগুলির কোণে গোল করতে বলেছে৷ আমরা সীমানা-ব্যাসার্ধ বৈশিষ্ট্য ব্যবহার করে তা করতে পারি, যা আপনাকে একটি rounded corners তৈরি করতে দেয় CSS এ প্রভাব।

বৃত্তাকার কোণ সহ একটি ফর্ম ক্ষেত্র তৈরি করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	border-radius: 10px;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

এই উদাহরণে, আমরা একটি 3px-প্রশস্ত কঠিন হালকা ধূসর সীমানা সংজ্ঞায়িত করি যা আমাদের ইনপুট ক্ষেত্রের চারপাশে প্রদর্শিত হয়। তারপর, আমরা আমাদের ফর্ম ক্ষেত্রের কোণগুলিকে বৃত্তাকার করতে সীমানা-ব্যাসার্ধ বৈশিষ্ট্য ব্যবহার করি।

আপনি যদি একটি ওয়েব পৃষ্ঠায় একটি HTML উপাদানে বৃত্তাকার কোণগুলি কীভাবে প্রয়োগ করবেন সে সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS বৃত্তাকার কোণে আমাদের নির্দেশিকা পড়ুন।

পটভূমির রঙ সহ ইনপুট

সিয়াটল স্ট্যাম্প ক্লাব আমাদের একটি চূড়ান্ত ফর্ম ক্ষেত্র তৈরি করতে বলেছে। এই ফর্ম ক্ষেত্রের একটি 3px-প্রশস্ত কঠিন হালকা ধূসর সীমানা থাকা উচিত এবং একটি হালকা নীল পটভূমি থাকা উচিত।

আমরা এই ফর্ম ক্ষেত্র তৈরি করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	background-color: lightblue;
}

CSS ইনপুট আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের কোডে, আমরা আমাদের ইনপুট ক্ষেত্রগুলির চারপাশে একটি 3px-প্রশস্ত কঠিন হালকা ধূসর সীমানা সংজ্ঞায়িত করতে সীমানা সম্পত্তি ব্যবহার করেছি। তারপর, আমরা আমাদের ফর্ম ক্ষেত্রের পটভূমির রঙ হালকা নীলে সেট করতে ব্যাকগ্রাউন্ড-কালার বৈশিষ্ট্য ব্যবহার করেছি।

নির্দিষ্ট ইনপুট ক্ষেত্রগুলিতে শৈলী প্রয়োগ করুন

এই টিউটোরিয়ালে, আমরা আলোচনা করেছি কিভাবে ক্ষেত্রে শৈলী প্রয়োগ করতে হয়। যাইহোক, একটি উপায় আছে যে আপনি শুধুমাত্র একটি নির্দিষ্ট ইনপুট ধরনের শৈলী প্রয়োগ করতে পারেন।

এখানেই অ্যাট্রিবিউট নির্বাচকরা আসে৷ input ব্যবহার করার পরিবর্তে৷ আপনার শৈলীতে, আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুটে শৈলী প্রয়োগ করতে চান, আপনি এই নির্বাচকদের মধ্যে একটি ব্যবহার করার চেষ্টা করতে পারেন:

ইনপুট[টাইপ=টেক্সট]:সমস্ত পাঠ্য ক্ষেত্রে একটি স্টাইল প্রয়োগ করে।
ইনপুট[type=email]:সমস্ত ইমেল ক্ষেত্রে একটি স্টাইল প্রয়োগ করে।
ইনপুট[টাইপ=পাসওয়ার্ড]:সমস্ত পাসওয়ার্ড ক্ষেত্রে একটি স্টাইল প্রয়োগ করে।
ইনপুট[id=userName]:আইডি userName সহ উপাদানটিতে একটি শৈলী প্রয়োগ করে .

অ্যাট্রিবিউট নির্বাচকরা কীভাবে কাজ করে সে সম্পর্কে আরও জানতে, CSS অ্যাট্রিবিউট নির্বাচকদের জন্য আমাদের ক্যারিয়ার কর্ম নির্দেশিকা পড়ুন।

উপসংহার

CSS ব্যবহার করে, আপনি কাস্টম-ডিজাইন করা ওয়েব ফর্ম তৈরি করতে পারেন যা উভয়ই নান্দনিকভাবে আনন্দদায়ক এবং কার্যকরী। প্রথমে, আপনি একটি ফর্মের কাঠামো ডিজাইন করতে HTML ব্যবহার করেন, তারপর আপনি ফর্মটিতে শৈলী প্রয়োগ করতে CSS শৈলী ব্যবহার করতে পারেন।

এই টিউটোরিয়ালে আলোচনা করা হয়েছে, উদাহরণের রেফারেন্স সহ, এইচটিএমএল ইনপুটগুলির মূল বিষয় এবং কীভাবে আপনি ইনপুট ক্ষেত্রগুলিকে স্টাইল করতে CSS ব্যবহার করতে পারেন। এখন আপনি CSS ব্যবহার করে একজন বিশেষজ্ঞের মতো আপনার ইনপুট ক্ষেত্রগুলিকে স্টাইল করার জন্য প্রয়োজনীয় জ্ঞান দিয়ে সজ্জিত!