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 আপনার ওয়েব ফর্ম ডিজাইন করতে খুবই সহায়ক এবং দ্রুততার সাথে কাজ করার সুযোগ দেয়।
Read more
