Pure.CSS ব্যবহার করে Inline Forms এবং Stacked Forms তৈরি করা খুবই সহজ এবং কার্যকরী। Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা সিম্পল এবং রেসপনসিভ ওয়েব ফর্ম ডিজাইন তৈরি করতে সাহায্য করে। এখানে আমরা দেখবো কিভাবে Inline Forms এবং Stacked Forms তৈরি করা যায় Pure.CSS ব্যবহার করে।
1. Inline Forms with Pure.CSS
Inline Forms হল সেই ফর্ম যেখানে সমস্ত ফর্ম উপাদান (যেমন ইনপুট ফিল্ড, বাটন) এক লাইনে রাখা হয়, অর্থাৎ এগুলোর মধ্যে কোনো নতুন লাইন তৈরি হয় না। এই ধরনের ফর্ম সাধারণত ছোট স্ক্রীন সাইজে (যেমন ডেস্কটপে) ব্যবহার করা হয়, যেখানে ফর্ম উপাদানগুলো এক সাথে প্রদর্শিত হয়।
Inline Form Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Form with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Inline Form Styles */
.inline-form input,
.inline-form button {
display: inline-block;
margin: 5px;
}
</style>
</head>
<body>
<form class="pure-form pure-form-aligned inline-form">
<fieldset>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
.pure-form-aligned: Pure.CSS এরpure-form-alignedক্লাস ফর্মের উপাদানগুলোকে সুন্দরভাবে সাজানোর জন্য ব্যবহৃত হয়।.inline-form input, .inline-form button:display: inline-blockপ্রপার্টি ব্যবহার করে ফর্মের ইনপুট ফিল্ড এবং বাটনগুলোকে এক লাইনে সাজানো হয়েছে।margin: 5px;ব্যবহার করে ফর্ম উপাদানগুলোর মধ্যে কিছু মার্জিন দেওয়া হয়েছে।pure-buttonএবংpure-button-primary: Pure.CSS এর বাটন স্টাইলিং ক্লাস, যা সিম্পল এবং মিনিমাল ডিজাইন প্রদান করে।
এই ফর্মটি একটি সোজা ও সরল ইনলাইন ফর্ম যা ছোট স্ক্রীনে (যেমন ডেস্কটপ বা ট্যাবলেট) সুন্দরভাবে কাজ করবে।
2. Stacked Forms with Pure.CSS
Stacked Forms হল এমন ফর্ম যেখানে প্রতিটি ফর্ম উপাদান (যেমন ইনপুট ফিল্ড, বাটন) নতুন লাইনে থাকে। এটি মোবাইল বা ছোট স্ক্রীনের জন্য আদর্শ, যেখানে সমস্ত ফর্ম উপাদানকে একে একে সোজা (stacked) রাখা হয়।
Stacked Form Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked Form with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Stacked Form Styles */
.stacked-form input,
.stacked-form button {
display: block;
width: 100%;
margin: 5px 0;
}
</style>
</head>
<body>
<form class="pure-form pure-form-stacked stacked-form">
<fieldset>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
.pure-form-stacked: Pure.CSS এরpure-form-stackedক্লাস ফর্মের উপাদানগুলোকে সোজা (stacked) লাইনে সাজানোর জন্য ব্যবহৃত হয়। এটি ফর্ম উপাদানগুলিকে একে একে সোজা লাইনে রেখে ব্যবহারকারীদের জন্য পরিষ্কারভাবে প্রদর্শন করে।.stacked-form input, .stacked-form button:display: blockব্যবহার করে ইনপুট ফিল্ড এবং বাটনকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করা হয়েছে, যার ফলে প্রতিটি উপাদান নতুন লাইনে চলে যাবে।width: 100%ব্যবহার করে নিশ্চিত করা হয়েছে যে প্রতিটি উপাদান পুরো প্রস্থ ব্যবহার করবে।pure-buttonএবংpure-button-primary: Pure.CSS এর ক্লাস যা বাটন স্টাইলিংয়ের জন্য ব্যবহৃত হয়।
এটি একটি স্ট্যাকড ফর্ম, যা সাধারণত মোবাইল বা ছোট স্ক্রীনে ব্যবহার করা হয় যেখানে প্রতিটি ইনপুট ফিল্ড ও বাটন পৃথক লাইনে থাকে।
3. Responsive Form Design Using Pure.CSS
এখানে আমরা Inline Form এবং Stacked Form এর একটি রেসপনসিভ সংস্করণ তৈরি করবো যা স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Form with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Form Styles */
.responsive-form {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* Inline Form for Large Screens */
@media (min-width: 600px) {
.responsive-form .pure-form input,
.responsive-form .pure-form button {
display: inline-block;
width: auto;
margin: 5px;
}
}
/* Stacked Form for Small Screens */
@media (max-width: 599px) {
.responsive-form .pure-form input,
.responsive-form .pure-form button {
display: block;
width: 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<form class="pure-form responsive-form">
<fieldset>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
- Responsive Design: এখানে, আমরা
@mediaকুয়েরি ব্যবহার করে ফর্মটি বড় স্ক্রীনে ইনলাইন (Horizontal) এবং ছোট স্ক্রীনে স্ট্যাকড (Vertical) হিসাবে প্রদর্শন করেছি।- যখন স্ক্রীনের প্রস্থ 600px বা তার বেশি হবে, তখন ফর্ম উপাদানগুলো এক লাইনে (Inline) থাকবে।
- যখন স্ক্রীনের প্রস্থ 599px বা কম হবে, তখন ফর্ম উপাদানগুলো সোজা লাইনে (Stacked) থাকবে।
max-width: 600px;: ফর্মটি সর্বোচ্চ 600px প্রস্থে সীমাবদ্ধ থাকবে, যা ছোট স্ক্রীনে প্রভাবিত করবে না, তবে বড় স্ক্রীনে এটি কেবল মাঝখানে থাকবে।
এটি একটি রেসপনসিভ ফর্ম ডিজাইন যা মোবাইল এবং ডেস্কটপ উভয় স্ক্রীনে উপযুক্তভাবে কাজ করবে।
Pure.CSS দিয়ে Inline Forms এবং Stacked Forms তৈরি করা সহজ এবং দ্রুত। আপনি CSS এর display, width, এবং margin প্রপার্টি ব্যবহার করে এই ফর্মগুলো কাস্টমাইজ করতে পারেন। এছাড়া, @media কুয়েরি ব্যবহার করে মোবাইল এবং ডেস্কটপ স্ক্রীনের জন্য রেসপনসিভ ফর্ম তৈরি করা সম্ভব। Pure.CSS এর মাধ্যমে, আপনি সহজে রেসপনসিভ, মিনিমাল এবং সুন্দর ফর্ম ডিজাইন করতে পারবেন যা ওয়েব পেজের ইন্টারফেসকে আরও ইউজার-ফ্রেন্ডলি করে তোলে।
Read more
