CSS Input স্টাইলিং: ওয়েব ফর্ম ইনপুট ফিল্ড ডিজাইন করার গাইড

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

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

এই টিউটোরিয়ালে উদাহরণসহ HTML ইনপুটের বেসিক এবং CSS ব্যবহার করে একটি ওয়েব পেজে ইনপুট ফিল্ড স্টাইল করার পদ্ধতি আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS ব্যবহার করে ইনপুট ফিল্ড স্টাইল করতে এক্সপার্ট হবেন।

HTML এবং CSS Input

একটি ওয়েব পেজে একটি ফর্ম সংজ্ঞায়িত করতে, আমাদের অবশ্যই HTML ব্যবহার করতে হবে। HTML ভাষা আমাদের আমাদের ফর্মের কাঠামো সংজ্ঞায়িত করতে দেয়—কौন কোন ফর্ম ফিল্ড ظاهر হবে, এবং কোথায়—তারপর আমরা CSS ব্যবহার করতে পারি আমাদের ফর্মের এলিমেন্টগুলিতে কাস্টম স্টাইল প্রযোজ্য করতে।

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

<input type="typeOfInput">

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

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

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

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

আমাদের ইনপুট ফিল্ড <input> ট্যাগের ডিফল্ট HTML স্টাইলগুলো ব্যবহার করে, যা খুব বেসিক। আমরা আমাদের ফর্মে লেবেল যোগ করতে <label> ট্যাগও ব্যবহার করি। কাস্টম ডিজাইন যোগ করতে, আমরা CSS ব্যবহার করতে পারি।

CSS Input

চলুন কয়েকটি উদাহরণের মাধ্যমে CSS ব্যবহার করে ফর্ম এলিমেন্ট স্টাইল করার পদ্ধতি দেখি।

ইনপুটের প্রস্থ সেট করা (Setting the Width of an Input)

মান লইজिए আমরা একটি স্থানীয় স্ট্যাম্প ক্লাবের জন্য একটি ফর্ম ফিল্ড ডিজাইন করছি যা ফর্ম সাবমিট করার লোকদের নাম সংগ্রহ করে। এই ফর্মটি ওয়েব পেজের প্রস্থের 50% ঘেরে। আমরা নিচের কোড ব্যবহার করে এই ফর্মটি তৈরি করতে পারি:

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { width: 50%; }
  </style>

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

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

আমাদের HTML কোডে, আমরা আমাদের ফর্মে Name লেবেল যোগ করতে <label> ট্যাগ ব্যবহার করেছি। তারপর আমরা আমাদের ফর্ম সংজ্ঞায়িত করতে <input> ট্যাগ ব্যবহার করেছি। তারপর, আমাদের CSS কোডে, আমরা সকল <input> ট্যাগের প্রস্থ তাদের প্যারেন্ট কন্টেইনারের 50% এর সমান সেট করেছি। এই কেসে, কারণ প্যারেন্ট কন্টেইনার হলো ওয়েব পেজ, আমাদের <input> ট্যাগ আমাদের সাইটের প্রস্থের 50% ঘেরে।

বর্ডারসহ ইনপুট (Input with Border)

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

এখানে যে কোডটি আমরা ব্যবহার করব আমাদের ইনপুট ফিল্ডের চারপাশে বর্ডার যোগ করার জন্য:

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { border: 3px solid lightblue; }
  </style>

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

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

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

নিচের বর্ডারসহ ইনপুট (Input with Bottom Border)

অতিরিক্তভাবে, আমরা আমাদের ফর্মের একটি নির্দিষ্ট প্রান্তেও বর্ডার যোগ করতে পারি। সুতরাং, আপনি যদি শুধু একটি ফিল্ডের নিচে একটি বর্ডার দেখাতে চান, তবে আপনি border-bottom প্রোপার্টি ব্যবহার করতে পারেন। এখানে যে কোডটি আমরা ব্যবহার করব:

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { border-bottom: 3px solid lightblue; }
  </style>

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

আমাদের কোডে, আমরা আমাদের ইনপুট ফিল্ডের নিচে একটি বর্ডার যোগ করতে border-bottom প্রোপার্টি ব্যবহার করেছি।

প্যাডিংসহ ইনপুট (Input with Padding)

Seattle Stamp Club আমাদের অনুরোধ করেছে ফর্মের কন্টেন্ট—যেখানে ব্যবহারকারী তথ্য এন্টার করবে—এবং ফর্মের বর্ডারের মধ্যে স্পেস দেখাতে।

ক্লাব চায় ফর্মের কন্টেন্ট এবং উপরের ও নিচের বর্ডারের মধ্যে 10px প্যাডিং থাকবে। ক্লাবটি চায় ফর্মের কন্টেন্ট এবং বাম ও ডানের বর্ডারের মধ্যে 15px প্যাডিং থাকবে।

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

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { padding: 10px 15px; box-sizing: border-box; }
  </style>

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

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

আমরা box-sizing প্রোপার্টির মান border-box সেট করেছি। এটি নিশ্চিত করে প্যাডিং এলিমেন্টের মোট প্রস্থে অন্তর্ভুক্ত থাকে।

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

ফোকাসড ইনপুটের সাথে স্টাইলস (Styles with Focused Input)

অधিকাংশ ব্রাউজারে, যখন আপনি একটি ফর্ম ফিল্ডে ক্লিক করেন, একটি নীল আউটলাইন (outline) ফিল্ডে যোগ হবে। এই ফিচারটি ব্যবহার করা হয় আপনি যেই ফর্মে বর্তমানে ফোকাস করছেন সেটি হাইলাইট করার জন্য।

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

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input:focus { outline: none; border-bottom: 3px solid lightgray; }
  </style>

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

ওয়েবফর্মটি ডিফল্ট HTML স্টাইল ব্যবহার করে ظاهر হয়। যাইহোক, আপনি যখন ফর্মে ক্লিক করবেন, আমাদের ফর্মের নিচে একটি 3px প্রস্থের স olid হালকা স্লেটি বর্ডার প্রযোজ্য হবে।

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

ফোকাস সিলেক্টর সম্পর্কে আরও জানতে, আমাদের CSS :focus সিলেক্টর গাইড পড়ুন।

রাউন্ডেড কর্নারসহ ইনপুট (Input with Rounded Corners)

Seattle Stamp Club আমাদের অনুরোধ করেছে ইনপুট ফিল্ডের প্রতিটি প্রান্তে একটি হালকা স্লেটি বর্ডার যোগ করতে, এবং ইনপুটের কর্নারগুলো রাউন্ড (rounded) করতে। আমরা border-radius প্রোপার্টি ব্যবহার করে এটি করতে পারি, যা আপনাকে CSS-এ একটি rounded corners ইফেক্ট তৈরি করতে দেয়।

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

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { border: 3px solid lightgray; border-radius: 10px; }
  </style>

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

এই উদাহরণে, আমরা একটি 3px প্রস্থের স olid হালকা স্লেটি বর্ডার সংজ্ঞায়িত করেছি যা আমাদের ইনপুট ফিল্ডের চারপাশে ظاهر হয়। তারপর, আমরা আমাদের ফর্ম ফিল্ডের কর্নারগুলো রাউন্ড করতে border-radius প্রোপার্টি ব্যবহার করেছি।

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

ব্যাকগ্রাউন্ড রঙসহ ইনপুট (Input with Background Color)

Seattle Stamp Club আমাদের অনুরোধ করেছে একটি চূড়ান্ত ফর্ম ফিল্ড তৈরি করতে। এই ফর্ম ফিল্ডে একটি 3px প্রস্থের স olid হালকা স্লেটি বর্ডার থাকবে এবং হালকা নীল ব্যাকগ্রাউন্ড থাকবে।

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

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
  <style>
    input { border: 3px solid lightgray; background-color: lightblue; }
  </style>

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

আমাদের কোডে, আমরা border প্রোপার্টি ব্যবহার করেছি আমাদের ইনপুট ফিল্ডের চারপাশে একটি 3px প্রস্থের স olid হালকা স্লেটি বর্ডার সংজ্ঞায়িত করতে। তারপর, আমরা background-color প্রোপার্টি ব্যবহার করেছি আমাদের ফর্ম ফিল্ডের ব্যাকগ্রাউন্ড রঙ হালকা নীল সেট করতে।

নির্দিষ্ট ইনপুট ফিল্ডে স্টাইল প্রযোজ্য করা (Apply Styles to Specific Input Fields)

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

এখানেই অ্যাট্রিবিউট সিলেক্টর (attribute selectors) কাজে আসে। আপনার স্টাইলগুলিতে input ব্যবহার করার পরিবর্তে, আপনি যদি শুধু একটি নির্দিষ্ট ইনপুটে স্টাইল প্রযোজ্য করতে চান, তবে আপনি এই সিলেক্টরগুলোর একটিই ব্যবহার করার চেষ্টা করতে পারেন:

• input[type=text]: সকল টেক্সট ফিল্ডে একটি স্টাইল প্রযোজ্য করে।
• input[type=email]: সকল ইমেইল ফিল্ডে একটি স্টাইল প্রযোজ্য করে।
• input[type=password]: সকল পাসওয়ার্ড ফিল্ডে একটি স্টাইল প্রযোজ্য করে।
• input[id=userName]: userName আইডি 가진 এলিমেন্টে একটি স্টাইল প্রযোজ্য করে।

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

উপসংহার (Conclusion)

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

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