Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টের জন্য প্রয়োজনীয় প্রি-বিল্ট স্টাইল এবং ফিচার প্রদান করে। ফর্ম উপাদানগুলির কাস্টমাইজেশন এবং ভ্যালিডেশন, যেগুলি ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে ব্যবহারকারীর ইনপুট সংগ্রহ করার জন্য গুরুত্বপূর্ণ, সেগুলির জন্য Pure.CSS এর বেশ কিছু স্টাইল এবং পদ্ধতি রয়েছে।
এখানে Form Elements এর Customization এবং Validation নিয়ে বিস্তারিত আলোচনা করা হলো।
১. Form Elements এর Customization:
Pure.CSS আপনাকে ফর্ম উপাদানগুলি যেমন ইনপুট ফিল্ড, চেকবক্স, রেডিও বাটন, ড্রপডাউন, টেক্সট এরিয়া ইত্যাদি কাস্টমাইজ করার জন্য সরল এবং কার্যকরী পদ্ধতি প্রদান করে। নিচে কিছু সাধারণ ফর্ম উপাদান কাস্টমাইজ করার উদাহরণ দেওয়া হলো।
a) Custom Input Fields:
ইনপুট ফিল্ডগুলির জন্য Pure.CSS এর pure-input-* ক্লাস ব্যবহার করা হয়, যেখানে আপনি প্রস্থ এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Input Field</title>
<style>
.custom-input {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
width: 100%;
}
</style>
</head>
<body>
<div class="pure-form">
<label for="username">Username</label>
<input id="username" type="text" class="custom-input" placeholder="Enter username">
</div>
</body>
</html>
এখানে, custom-input ক্লাসের মাধ্যমে ইনপুট ফিল্ডের প্যাডিং, ব্যাকগ্রাউন্ড কালার, বর্ডার রেডিয়াস ইত্যাদি কাস্টমাইজ করা হয়েছে।
b) Custom Radio Buttons:
Pure.CSS দিয়ে কাস্টম রেডিও বাটন তৈরি করতে pure-radio ক্লাস ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Radio Buttons</title>
<style>
.custom-radio {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="pure-form">
<label class="custom-radio">
<input type="radio" name="gender" class="pure-radio"> Male
</label>
<label class="custom-radio">
<input type="radio" name="gender" class="pure-radio"> Female
</label>
</div>
</body>
</html>
c) Custom Checkboxes:
Pure.CSS এর pure-checkbox ক্লাস ব্যবহার করে কাস্টম চেকবক্স তৈরি করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Checkboxes</title>
<style>
.custom-checkbox {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="pure-form">
<label class="custom-checkbox">
<input type="checkbox" class="pure-checkbox"> Accept Terms and Conditions
</label>
</div>
</body>
</html>
২. Responsive Form Design:
Pure.CSS রেসপন্সিভ ফর্ম ডিজাইনের জন্য একটি শক্তিশালী স্টাইল প্রদান করে, যা আপনার ফর্ম উপাদানগুলিকে বিভিন্ন স্ক্রীন সাইজের জন্য স্বয়ংক্রিয়ভাবে মানিয়ে নিতে সাহায্য করে। নিচে একটি রেসপন্সিভ ফর্মের উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Responsive Form Design</title>
<style>
.pure-form .pure-input-1-2 {
width: 100%; /* Default full width */
}
@media (min-width: 600px) {
.pure-form .pure-input-1-2 {
width: 48%; /* For screens 600px or larger */
}
}
</style>
</head>
<body>
<div class="pure-form">
<label for="first-name">First Name</label>
<input id="first-name" type="text" class="pure-input-1-2" placeholder="Your First Name">
<label for="last-name">Last Name</label>
<input id="last-name" type="text" class="pure-input-1-2" placeholder="Your Last Name">
</div>
</body>
</html>
এখানে pure-input-1-2 ক্লাস ব্যবহার করে ইনপুট ফিল্ডের প্রস্থ কাস্টমাইজ করা হয়েছে। মিডিয়া কুয়েরি ব্যবহার করে এটি ছোট স্ক্রীনে পুরো প্রস্থ নেয় এবং বড় স্ক্রীনে দুটি ইনপুট ফিল্ডকে এক লাইনে সাজায়।
৩. Form Validation:
ফর্মে ইনপুট ভ্যালিডেশন খুবই গুরুত্বপূর্ণ। Pure.CSS সরাসরি ভ্যালিডেশন স্টাইল প্রদান না করলেও, আপনি সাধারণ HTML5 ভ্যালিডেশন ফিচার ব্যবহার করে সহজেই ফর্ম ভ্যালিডেশন করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:
a) HTML5 Form Validation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Form Validation Example</title>
</head>
<body>
<div class="pure-form pure-form-stacked">
<form action="#" method="POST">
<label for="email">Email</label>
<input id="email" type="email" class="pure-input-1-2" placeholder="Enter your email" required>
<label for="password">Password</label>
<input id="password" type="password" class="pure-input-1-2" placeholder="Enter your password" required minlength="8">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
এখানে HTML5 এর required এবং minlength অ্যাট্রিবিউট ব্যবহার করে ইনপুট ভ্যালিডেশন করা হয়েছে। যদি ব্যবহারকারী ইমেল বা পাসওয়ার্ড ফিল্ড খালি রেখে সাবমিট করার চেষ্টা করেন, তবে ব্রাউজার অটোমেটিকালি একটি ভুল বার্তা দেখাবে।
b) Custom Error Messages:
আপনি JavaScript ব্যবহার করে কাস্টম ভ্যালিডেশন মেসেজও দেখাতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Validation</title>
<script>
function validateForm() {
var email = document.getElementById("email").value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
</script>
</head>
<body>
<div class="pure-form">
<form onsubmit="return validateForm()">
<label for="email">Email</label>
<input id="email" type="email" class="pure-input-1-2" placeholder="Enter your email">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
এখানে JavaScript ব্যবহার করে একটি কাস্টম ভ্যালিডেশন ফাংশন তৈরি করা হয়েছে যা ফর্ম সাবমিট হওয়ার আগে ইমেল ফিল্ডের মান চেক করবে।
Pure.CSS ব্যবহার করে আপনি ফর্ম উপাদানগুলির কাস্টমাইজেশন এবং ভ্যালিডেশন খুব সহজে করতে পারেন। এটি প্রি-বিল্ট স্টাইল এবং সহজ HTML5 ভ্যালিডেশন সমর্থন করে, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং কার্যকরী সমাধান প্রদান করে।
Read more
