সিএসএস ফরম

সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ

নিচে যে সুন্দর একটি এইচটিএমএল ফর্মটি দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #39ac73;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #26734d;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
 </style>
 <body>

 <h3>এইচটিএমএল ফর্মকে স্টাইল করার জন্য সিএসএস ব্যবহার করা হয়। </h3>

 <div>
   <form>
     <label for="fname">নাম </label>
     <input type="text" id="fname" name="firstname">

     <label for="lname">পিতার নাম </label>
     <input type="text" id="lname" name="lastname">

     <label for="country">দেশ </label>
     <select id="country" name="country">
       <option value="australia"> অস্টেলিয়া </option>
       <option value="canada"> কানাডা </option>
       <option value="usa">ইউএসএ </option>
     </select>
  
     <input type="submit" value="সাবমিট">
   </form>
 </div>

</body>
</html>

ফলাফল

ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা

ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য width প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input {
    width: 100%;
}
</style>
</head>
<body>

<p>একটি full-width ইনপুট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

ফলাফল

উপরের উদাহরণটি সব ধরনের width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃ

input[type=text] - শুধুমাত্র টেক্সট ফিল্ডকে সিলেক্ট করে।
input[type=submit] - শুধুমাত্র সাবমিট ফিল্ডকে সিলেক্ট করে।
input[type=number] - শুধুমাত্র নাম্বার ফিল্ডেকে সিলেক্ট করে।

ইনপুট ফিল্ডে প্যাডিং যুক্ত করা

টেক্সট ফিল্ড এর ভেতরের চারপাশে ফাকা জায়গা যুক্ত করার জন্য padding প্রোপার্টি ব্যবহার করতে হয়।।

টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
</style>
</head>
<body>

<p>পেডিংসহ টেক্সট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

ফলাফল

উপরের উদাহরণে লক্ষ্য করলে দেখবেন box-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।

box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।

ইনপুট ফিল্ডে বর্ডার যুক্ত করা

বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid teal;
    border-radius: 4px;
}
 </style>
 </head>
 <body>

 <p> বর্ডারসহ টেক্সট ফিল্ড </p>

 <form>
   <label for="fname">নাম </label>
   <input type="text" id="fname" name="fname">
   <label for="lname">ঠিকানা </label>
   <input type="text" id="lname" name="lname">
 </form>
</body>
</html>

ফলাফল

আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে border-bottom প্রোপার্টিটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid teal;
}
</style>
</head>
<body>

<p>শুধুমাত্র একটি বটম বর্ডারসহ টেক্সট ফিল্ড</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

ফলাফল

ইনপুট ফিল্ডে কালার যুক্ত করা

ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #3CBC8D;
    color: white;
}
</style>
</head>
<body>

<p>কালার টেক্সট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname" value="হাফিজ">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname" value="চাঁদপুর">
</form>

</body>
</html>

ফলাফল

ইনপুট ফিল্ডকে ফোকাস করা

যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।

ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    outline: none;
}

input[type=text]:focus {
    background-color: lightblue;
}
</style>
</head>
<body>

<p>এই উদাহরনে টেক্সট ফিল্ডে ক্লিক করলে ব্যাকগ্রাউন্ড কালার পরিবর্তনের জন্য আমরা:focus selector ব্যবহার করি।</p>

<form>
  <label for="fname">প্রথম নাম</label>
  <input type="text" id="fname" name="fname" value="সুহিন">
  <label for="fname">শেষ নাম</label>
  <input type="text" id="lname" name="lname" value="রাজু">
</form>
</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #39ac73;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=text]:focus {
    border: 3px solid #26734d;
}
</style>
</head>
<body>
<p>ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ </p>
<p><b>নোটঃ</b> বর্ডার কালারকে এনিমেট করার জন্য আমরা CSS3 transition প্রোপার্টি ব্যবহার করব (এখানে কালারটি ফোকাসে করতে ০.৫ সেকেন্ড সময় নেয়।</p>
<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname" value="নূর মোহাম্মদ রাজু">
  <label for="fname">পিতার নাম</label>
  <input type="text" id="lname" name="lname" value="মো: হাবিব উল্লাহ">
</form>
</body>
</html>

ফলাফল

ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা

ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করেছি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>আইকনসহ ইনপুটঃ</p>

<form>
  <input type="text" name="search" placeholder="সার্চ..">
</form>
</body>
</html>

ফলাফল

সার্চ ইনপুটে এনিমেশন যুক্ত করা

ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>অ্যানিমেটেড সার্চ ইনপুট:</p>

<form>
  <input type="text" name="search" placeholder="সার্চ..">
</form>

</body>
</html>

ফলাফল

টেক্সট এরিয়াকে স্টাইল করা

টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}
</style>
</head>
<body>

<p><strong>টিপস:</strong> টেক্সট এরিয়াকে রিসাইজ থেকে বিরত রাখার জন্য resize প্রোপার্টি ব্যবহার করা হয়।</p>
<form>
  <textarea>টেক্সট লিখুন...</textarea>

</body>
</html>

ফলাফল

সিলেক্ট মেনুকে স্টাইল স্টাইল করা

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #39ac73;
}
</style>
</head>
<body>

<p> স্টাইলকৃত একটি সিলেক্ট মেন্যুঃ</p>

<form>
  <select id="country" name="country">
    <option value="usa">চাঁদপুর</option>
    <option value="usa">ঢাকা</option>
    <option value="usa">ফরিদগঞ্জ</option>
  </select>
</form>

</body>
</html>

ফলাফল

ইনপুট বাটন স্টাইল করা

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<p>স্টাইল ইনপুট বাটনঃ</p>

<input type="button" value="বাটন">
<input type="reset" value="রিসেট">
<input type="submit" value="সাবমিট">

</body>
</html>

ফলাফল

সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

সিএসএস ফরম

উদাহরণ

ফলাফল

ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা

উদাহরণ

ফলাফল

ইনপুট ফিল্ডে প্যাডিং যুক্ত করা

উদাহরণ

ফলাফল

ইনপুট ফিল্ডে বর্ডার যুক্ত করা

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

ইনপুট ফিল্ডে কালার যুক্ত করা

উদাহরণ

ফলাফল

ইনপুট ফিল্ডকে ফোকাস করা

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা

উদাহরণ

ফলাফল

সার্চ ইনপুটে এনিমেশন যুক্ত করা

উদাহরণ

ফলাফল

টেক্সট এরিয়াকে স্টাইল করা

উদাহরণ

ফলাফল

সিলেক্ট মেনুকে স্টাইল স্টাইল করা

উদাহরণ

ফলাফল

ইনপুট বাটন স্টাইল করা

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য