Pure.CSS একটি সিম্পল এবং লাইটওয়েট CSS ফ্রেমওয়ার্ক যা আপনাকে দ্রুত এবং কার্যকরী ফর্ম লেআউট তৈরি করতে সহায়তা করে। Pure.CSS এর মাধ্যমে আপনি simple এবং complex ফর্ম লেআউট তৈরি করতে পারেন, যা মোবাইল এবং ডেস্কটপ ব্রাউজারে সুন্দরভাবে কাজ করবে। এখানে আমরা simple এবং complex ফর্ম লেআউট তৈরি করার জন্য কিছু উদাহরণ দেখবো।
১. Simple Form Layout
একটি সিম্পল ফর্ম লেআউট তৈরি করা খুবই সহজ, যেখানে আপনি প্রয়োজনীয় ইনপুট ফিল্ড, বাটন এবং লেবেলগুলির জন্য Pure.CSS এর বিল্ট-ইন ক্লাস ব্যবহার করবেন। এই ধরনের ফর্ম সাধারণত ছোট ফর্ম অ্যাপ্লিকেশন বা কন্ট্যাক্ট ফর্মের জন্য ব্যবহৃত হয়।
উদাহরণ: Simple Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.form-container {
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form class="pure-form">
<fieldset>
<label for="name">Name</label>
<input id="name" type="text" class="pure-input-1-2" placeholder="Enter your name">
<label for="email">Email</label>
<input id="email" type="email" class="pure-input-1-2" placeholder="Enter your email">
<label for="message">Message</label>
<textarea id="message" class="pure-input-1-2" placeholder="Your message" rows="4"></textarea>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-form: Pure.CSS এর ক্লাস যা ফর্মকে সঠিকভাবে স্টাইলিং করে।
- pure-input-1-2: এই ক্লাসটি ইনপুট ফিল্ডের প্রস্থ ৫০% নির্ধারণ করে।
- pure-button এবং pure-button-primary: বাটন স্টাইলিং জন্য ব্যবহৃত হয়, যেখানে primary ক্লাসটি বাটনটিকে প্রাথমিক রঙ প্রদান করে।
এই ফর্মটি একটি সিম্পল কন্ট্যাক্ট ফর্মের জন্য উপযুক্ত, যেখানে ব্যবহারকারী তাদের নাম, ইমেল এবং বার্তা প্রদান করতে পারে।
২. Complex Form Layout
একটি কমপ্লেক্স ফর্ম সাধারণত বেশি ইনপুট ফিল্ড এবং আরো অনেক ইন্টারঅ্যাকটিভ কম্পোনেন্ট, যেমন চেকবক্স, রেডিও বাটন, সিলেক্ট অপশন এবং ডেটা পিকার অন্তর্ভুক্ত করে। Pure.CSS এর মাধ্যমে আপনি সহজেই একটি পূর্ণাঙ্গ কমপ্লেক্স ফর্ম তৈরি করতে পারেন।
উদাহরণ: Complex Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Form Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.form-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Registration Form</h2>
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="first-name">First Name</label>
<input id="first-name" type="text" class="pure-input-1-2" placeholder="First Name">
</div>
<div class="pure-control-group">
<label for="last-name">Last Name</label>
<input id="last-name" type="text" class="pure-input-1-2" placeholder="Last Name">
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" class="pure-input-1-2" placeholder="Email">
</div>
<div class="pure-control-group">
<label for="gender">Gender</label>
<select id="gender" class="pure-input-1-2">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="pure-control-group">
<label for="dob">Date of Birth</label>
<input id="dob" type="date" class="pure-input-1-2">
</div>
<div class="pure-control-group">
<label for="newsletter">Subscribe to Newsletter</label>
<input id="newsletter" type="checkbox"> Yes
</div>
<div class="pure-control-group">
<label>Terms and Conditions</label>
<label for="agree-terms">
<input id="agree-terms" type="radio" name="terms" checked> I agree
</label>
<label for="disagree-terms">
<input id="disagree-terms" type="radio" name="terms"> I disagree
</label>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-form-aligned: এই ক্লাসটি ফর্ম এলিমেন্টগুলোকে সঠিকভাবে অ্যালাইন করে।
- pure-control-group: এটি প্রতিটি ইনপুট ফিল্ড এবং লেবেলের মধ্যে একটি সুন্দর স্পেস তৈরি করে, যার মাধ্যমে ফর্ম এলিমেন্টগুলোর মধ্যে পর্যাপ্ত মার্জিন থাকে।
- pure-input-1-2: এটি ইনপুট ফিল্ডগুলির প্রস্থ ৫০% নির্ধারণ করে।
- Checkbox এবং Radio Button: ফর্মে চেকবক্স এবং রেডিও বাটন যুক্ত করা হয়েছে।
এই কমপ্লেক্স ফর্মে একটি রেজিস্ট্রেশন ফর্মের জন্য বিভিন্ন ইনপুট ফিল্ড, সিলেক্ট অপশন, ডেটা পিকার, চেকবক্স এবং রেডিও বাটন অন্তর্ভুক্ত করা হয়েছে।
৩. কাস্টমাইজেশন এবং স্টাইলিং:
Pure.CSS আপনাকে কাস্টমাইজেশন এবং স্টাইলিংয়ের জন্য বিভিন্ন উপায় প্রদান করে। আপনি ক্লাসগুলির মাধ্যমে প্রস্থ, মার্জিন, প্যাডিং, ফন্ট সাইজ এবং অন্যান্য CSS বৈশিষ্ট্য পরিবর্তন করতে পারেন।
উদাহরণ:
.pure-input-1-2 {
border: 2px solid #4CAF50; /* Custom Border */
padding: 10px; /* Add padding */
}
এটি আপনার ইনপুট ফিল্ডের বর্ডার কালার এবং প্যাডিং পরিবর্তন করবে।
Pure.CSS ব্যবহার করে Simple এবং Complex Form Layouts তৈরি করা খুবই সহজ এবং কার্যকরী। এটি আপনাকে দ্রুত এবং প্রফেশনাল লেআউট তৈরি করতে সহায়তা করে, এবং আপনি সহজে এটি কাস্টমাইজ করে নিজের প্রয়োজন অনুযায়ী স্টাইলিং করতে পারেন। Pure.CSS এর ছোট আকার এবং সহজ ব্যবহারের মাধ্যমে আপনি মোবাইল-ফার্স্ট, রেসপন্সিভ এবং স্টাইলিশ ফর্ম তৈরি করতে পারবেন।
Read more
