সিএসএস ফর্ম - CSS Form

সিএসএস এর বিভিন্ন প্রোপার্টি, যেমন color, background-color, margin, padding ইত্যাদি ব্যবহার করে কোন এইচটিএমএল ফর্মকে খুব সুন্দর ভাবে ডিজাইন করা যায়। নিচে একটি এইচটিএমএল ফর্ম দেখুন, যেখানে সিএসএস স্টাইল কোড ব্যবহার করা হয়েছে।

width প্রোপার্টি

সিএসএস এর width প্রোপার্টি ব্যবহার করে, এইচটিএমএল ফরমের ইনপুট ফিল্ডের প্রস্থ বা width নির্ধারণ করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

উপরের উদাহরন এর জন্য নিচের সিএসএস কোড ব্যবহার করতে হবে।

input {
   width: 100%;
   }

কোড এডিটর

এট্রিবিউট সিলেক্টর ব্যবহার

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

• input[type=text],
• input[type=reset],
• input[type=button],
• input[type=number] ইত্যাদি

সিএসএস এর এট্রিবিউট সিলেক্টর এর ব্যবহার সম্পর্কে জানতে আমাদের সিএসএস এট্রিবিউট সিলেক্টর টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

এইচটিএমএল এর এইচটিএমএল ফর্ম এলিমেন্ট সম্পর্কে জানতে আমাদের এইচটিএমএল ফর্ম এলিমেন্ট টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।

margin ও padding প্রোপার্টি

সিএসএস এর marginও padding প্রোপার্টি ব্যবহার করে ইনপুট ফিল্ডগুলোর মধ্যবর্তী ও অন্তর্বর্তী স্থনের পরিমান নির্ধারণ করে এইচটিএমএল ফর্মের সৌন্দর্য বৃদ্ধি করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

input {
   margin: 10px;
   padding: 12px 17px;
   }

কোড এডিটর

color প্রোপার্টি

সিএসএস এর color প্রোপার্টি ব্যবহার করে, ফর্ম ফিল্ডের এলিমেন্ট গুলোতে রঙের পরিবর্তন আনা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

উপরের উদাহরনটির জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

input {
   color: red;
   }

কোড এডিটর

background-color প্রোপার্টি

সিএসএস এর background-color প্রোপার্টি ব্যবহার করে, ফর্মের ইনপুট ফিল্ড গুলোর পৃষ্ঠদেশ বা background এর রঙ পরিবর্তন করা যায়। নিচে background-color প্রোপার্টির একটি ব্যাবহারিক উদাহরন দেখুন।

উপরের উদাহরণটির জন্য নিচের মত সিএসএস স্টাইল কোড ব্যবহার করতে হবে।

input {
   background-color: YellowGreen  ;
   }

কোড এডিটর

border প্রোপার্টি

সিএসএস এর border প্রোপার্টি ব্যবহার করে এইচটিএমএল ফর্ম কে ডিজাইন করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

সিএসএস এর border প্রোপার্টি ব্যবহার করে উপরের মত স্টাইল এর জন্য নিচের স্টাইল কোড গুলো দেখুন।

input {
   border: 2px solid YellowGreen;
   }

কোড এডিটর

ছবি বা icon ব্যবহার

ইনপুট ফিল্ডের সাথে সিএসএস এর background প্রোপার্টি ব্যবহার করে কোন ছবি বা icon যুক্ত করা যায়। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

সিএসএস এর background প্রোপার্টি ব্যবহার করে উপরের মত স্টাইল এর জন্য নিচের সিএসএস কোড গুলো দেখুন।

input[type=email] {
   background-image: url('email_icon.png');
   background-color: white;
   background-position: 10px 10px; 
   background-repeat: no-repeat;
   padding: 9px 20px 12px 40px;
   }

কোড এডিটর

বাটনে স্টাইল করা

বিভিন্ন সিএসএস প্রোপার্টি গুলো ব্যবহার করে নিচের মত ফর্ম submit বাটন তৈরি যায়।

ওপরের এইচটিএমএল ফর্ম submit বাটন তৈরি করার জন্য নিচের মত সিএসএস স্টাইল কোড গুলো ব্যবহার করা হয়েছে।

input[type=submit] { 
   width:auto;
   padding:0.8em 3em;
   background-color: #7777ff;
   border-radius:2px;
   }
   
input[type=submit]:hover {
   width:auto;
   padding:0.8em 3em;
   background-color: #5555ff;
   border-radius:2px;
   box-shadow: 2px 3px 5px gray;
   }

কোড এডিটর

রেস্পন্সিভ ফর্ম

সিএসএস এর মিডিয়া ক্যোয়ারী ব্যবহার করে রেস্পন্সিভ ফর্ম তৈরি করা যায়। সিএসএস এর মিডিয়া ক্যোয়ারী সম্পর্কে জানতে আমাদের মিডিয়া ক্যোয়ারী টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।