Pure.CSS একটি হালকা ও মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টের জন্য বিভিন্ন উপাদান এবং স্টাইল প্রদান করে। এর মধ্যে ফর্মস এবং ইনপুট এলিমেন্টগুলির জন্যও প্রি-বিল্ট স্টাইল রয়েছে, যা ওয়েব পেজের ডিজাইনকে সুন্দর এবং সুশৃঙ্খল করে তোলে।
এখানে Pure.CSS দিয়ে ফর্ম এবং ইনপুট এলিমেন্টগুলো কিভাবে তৈরি করা যায় তা নিয়ে বিস্তারিত আলোচনা করা হলো।
১. Pure.CSS দিয়ে ফর্ম তৈরি:
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>Form Example with Pure.CSS</title>
</head>
<body>
<div class="pure-form">
<form>
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your Name">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Your Email">
<label for="message">Message</label>
<textarea id="message" placeholder="Your Message"></textarea>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
pure-form: Pure.CSS এর একটি স্টাইল যা ফর্মের লেআউট এবং বিন্যাস নিয়ন্ত্রণ করে।fieldset: এটি ফর্মের এলিমেন্টগুলোকে একটি গ্রুপে রাখে এবং একটি বর্ডার প্রদান করে।legend: এটি ফর্মের শিরোনাম বা ট্যাগলাইন হিসেবে ব্যবহৃত হয়।pure-buttonওpure-button-primary: এই ক্লাসগুলি Pure.CSS এর বাটন স্টাইল যোগ করে, যেখানেpure-button-primaryবাটনটির জন্য একটি প্রাধান্যপূর্ণ রঙ প্রয়োগ করে।
২. Pure.CSS দিয়ে ইনপুট এলিমেন্টস:
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>Input Elements with Pure.CSS</title>
</head>
<body>
<div class="pure-form">
<form>
<label for="username">Username:</label>
<input id="username" type="text" class="pure-input-1-2" placeholder="Enter username">
<br><br>
<label for="password">Password:</label>
<input id="password" type="password" class="pure-input-1-2" placeholder="Enter password">
<br><br>
<label for="email">Email:</label>
<input id="email" type="email" class="pure-input-1-2" placeholder="Enter email">
<br><br>
<label for="age">Age:</label>
<input id="age" type="number" class="pure-input-1-2" placeholder="Enter your age">
<br><br>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
pure-input-1-2: এই ক্লাসটি ইনপুট এলিমেন্টকে 50% প্রস্থে তৈরি করে।pure-input-1-3,pure-input-1-4, ইত্যাদি: এই ক্লাসগুলির মাধ্যমে ইনপুট এলিমেন্টের প্রস্থ নিয়ন্ত্রণ করা যেতে পারে।
৩. Pure.CSS দিয়ে চেকবক্স এবং রেডিও বাটন:
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>Checkbox and Radio Buttons</title>
</head>
<body>
<div class="pure-form">
<form>
<label>
<input type="checkbox" class="pure-checkbox"> Accept Terms and Conditions
</label>
<br><br>
<label>
<input type="radio" name="gender" class="pure-radio"> Male
</label>
<br>
<label>
<input type="radio" name="gender" class="pure-radio"> Female
</label>
<br><br>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
pure-checkbox: চেকবক্সের জন্য Pure.CSS এর প্রি-বিল্ট স্টাইল।pure-radio: রেডিও বাটনের জন্য Pure.CSS এর প্রি-বিল্ট স্টাইল।
৪. Select Dropdown:
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>Select Dropdown Example</title>
</head>
<body>
<div class="pure-form">
<form>
<label for="country">Country:</label>
<select id="country" class="pure-input-1-2">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="gb">United Kingdom</option>
<option value="au">Australia</option>
</select>
<br><br>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
Pure.CSS ফ্রেমওয়ার্কটি ফর্ম এবং ইনপুট এলিমেন্টগুলির জন্য চমৎকার স্টাইল প্রদান করে যা ওয়েব পেজের ডিজাইনকে আরো সুন্দর এবং ব্যবহারে সহজ করে তোলে। এটি প্রি-বিল্ট সিএসএস ক্লাসগুলি ব্যবহার করে ইনপুট ফিল্ড, বাটন, চেকবক্স, রেডিও বাটন, এবং সিলেক্ট ড্রপডাউনগুলোর স্টাইলিং করতে সাহায্য করে, যার ফলে ডেভেলপমেন্টের সময় কমে যায় এবং কোড আরো পরিষ্কার এবং কার্যকরী হয়।
Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ফর্ম উপাদানগুলোকে সহজেই সুন্দর এবং কার্যকরী করে তোলে। এটি খুবই সিম্পল এবং কাস্টমাইজেবল স্টাইল সরবরাহ করে, যা আপনার ওয়েবসাইটের ফর্ম এলিমেন্টগুলোকে সুন্দরভাবে ডিজাইন করতে সাহায্য করে। এখানে Pure.CSS দিয়ে ফর্ম উপাদানগুলো তৈরি এবং স্টাইল করার কিছু উপায় আলোচনা করা হলো।
1. Pure.CSS এর Form Elements (ফর্ম এলিমেন্টস)
Pure.CSS ফর্ম উপাদানগুলির জন্য বিভিন্ন pre-defined CSS classes সরবরাহ করে, যেগুলি ব্যবহার করে আপনি সহজেই ফর্ম তৈরির জন্য সঠিক স্টাইলিং প্রাপ্ত করতে পারেন। এর মধ্যে বাটন, ইনপুট ফিল্ড, চেকবক্স, রেডিও বাটন, টেক্সট এরিয়া, সিলেক্ট বক্স ইত্যাদি স্টাইল করা সহজ।
2. ফর্ম তৈরি করা
Pure.CSS এর মাধ্যমে সহজেই ফর্ম এলিমেন্ট তৈরি করা যায়। এখানে একটি সাধারণ ফর্ম উদাহরণ দেওয়া হলো, যেখানে ইনপুট ফিল্ড, বাটন, এবং সিলেক্ট বক্স রয়েছে।
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<form class="pure-form">
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your name" class="pure-input-1-2">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Your email" class="pure-input-1-2">
<label for="message">Message</label>
<textarea id="message" placeholder="Your message" class="pure-input-1-2"></textarea>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
এখানে:
pure-formক্লাস ফর্মের ডিফল্ট স্টাইলিং যোগ করে।pure-input-1-2ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করে।pure-button pure-button-primaryক্লাস ব্যবহার করে বাটনের জন্য প্রি-ডিফাইনড স্টাইলিং এবং প্রাইমারি কালার প্রদান করা হয়।
3. Form Input Fields (ইনপুট ফিল্ডস)
Pure.CSS ইনপুট ফিল্ডের জন্য কিছু স্টাইল সরবরাহ করে যা খুবই সহজ এবং সুন্দর। এটি সাধারণ ইনপুট ফিল্ডগুলিকে সুন্দরভাবে সাজানোর জন্য কয়েকটি ক্লাস ব্যবহার করতে সহায়তা করে।
উদাহরণ:
<label for="name">Name</label>
<input id="name" type="text" placeholder="Enter your name" class="pure-input-1-2">
এখানে pure-input-1-2 ক্লাস ইনপুট ফিল্ডের প্রস্থ ৫০% করে দেয় (অথবা আপনি প্রস্থ কাস্টমাইজ করতে পারেন)। আপনি আরও ক্লাস ব্যবহার করে এই ইনপুট ফিল্ডে স্টাইলিং যোগ করতে পারেন, যেমন:
pure-input-rounded: ইনপুট ফিল্ডের কোণার রেডিয়াস যোগ করতে।pure-input-wide: ইনপুট ফিল্ডকে ১০০% প্রস্থ দিয়ে সাজাতে।
উদাহরণ:
<input type="text" class="pure-input-wide" placeholder="Wide Input Field">
<input type="text" class="pure-input-rounded" placeholder="Rounded Input Field">
4. Buttons (বাটনস)
Pure.CSS তে বিভিন্ন ধরনের বাটনের স্টাইল রয়েছে। আপনি pure-button ক্লাস দিয়ে বেসিক বাটন তৈরি করতে পারেন এবং pure-button-primary বা pure-button-secondary এর মতো ক্লাস দিয়ে বাটনের ধরন কাস্টমাইজ করতে পারেন।
উদাহরণ:
<button type="submit" class="pure-button pure-button-primary">Submit</button>
<button type="reset" class="pure-button pure-button-secondary">Reset</button>
এখানে:
pure-button-primary: এটি প্রাইমারি বাটনের জন্য একটি স্টাইল প্রদান করবে (যেমন, ব্লু বা অন্য কোনো প্রাইমারি কালার)।pure-button-secondary: এটি সেকেন্ডারি বাটনের জন্য স্টাইল প্রদান করবে (যেমন, গ্রে বা অন্য কোনো সেকেন্ডারি কালার)।
5. Checkboxes (চেকবক্স)
Pure.CSS চেকবক্সের জন্য প্রি-ডিফাইনড স্টাইল সরবরাহ করে। আপনি সাধারণ চেকবক্সটি খুব সহজেই তৈরি করতে পারেন এবং সেটি সুন্দরভাবে দেখাবে।
উদাহরণ:
<label for="checkbox1">
<input type="checkbox" id="checkbox1" class="pure-checkbox">
I agree to the terms and conditions
</label>
এখানে pure-checkbox ক্লাস ব্যবহার করা হয়েছে, যা চেকবক্সকে একটি সুন্দর স্টাইল প্রদান করবে।
6. Radio Buttons (রেডিও বাটনস)
রেডিও বাটনও একইভাবে চেকবক্সের মতো স্টাইল করা যায়। Pure.CSS-এ রেডিও বাটনের জন্য pure-radio ক্লাস রয়েছে।
উদাহরণ:
<label for="radio1">
<input type="radio" id="radio1" name="gender" class="pure-radio">
Male
</label>
<label for="radio2">
<input type="radio" id="radio2" name="gender" class="pure-radio">
Female
</label>
এখানে pure-radio ক্লাস রেডিও বাটনগুলোকে সুন্দরভাবে স্টাইল করে।
7. Select Box (সিলেক্ট বক্স)
Pure.CSS এর মাধ্যমে সিলেক্ট বক্স বা ড্রপডাউন মেনুর জন্যও প্রি-ডিফাইনড স্টাইল রয়েছে। এটি একটি সুন্দর এবং সহজ সিলেক্ট বক্স তৈরি করতে সহায়তা করে।
উদাহরণ:
<label for="country">Country</label>
<select id="country" class="pure-input-1-2">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
এখানে pure-input-1-2 ক্লাস ব্যবহার করা হয়েছে যা সিলেক্ট বক্সের প্রস্থ ৫০% করবে, তবে আপনি প্রস্থ কাস্টমাইজও করতে পারেন।
8. Textarea (টেক্সট এরিয়া)
Pure.CSS দিয়ে টেক্সট এরিয়া তৈরি করার জন্যও প্রি-ডিফাইনড ক্লাস রয়েছে, যা টেক্সট এরিয়াকে সুন্দরভাবে সাজাতে সাহায্য করে।
উদাহরণ:
<label for="message">Message</label>
<textarea id="message" class="pure-input-1-2" placeholder="Enter your message"></textarea>
এখানে pure-input-1-2 ক্লাস ব্যবহার করা হয়েছে, যা টেক্সট এরিয়ার প্রস্থ ৫০% রাখবে।
9. Form Styling with Grid System (ফর্ম স্টাইলিং গ্রিড সিস্টেমের মাধ্যমে)
Pure.CSS-এর গ্রিড সিস্টেম ব্যবহার করে আপনি ফর্ম উপাদানগুলিকে আরও ভালোভাবে লেআউট করতে পারেন। গ্রিড সিস্টেমের মাধ্যমে ফর্মের উপাদানগুলি রেসপন্সিভভাবে সাজানো যাবে।
উদাহরণ:
<div class="pure-g">
<div class="pure-u-1-2">
<label for="name">Name</label>
<input id="name" type="text" class="pure-input-1-2">
</div>
<div class="pure-u-1-2">
<label for="email">Email</label>
<input id="email" type="email" class="pure-input-1-2">
</div>
<div class="pure-u-1">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</div>
এখানে, pure-g ক্লাস গ্রিড কনটেইনার তৈরি করে এবং pure-u-1-2 ক্লাস ফর্মের ইনপুটগুলিকে এক্সপ্যান্ড করে ৫০% প্রস্থে সাজায়।
Pure.CSS ফ্রেমওয়ার্কের মাধ্যমে ফর্ম উপাদানগুলি খুব সহজে তৈরি এবং স্টাইল করা সম্ভব। এর প্রি-ডিফাইনড ক্লাস এবং স্টাইলিং টুলস আপনার ফর্মকে সুন্দর, সিম্পল এবং রেসপন্সিভ করে তোলে। আপনি চাইলে কাস্টম স্টাইলও যোগ করতে পারেন অথবা ফর্ম উপাদানগুলির প্রস্থ, রঙ, আকার ইত্যাদি কাস্টমাইজ করতে পারবেন। Pure.CSS আপনার ওয়েব ফর্ম ডিজাইন করতে খুবই সহায়ক এবং দ্রুততার সাথে কাজ করার সুযোগ দেয়।
Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা খুব সহজেই ওয়েব পেজের ফর্ম লেআউট তৈরি করতে সাহায্য করে। ফর্মগুলির জন্য গ্রিড-বেসড লেআউট ব্যবহার করলে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির মধ্যে সঠিকভাবে স্থান ভাগ করা যায় এবং ডিজাইন আরও রেসপন্সিভ হয়। Pure.CSS-এর গ্রিড সিস্টেমটি এরকম গ্রিড-ভিত্তিক ফর্ম তৈরি করতে সহায়ক।
Form Layouts in Pure.CSS
Pure.CSS ফ্রেমওয়ার্কের সাহায্যে, আপনি খুব সহজেই ফর্ম লেআউট তৈরি করতে পারবেন, যেখানে বিভিন্ন ইনপুট ফিল্ড, বাটন এবং লেবেল সঠিকভাবে সাজানো থাকবে। Pure.CSS একটি সহজ এবং সোজা পদ্ধতিতে বিভিন্ন ফর্ম এলিমেন্ট স্টাইল করে, যেমন input fields, labels, buttons, select fields ইত্যাদি।
1. Basic Form Layout in Pure.CSS
Pure.CSS এর pure-form ক্লাসের মাধ্যমে আপনি একটি স্টাইলিশ এবং ক্লিন ফর্ম তৈরি করতে পারেন। এর মধ্যে বিভিন্ন বেসিক ফর্ম এলিমেন্ট স্টাইল করা থাকে, যেমন ইনপুট ফিল্ড, টেক্সট এরিয়া, সিলেক্ট ফিল্ড এবং সাবমিট বাটন।
উদাহরণ: Basic Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Form Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form">
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Your Name" class="pure-input-1-2">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Your Email" class="pure-input-1-2">
<label for="message">Message:</label>
<textarea id="message" placeholder="Your Message" class="pure-input-1-2"></textarea>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-form: এটি একটি প্রি-ডিফাইনড ক্লাস যা ফর্মের জন্য বেসিক স্টাইলিং প্রয়োগ করে।pure-input-1-2: এটি ইনপুট ফিল্ড এবং টেক্সট এরিয়ার জন্য এক্সপ্যান্সিভ ক্লাস, যা তাদের সঠিক প্রস্থে প্রয়োগ করে। 1-2 মানে, ইনপুট ফিল্ডটি 50% প্রস্থের হবে।pure-button: এটি বাটনের জন্য একটি ডিফল্ট স্টাইল প্রদান করে।
2. Grid-Based Form Layouts in Pure.CSS
Grid-Based Forms গ্রিড লেআউট ব্যবহার করে ফর্মের এলিমেন্টগুলির মধ্যে সঠিকভাবে স্থান ভাগ করে, যা রেসপন্সিভ ডিজাইন তৈরিতে সাহায্য করে। Pure.CSS এ Grid System ব্যবহার করে, আপনি ফর্মে বিভিন্ন ইনপুট ফিল্ড এবং অন্যান্য এলিমেন্টের জন্য সঠিক অবস্থান সেট করতে পারেন।
Pure.CSS-এ Grid ব্যবহারের জন্য pure-g এবং pure-u-* ক্লাস ব্যবহার করা হয়। এখানে pure-g হল গ্রিড কন্টেইনার এবং pure-u-* হল গ্রিড আইটেম (এলিমেন্ট) যা কলাম তৈরি করে।
উদাহরণ: Grid-Based Form Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form pure-g">
<fieldset class="pure-u-1">
<legend>Contact Information</legend>
<div class="pure-u-1 pure-u-md-1-2">
<label for="name">Name:</label>
<input type="text" id="name" class="pure-input-1-1" placeholder="Enter your name">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="email">Email:</label>
<input type="email" id="email" class="pure-input-1-1" placeholder="Enter your email">
</div>
<div class="pure-u-1 pure-u-md-1-2">
<label for="phone">Phone:</label>
<input type="tel" id="phone" class="pure-input-1-1" placeholder="Enter your phone number">
</div>
<div class="pure-u-1">
<label for="message">Message:</label>
<textarea id="message" class="pure-input-1-1" placeholder="Your message"></textarea>
</div>
<div class="pure-u-1">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-g: এই ক্লাসটি গ্রিড কন্টেইনার তৈরি করে, যেখানে সব ফর্ম এলিমেন্টগুলি রাখা হবে।pure-u-1: এই ক্লাসটি পূর্ণ প্রস্থের উপাদান তৈরি করে।pure-u-md-1-2: এটি গ্রিডের জন্য মিডিয়াম স্ক্রীন সাইজে 50% প্রস্থ উপাদান তৈরি করবে, অর্থাৎ ২টি ইনপুট ফিল্ড পাশে পাশে চলে আসবে।pure-input-1-1: এটি ইনপুট ফিল্ডগুলিকে পুরো প্রস্থে (100%) তৈরি করবে।
3. Responsive Grid-Based Form
Pure.CSS-এর গ্রিড সিস্টেম রেসপন্সিভ, যার ফলে এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত। আপনি pure-u-* ক্লাসের মাধ্যমে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির প্রস্থ পরিবর্তন করতে পারেন।
উদাহরণ: Responsive Grid Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Pure.CSS Grid Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<form class="pure-form pure-g">
<fieldset class="pure-u-1">
<legend>Registration Form</legend>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" class="pure-input-1-1" placeholder="Enter your first name">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" class="pure-input-1-1" placeholder="Enter your last name">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="email">Email:</label>
<input type="email" id="email" class="pure-input-1-1" placeholder="Enter your email">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
<label for="phone">Phone:</label>
<input type="tel" id="phone" class="pure-input-1-1" placeholder="Enter your phone number">
</div>
<div class="pure-u-1">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
ব্যাখ্যা:
pure-u-sm-1-2: ছোট স্ক্রীনে (যেমন মোবাইল) ইনপুট ফিল্ডটি পূর্ণ প্রস্থে থাকবে।pure-u-md-1-4: বড় স্ক্রীনে (যেমন ডেস্কটপ) ইনপুট ফিল্ডটি ২৫% প্রস্থে থাকবে এবং মোট ৪টি ইনপুট ফিল্ড এক লাইনে সাজানো হবে।
Pure.CSS ফ্রেমওয়ার্কের সাহায্যে Grid-Based Forms এবং Form Layouts তৈরি করা সহজ এবং দ্রুত হয়। Grid সিস্টেম ব্যবহার করে, আপনি রেসপন্সিভ ফর্ম ডিজাইন করতে পারেন যা মোবাইল, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত। pure-u-* ক্লাসের মাধ্যমে আপনি ফর্ম উপাদানগুলির প্রস্থ এবং সজ্জা কাস্টমাইজ করতে পারবেন। Pure.CSS আপনাকে একটি স্টাইলিশ, এক্সটেনসিবল এবং রেসপন্সিভ ফর্ম লেআউট তৈরি করতে সাহায্য করে।
Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা স্টাইলিংয়ের জন্য অনেক শক্তিশালী কম্পোনেন্ট প্রদান করে, তবে এটি ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজগুলির জন্য সরাসরি কোনো জাভাস্ক্রিপ্ট সমর্থন প্রদান করে না। তবে, আপনি সহজে Pure.CSS এর সাথে HTML5 form validation এবং কাস্টম error messages ব্যবহার করতে পারেন। আমরা এখানে Pure.CSS ফর্ম স্টাইলিং এবং form validation এবং custom error messages সেট আপ করার জন্য কিছু উদাহরণ দেখাবো।
1. HTML5 Form Validation
HTML5 ফর্ম ভ্যালিডেশন এর মাধ্যমে আপনি সহজেই ফর্ম ফিল্ডের ইনপুট যাচাই করতে পারেন, যেমন required, email, minlength, pattern, ইত্যাদি।
Form Validation 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>Form Validation with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styling for the Form */
.form-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.pure-button-primary {
width: 100%;
background-color: #4CAF50;
color: white;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
.error-message {
color: red;
font-size: 0.9em;
display: none;
}
input:invalid + .error-message {
display: block;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form class="pure-form pure-form-aligned" action="#">
<div class="pure-control-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<span class="error-message">Name is required</span>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<span class="error-message">Please enter a valid email address</span>
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Enter your message"></textarea>
<span class="error-message">Message is required</span>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
ব্যাখ্যা:
- HTML5 Validation:
required: এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যা ফিল্ডটি পূর্ণ না থাকলে সাবমিট করতে দেবে না।type="email": এটি ইমেল ফিল্ডের জন্য একটি বিল্ট-ইন ভ্যালিডেশন যোগ করে।- Input Validity:
input:validএবংinput:invalidসিলেক্টর ব্যবহার করা হয়েছে, যাতে ইনপুট ফিল্ডের সঠিকতা যাচাই করা যায় এবং স্টাইল দেওয়া যায় (যেমন, রেড বা গ্রীন বর্ডার)।
- Custom Error Messages:
- Error message display:
span.error-messageযোগ করা হয়েছে, যা তখনই প্রদর্শিত হবে যখন ইনপুট ফিল্ডটি সঠিকভাবে পূর্ণ না হবে। input:invalid + .error-message: এই সিলেক্টরটি নিশ্চিত করে যে ইনপুট ফিল্ডটি যদি অবৈধ হয়, তবে এর পরবর্তী স্লাইডে থাকা এরর মেসেজটি দেখাবে।
- Error message display:
2. Custom Error Messages Using JavaScript
Pure.CSS মূলত CSS ফ্রেমওয়ার্ক, এবং এটি সরাসরি জাভাস্ক্রিপ্টের সাহায্য ছাড়া কাস্টম এরর মেসেজ প্রদর্শন করতে পারে না। তবে, আপনি JavaScript ব্যবহার করে কাস্টম এরর মেসেজ এবং ভ্যালিডেশন করতে পারেন।
Custom Error Messages Example with JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Error Messages in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.form-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.pure-button-primary {
width: 100%;
background-color: #4CAF50;
color: white;
}
.error-message {
color: red;
font-size: 0.9em;
display: none;
}
.pure-control-group input:invalid {
border-color: red;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form class="pure-form pure-form-aligned" id="contact-form">
<div class="pure-control-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<span class="error-message" id="name-error">Name is required</span>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<span class="error-message" id="email-error">Please enter a valid email address</span>
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Enter your message"></textarea>
<span class="error-message" id="message-error">Message is required</span>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
var isValid = true;
// Name validation
var name = document.getElementById('name');
var nameError = document.getElementById('name-error');
if (name.value === '') {
nameError.style.display = 'block';
isValid = false;
} else {
nameError.style.display = 'none';
}
// Email validation
var email = document.getElementById('email');
var emailError = document.getElementById('email-error');
if (!email.validity.valid) {
emailError.style.display = 'block';
isValid = false;
} else {
emailError.style.display = 'none';
}
// Message validation
var message = document.getElementById('message');
var messageError = document.getElementById('message-error');
if (message.value === '') {
messageError.style.display = 'block';
isValid = false;
} else {
messageError.style.display = 'none';
}
if (isValid) {
alert('Form submitted successfully!');
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- Custom JavaScript Validation: এখানে ফর্মটি সাবমিট হওয়ার আগেই JavaScript ব্যবহার করে ফিল্ডগুলি যাচাই করা হচ্ছে। প্রতিটি ফিল্ড যদি ভুলভাবে পূর্ণ হয়, তবে তাতে কাস্টম এরর মেসেজ দেখানো হবে।
- Error Message Display:
span.error-messageদ্বারা কাস্টম এরর মেসেজগুলি তৈরি করা হয়েছে, যা ইনপুট ফিল্ডের পাশে প্রদর্শিত হবে যখন তা সঠিকভাবে পূর্ণ হবে না। - Form Submit Logic: ফর্মটি যখন সাবমিট হয়, তখন ফিল্ডগুলো যাচাই করা হয় এবং যদি কোনো ত্রুটি পাওয়া যায়, তবে তা
display: block;করে এরর মেসেজ দেখানো হয়।
- HTML5 Form Validation এবং Custom Error Messages ব্যবহার করে Pure.CSS এর সাথে সুন্দরভাবে স্টাইল করা ফর্ম তৈরি করা যায়। HTML5 ফিচারগুলির মাধ্যমে সহজেই ইনপুট যাচাই করা যায়, এবং Pure.CSS-এ ফর্মের ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা যেতে পারে।
- আপনি যদি আরও উন্নত কাস্টম ভ্যালিডেশন বা এরর মেসেজ চান, তবে JavaScript ব্যবহার করে নিজস্ব ফর্ম ভ্যালিডেশন তৈরি করতে পারেন।
Pure.CSS একটি হালকা ওজনের এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা ওয়েব ডিজাইন দ্রুত এবং সহজ করতে সাহায্য করে। এটি ওয়েব ফর্ম উপাদানগুলির জন্য বেশ কিছু প্রাথমিক স্টাইল প্রদান করে, যেমন Input, Textarea, Checkbox, এবং Radio Button। তবে, আপনি এই উপাদানগুলির জন্য অতিরিক্ত কাস্টমাইজেশনও করতে পারেন।
এখানে, আমরা Pure.CSS ব্যবহার করে এই ফর্ম উপাদানগুলির স্টাইলিং দেখব।
1. Input Field Styling with Pure.CSS
Input fields হল ফর্মের অন্যতম গুরুত্বপূর্ণ অংশ যা ব্যবহারকারীর ইনপুট গ্রহণ করে। Pure.CSS একটি সুন্দর এবং ক্লিন স্টাইল প্রদান করে, তবে আপনি এর স্টাইল আরও কাস্টমাইজ করতে পারেন।
Input Field Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Input Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="text" class="pure-input-1 custom-input" placeholder="Enter your name">
<input type="email" class="pure-input-1 custom-input" placeholder="Enter your email">
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-input-1ক্লাসটি ইনপুট ফিল্ডে একটি মৌলিক স্টাইল যোগ করে। - Custom styles যেমন
border-radius,font-size,paddingএবংborderব্যবহার করে ইনপুট ফিল্ডটির স্টাইল উন্নত করা হয়েছে।
2. Textarea Styling with Pure.CSS
Textarea ফিল্ড ব্যবহারকারীর জন্য একটি বড় এলাকা প্রদান করে যেখানে তারা বড় ইনপুট বা মন্তব্য করতে পারে। Pure.CSS এ textarea এর জন্য প্রাথমিক স্টাইল রয়েছে।
Textarea Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Textarea Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1em;
margin-bottom: 20px;
height: 150px;
}
</style>
</head>
<body>
<textarea class="pure-input-1 custom-textarea" placeholder="Enter your message"></textarea>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-input-1ক্লাসটি ব্যবহার করা হয়েছে, যা টেক্সট এরিয়া ফিল্ডে বেসিক স্টাইল প্রয়োগ করে। - Custom styles যেমন
height,padding,border-radius, এবংborderএর মাধ্যমে ফিল্ডটির কাস্টমাইজেশন করা হয়েছে।
3. Checkbox Styling with Pure.CSS
Checkbox ফিল্ড সাধারণত ব্যবহারকারীর কাছ থেকে একটি সিলেকশন গ্রহণ করতে ব্যবহৃত হয়। Pure.CSS এ এটি একটি খুব সিম্পল এবং স্টাইলিশ চেকবক্স তৈরি করে।
Checkbox Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Checkbox Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<label class="pure-checkbox">
<input type="checkbox"> I agree to the terms and conditions
</label>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-checkboxক্লাসটি একটি সিম্পল এবং আধুনিক চেকবক্স তৈরি করে। - চেকবক্সের পাশে একটি লেবেল রয়েছে যা ব্যবহারকারীর কাছে বোধগম্য।
4. Radio Button Styling with Pure.CSS
Radio buttons সাধারণত একাধিক বিকল্পের মধ্যে একটি নির্বাচন করার জন্য ব্যবহৃত হয়। Pure.CSS এর মাধ্যমে আপনি সেগুলিকে একটি সহজ ও স্টাইলিশ ডিজাইন করতে পারেন।
Radio Button Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Radio Button Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<label class="pure-radio">
<input type="radio" name="option" value="option1"> Option 1
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option2"> Option 2
</label>
</body>
</html>
ব্যাখ্যা:
- Pure.CSS এর
pure-radioক্লাসটি একটি সিম্পল রেডিও বাটন তৈরি করে, যার মাধ্যমে আপনি একটি গ্রুপের মধ্যে থেকে একটি নির্বাচন করতে পারবেন। - এই স্টাইলিংটি রেডিও বাটনের ডিজাইনকে পরিষ্কার এবং আধুনিক করে তোলে।
5. Using Pure.CSS Form Elements Together
এখন, আমরা সমস্ত উপাদান একত্রে ব্যবহার করে একটি ফর্ম তৈরি করি, যা Input, Textarea, Checkbox, এবং Radio Button ব্যবহার করবে।
Full Form Styling Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Form Styling</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.pure-button {
width: 100%;
}
</style>
</head>
<body>
<form class="pure-form">
<label for="name">Name:</label>
<input type="text" id="name" class="pure-input-1" placeholder="Enter your name">
<label for="message">Message:</label>
<textarea id="message" class="pure-input-1" placeholder="Enter your message"></textarea>
<label class="pure-checkbox">
<input type="checkbox"> I agree to the terms and conditions
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option1"> Option 1
</label>
<label class="pure-radio">
<input type="radio" name="option" value="option2"> Option 2
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি সম্পূর্ণ ফর্ম তৈরি করা হয়েছে, যেখানে input, textarea, checkbox, এবং radio buttons ব্যবহার করা হয়েছে।
- Pure.CSS এর
pure-formক্লাস ব্যবহার করে একটি সিম্পল ফর্ম ডিজাইন করা হয়েছে। - Button এর জন্য
pure-button pure-button-primaryক্লাস ব্যবহার করা হয়েছে, যা একটি স্টাইলিশ বাটন তৈরি করে।
Pure.CSS ব্যবহার করে Input, Textarea, Checkbox, এবং Radio Button ফর্ম উপাদানগুলির স্টাইলিং করা অত্যন্ত সহজ। Pure.CSS এর প্রস্তুত করা ক্লাসগুলির মাধ্যমে, আপনি সহজে একটি সুন্দর এবং প্রফেশনাল লুকিং ফর্ম তৈরি করতে পারেন। এছাড়া, আপনি কাস্টম স্টাইল ব্যবহার করে এগুলির ডিজাইন আরও সুন্দর এবং ব্যবহারকারী-বান্ধব করতে পারেন।
Read more
