সিএসএস ফর্ম - css form



সিএসএস ব্যবহার করে কোন এইচটিএমএল ফর্মকে খুব সুন্দর ভাবে সাজানো যায়। নিচে একটি এইচটিএমএল ফর্মটি দেখুন, এখানে সিএসএস দিয়ে একটি এইচটিএমএল ফর্ম সাজানো হয়েছে।


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

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

উদাহরণ

input {
width: 100%;
}


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

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


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

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

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

উদাহরণ

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


ওপরের উদাহরণে box-sizing প্রোপার্টির মান border-box নির্ধারণ করা হয়েছে। এর জন্যই এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।


ফিল্ডে বর্ডার যুক্ত করা

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

উদাহরণ

input[type=text] {
border: 3px solid teal;
border-radius: 5px;
}


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

উদাহরণ

input[type=text] {
border: none;
border-bottom: 3px solid teal;
}




ফিল্ডে রঙ যুক্ত করা

ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড রঙ্গিন করার জন্য background-color প্রোপার্টি এবং টেক্সটের রঙ পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়। নিচে এর উদাহরণ দেখুন।

উদাহরণ

input[type=text] {
background-color: #3CBC8D;
color: white;
}




ফিল্ডকে ফোকাস করা

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

উদাহরণ

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




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

ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণ লক্ষ্য করলে দেখা যাবে আইকনের বামপাশে যথার্থ স্থান বা space রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করতে পারি।

উদাহরণ

input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}




এনিমেশন যুক্ত করা

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

উদাহরণ

input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}




টেক্সট এরিয়া স্টাইলিং

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

উদাহরণ

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









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.