CSS ফর্ম
- পূর্ববর্তী পৃষ্ঠা CSS এট্রিবিউট সিলেক্টর
- পরবর্তী পৃষ্ঠা CSS কাউন্টার
CSS-এর মাধ্যমে, HTML ফর্মের দৃশ্য অনেকটাই উন্নত করা যায় :
ইনপুট ফিল্ডের শৈলী সেট করুন
ব্যবহার করুন width প্রতিশব্দটি ইনপুট ফিল্ডের প্রস্থত্ব নির্ধারণ করে :
প্রযুক্তি
input {
width: 100%;
}
এই উদাহরণটি সকল <input> ইলেকট্রনিক ব্যবহার করে।যদি শুধুমাত্র নির্দিষ্ট ইনপুট ইলেকট্রনিকের শৈলী সেট করতে হয়, তবে এই প্রতিশব্দটি ব্যবহার করা যেতে পারে :
input[type=text]- শুধুমাত্র টেক্সট ফিল্ডকে বাছাই করতেinput[type=password]- শুধুমাত্র পাসওয়ার্ড ফিল্ডকে বাছাই করতেinput[type=number]- শুধুমাত্র সংখ্যা ফিল্ডকে বাছাই করতে- ইত্যাদি...
পটভূমি রঙ
ব্যবহার করুন padding প্রতিশব্দটি টেক্সট ফিল্ডের ভিতরে জাগাই যোগ করে
টীকা:যদি অনেক ইনপুট থাকে, তবে আপনি মার্জিন যোগ করতে পারেন, যাতে তাদের চারপাশে আরও জাগাই থাকে :
প্রযুক্তি
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
মনে রাখুন box-sizing প্রতিশব্দটি সেট করা হয় : border-boxএটি তালিকাটি যাতে নিচের সময়ের জন্য সুবিধাজনক হয়,
অনুগ্রহ করে CSS Box Sizing এই চাপটিতে box-sizing প্রতিশব্দটির বিষয়ে বিস্তারিত জানতে
কিনারা যোগকৃত ইনপুট বাক্স
অনুগ্রহ করে border প্রতিশব্দটি কিনারার গঠন এবং রঙকে পরিবর্তন করে, এবং border-radius প্রতিশব্দটির মাধ্যমে গোলাকার আঙ্গুল যোগ করতে হবে :
প্রযুক্তি
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
যদি শুধুমাত্র নিচের কিনারা যোগ করতে হয়, তবে border-bottom প্রতিশব্দ :
প্রযুক্তি
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
কালো ইনপুট বাক্স
অনুগ্রহ করে background-color প্রতিশব্দটি ইনপুটকে পটভূমি রঙ যোগ করে, এবং color এটি টেক্সট রঙকে পরিবর্তন করতে এই প্রতিশব্দ :
প্রযুক্তি
input[type=text] {
background-color: #3CBC8D;
color: white;
}
ফোকাস হওয়ার ইনপুট বাক্স
ডিফল্টভাবে, কিছু ব্রাউজার ফোকাস হওয়ার সময় (ক্লিক করা হলে) ইনপুট বাক্স চারপাশে নীল কিনারা যোগ করে : outline: none; এই আচরণকে নিরস্ত করতে。
ব্যবহার করুন :focus ইনপুট ফিল্ডের ফোকাস হওয়ার সময় সেট করা যায় শৈলী :
উদাহরণ 1
input[type=text]:focus {
background-color: lightblue;
}
লিখিত বাক্সে ক্লিক করুন:
উদাহরণ 2
input[type=text]:focus {
border: 3px solid #555;
}
লিখিত বাক্সে ক্লিক করুন:
আইকন/চিত্র সহযোগী ইনপুট বাক্স
যদি ইনপুট বাক্সে আইকন অন্তর্ভুক্ত করতে চান background-image প্রযুক্তির সঙ্গে background-position প্রযুক্তি এবং একসঙ্গে সংজ্ঞায়িত করুন
প্রযুক্তি
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
একটি এনাইমেশন সহযোগী সার্চ ইনপুট
এই উদাহরণে transition প্রযুক্তির জ্ঞান সংগ্রহ করুন CSS ট্রান্সিশন এই চাপের একটি শিক্ষাদলিলে transition প্রযুক্তির জ্ঞান
প্রযুক্তি
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
টেক্সট এরিয়ার শৈলী সংজ্ঞায়িত করুন
টীকা:ব্যবহার করুন 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;
}
সিলেক্ট মেনুর শৈলী সংজ্ঞায়িত করুন
প্রযুক্তি
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
ইনপুট বাটনের শৈলী সংজ্ঞায়িত করুন
প্রযুক্তি
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;
}
/* সূচনা: width: 100% ব্যবহার করে সম্পূর্ণ পথদৈর্ঘ্য বাটন */
CSS বাটন স্টাইল সেটিং করার বিষয়ে আরও বেশি জানতে, আমাদের CSS বাটন শিক্ষাক্রম
রেসপনসিভ মেনু
TIY এডিটর উইন্ডোর মাপ সংযোজন করেন এফেক্ট দেখুন।স্ক্রিনের প্রস্থ কমবেই 600 পিক্সেল হলে, দুই কলামকে সময়ের বদলে উপর-নীচে স্থানান্তরিত করুন না ডান-বামে স্থানান্তরিত করুন。
অত্যাধুনিক: আগামী উদাহরণগুলিতে মিডিয়া কোরিউলেশন রেসপনসিভ ফর্ম তৈরি করতে আসুন।পরবর্তী চাপে, আপনি আরও বেশি জানবেন。
- পূর্ববর্তী পৃষ্ঠা CSS এট্রিবিউট সিলেক্টর
- পরবর্তী পৃষ্ঠা CSS কাউন্টার
