X

X

X

CSS Forms । ফরম


স্বাভাবিক অবস্থায় HTML ফরম খুব একটা দৃষ্টিনন্দন হয় না। তবে সিএসএস ব্যবহার করে HTMl ফরমকে সুন্দরভাবে ইচ্ছেমত ডিজাইন করা যায়।


নিজে নিজে চেষ্টা করুন »


Input Field সমূহকে স্টাইল করার পদ্ধতি।

ইনপুট ফিল্ডের প্রস্থ সেট করার জন্য width property ব্যবহার করতে হবে:


নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উপরের উদাহরণটি সব <input> element এর জন্য প্রযোজ্য। যদি নির্দিষ্ট কোনো তথ্য ইনপুট করতে চান তবে, এট্রিবিউটের মাধ্যমে এটি করতে হবে:

  • input[type=text] – টেক্সট ফিল্ড তৈরি করার জন্য ব্যবহৃত হয়।
  • input[type=password] – পাসওয়ার্ড ফিল্ড তৈরি করার জন্য ব্যবহৃত হয়।
  • input[type=number] – নাম্বার ফিল্ড তৈরি করার জন্য ব্যবহৃত হয়।
  • ইত্যাদি..

Padded Inputs

ইনপুট বক্সের কন্টেন্ট ও বর্ডারের মধ্যে দূরত্ব তৈরি করার জন্য padding property ব্যবহার করতে হবে।

টিপস: যখন একসাথে একটির পর আরেকটি ইনপুট ইলামেন্ট ব্যবহার করবেন, তখন সেগুলো জোড়া লেগে যেতে পারে। তাদের পৃথক করার জন্য margin প্রপার্টি ব্যবহার করতে হবে।

Code Example

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

লক্ষ্য করুন যে box-sizing property এর মান border-box সেট করা হয়েছে। এর কারণ হচ্ছে, স্বাভাবিক অবস্থায়, ইলামেন্টর বর্ডার কন্টেন্ট থেকে বিবেচনা করা হয়। যেহেতু আমরা প্যাডিং যুক্ত করেছি, কাজেই ইলামেন্টর দৃশ্যমান প্রস্থ প্যাডিং+মূল দৈর্ঘ্য/প্রস্থ বিবেচিত হয়, যেটি অনেক সময় অনেক সমস্যা তৈরি করে। একারণে box-sizing property এর মান border-box সেট করা হয়েছে যাতে ইলামেন্টের চারপাশের প্যাডিং মূল দৈর্ঘ্য ও প্রস্থের সাথে সংযুক্ত হয় ।
বিস্তারিত জানার জন্য box-sizing property এর টিউটোরিয়াল দেখুন CSS3 Box Sizing chapter-এ।

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

border property ব্যবহার করে ইনপুট ফিল্ডের size ও color সেট করা যায়, এবং border-radius property ব্যবহার করে বৃত্তাকার বা অর্ধবৃত্তাকার বর্ডার সেট করা যায়:


Code Example

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


যদি শুধুমাত্র নিচের দিকে বর্ডার সেট করতে চান তবে the border-bottom property ব্যবহার করুন:


Code Example

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রঙিন ইনপুট ফিল্ড

ব্যাকগ্রাউন্ড রং সেট করার জন্য background-color property ব্যবহার করুন, এবং টেক্সটের রং সেট করার জন্য color property ব্যবহার করুন :


Code Example

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;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Focused ইনপুট ফিল্ডের জন্য স্টাইল

স্বাভাবিক অবস্থান কিছু কিছু ব্রাউজার স্বয়ংক্রিয় ভাবে ফোকাসড ইনপুট ফিল্ডে নীল রংয়ের বর্ডার সেট করে। এটি পরিবর্তন করার জন্য :focus selector ব্যবহার করে ইচ্ছেমত স্টাইল সেট করতে পারবেন। এক্ষেত্রে outline: none; সেট করলে বর্ডারের চারপাশে অতিরিক্ত আউটলাইন বর্ডার উপস্থাপিত হবে না :


Code Example

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border: 3px solid #555;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Code Example

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #3CBC8D;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


icon/image সহ ইনপুট ফিল্ড উপস্থাপণ

যদি ইনপুট ফিল্ডের সাথে আইকন উপস্থাপণ করতে চান তবে, background-image property এবং background-position property প্রপার্টি ব্যবহার করে এটি করতে পারবেন। এক্ষেত্রে ব্যাকগ্রাউন্ড ছবিটিকে এমনভাবে উপস্থাপণ করতে হবে, যাতে ইনপুট ফিল্ডের পাশে আইকন উপস্থাপিত হবার জন্য যথেষ্ঠ জায়গা থাকে।


Code Example

input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    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;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Animated Search ইনপুট

এই উদাহরণে CSS3 transition property ব্যবহার করে ইনপুট ইলামেন্টের প্রস্থকে এনিমেট করা হলো। transition property সম্পর্কে বিস্তারিত পরবর্তী চ্যাপ্টারে বর্ণনা করা হবে।


Code Example

input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    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%;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Textarea -কে স্টাইল করার পদ্ধতি

টিপস: resize property ব্যবহার করে textarea এর রিসাইজ হওয়া না হওয়া আচরণকে নিয়ন্ত্রণ করা যায়।

Code Example

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Select Menu স্টাইল করার পদ্ধতি

Code Example

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Input Button স্টাইল করার পদ্ধতি


Code Example

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;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS ব্যবহার করে কিভাবে আরও নানারকম বাটন ডিজাইন করা যায়, তা জানার জন্য CSS Buttons Tutorial দেখুন।