Pure.CSS এর Forms Layouts এবং Customization

Web Development - পিওর.সিএসএস (Pure.CSS)

212

Pure.CSS একটি লাইটওয়েট এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক যা ফর্ম স্টাইলিং এবং লেআউট তৈরির জন্য কিছু সিম্পল এবং শক্তিশালী ক্লাস সরবরাহ করে। Pure.CSS ফর্মগুলি সিম্পল, রেসপন্সিভ এবং কাস্টমাইজযোগ্য হতে সহায়ক, যা সহজেই মোবাইল ডিভাইসেও ভালোভাবে কাজ করে। এখানে Pure.CSS এর Forms Layouts এবং Customization সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

1. Basic Form Layout in Pure.CSS

Pure.CSS তে ফর্ম তৈরির জন্য কিছু ডিফল্ট স্টাইল ক্লাস রয়েছে, যেগুলি আপনাকে সিম্পল, সুশৃঙ্খল ফর্ম ডিজাইন করতে সাহায্য করবে।

Basic Form Example:

<!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="path/to/pure-min.css">
  <title>Basic Form Example</title>
</head>
<body>

  <form class="pure-form">
    <fieldset>
      <legend>Login</legend>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button type="submit" class="pure-button pure-button-primary">Login</button>
    </fieldset>
  </form>

</body>
</html>

ব্যাখ্যা:

pure-form: এই ক্লাস ফর্মের জন্য বেসিক স্টাইলিং প্রদান করে।
pure-button: এটি বাটনের জন্য ক্লাস, যা বাটনটি একটি স্টাইলযুক্ত প্রোফাইল দিবে।
pure-button-primary: এই ক্লাসটি বাটনকে প্রাইমারি স্টাইল প্রদান করে (অর্থাৎ, এটি একটি বিশেষ ধরনের বাটন হবে)।

2. Forms Layout with Labels and Inputs

আপনি Pure.CSS ব্যবহার করে ফর্মের লেবেল এবং ইনপুট ফিল্ডগুলিকে সুন্দরভাবে সাজাতে পারেন। লেবেল এবং ইনপুট ফিল্ডের জন্য pure-input এবং pure-label ক্লাস ব্যবহার করা হয়।

Forms Layout Example with Labels:

<!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="path/to/pure-min.css">
  <title>Form with Labels</title>
</head>
<body>

  <form class="pure-form">
    <fieldset>
      <legend>Registration</legend>

      <label for="username">Username</label>
      <input id="username" type="text" placeholder="Enter your username" class="pure-input-1-2">

      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Enter your email" class="pure-input-1-2">

      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Enter your password" class="pure-input-1-2">

      <button type="submit" class="pure-button pure-button-primary">Register</button>
    </fieldset>
  </form>

</body>
</html>

ব্যাখ্যা:

pure-form: ফর্মটি সিম্পল এবং মিনিমালিস্ট স্টাইল দিয়ে সাজানো হয়েছে।
pure-input-1-2: ইনপুট ফিল্ডগুলির জন্য এই ক্লাসটি ৫০% প্রস্থে ইনপুট তৈরি করে, যা সাধারণত একটি fluid ফর্ম হিসেবে কাজ করে।
pure-label: লেবেল ক্লাসটি ফর্ম ইনপুটের সাথে সংযুক্ত থাকে।

3. Stacked Forms

Stacked forms তে ফর্ম ইনপুট ফিল্ডগুলো উল্লম্বভাবে সাজানো থাকে (একটি ফর্ম উপাদান নিচে আরেকটি থাকে)। Pure.CSS এর মাধ্যমে আপনি খুব সহজেই এই ধরনের ফর্ম তৈরি করতে পারেন।

Stacked Form Example:

<!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="path/to/pure-min.css">
  <title>Stacked Form</title>
</head>
<body>

  <form class="pure-form pure-form-stacked">
    <fieldset>
      <legend>Signup</legend>

      <label for="username">Username</label>
      <input id="username" type="text" placeholder="Username" class="pure-input-1-2">

      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email" class="pure-input-1-2">

      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password" class="pure-input-1-2">

      <button type="submit" class="pure-button pure-button-primary">Signup</button>
    </fieldset>
  </form>

</body>
</html>

ব্যাখ্যা:

pure-form-stacked: এই ক্লাসটি ফর্মের ইনপুট ফিল্ডগুলোকে উল্লম্বভাবে (stacked) সাজায়।
pure-input-1-2: ইনপুট ফিল্ডগুলির জন্য ৫০% প্রস্থ ব্যবহৃত হয়, যা ফর্মের জন্য যথেষ্ট বড় এবং সহজবোধ্য।

4. Customizing Form Elements

Pure.CSS তে ফর্ম উপাদানগুলিকে আরও কাস্টমাইজ করা যায়। আপনি ইনপুট ফিল্ডের স্টাইল, ব্যাকগ্রাউন্ড, বর্ডার এবং অন্যান্য প্রোপার্টি কাস্টমাইজ করতে পারেন।

Custom Form Elements Example:

<!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="path/to/pure-min.css">
  <style>
    /* Custom input styling */
    .pure-input-custom {
      border: 2px solid #4CAF50;
      padding: 10px;
      font-size: 16px;
    }
    
    /* Custom button styling */
    .pure-button-custom {
      background-color: #4CAF50;
      color: white;
    }
    
    .pure-button-custom:hover {
      background-color: #45a049;
    }
  </style>
  <title>Custom Form Elements</title>
</head>
<body>

  <form class="pure-form">
    <fieldset>
      <legend>Custom Form</legend>

      <label for="username">Username</label>
      <input id="username" type="text" class="pure-input-1-2 pure-input-custom" placeholder="Enter your username">

      <label for="email">Email</label>
      <input id="email" type="email" class="pure-input-1-2 pure-input-custom" placeholder="Enter your email">

      <label for="password">Password</label>
      <input id="password" type="password" class="pure-input-1-2 pure-input-custom" placeholder="Enter your password">

      <button type="submit" class="pure-button pure-button-primary pure-button-custom">Submit</button>
    </fieldset>
  </form>

</body>
</html>

ব্যাখ্যা:

.pure-input-custom: ইনপুট ফিল্ডে কাস্টম বর্ডার, প্যাডিং এবং ফন্ট সাইজ যোগ করা হয়েছে।
.pure-button-custom: বাটনে কাস্টম ব্যাকগ্রাউন্ড কালার এবং হোভার ইফেক্ট যুক্ত করা হয়েছে।

5. Responsive Forms in Pure.CSS

Pure.CSS তে রেসপন্সিভ ফর্ম তৈরি করা খুব সহজ। আপনি গ্রিড সিস্টেম ব্যবহার করে ইনপুট ফিল্ডগুলিকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করতে পারেন। আপনি Pure.CSS Grid System ব্যবহার করে ফর্মের কলাম সংখ্যা পরিবর্তন করতে পারেন।

Responsive Form Example:

<!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="path/to/pure-min.css">
  <title>Responsive Form</title>
</head>
<body>

  <form class="pure-form">
    <fieldset>
      <legend>Contact Form</legend>

      <div class="pure-g">
        <div class="pure-u-1-2">
          <label for="name">Name</label>
          <input id="name" type="text" placeholder="Your Name" class="pure-input-1-1">
        </div>
        <div class="pure-u-1-2">
          <label for="email">Email</label>
          <input id="email" type="email" placeholder="Your Email" class="pure-input-1-1">
        </div>
      </div>

      <label for="message">Message</label>
      <textarea id="message" placeholder="Your Message" class="pure-input-1-1"></textarea>

      <button type="submit" class="pure-button pure-button-primary">Send</button>
    </fieldset>
  </form>

</body>
</html>

ব্যাখ্যা:

pure-g: গ্রিড কন্টেইনার ক্লাস, যা ফর্মের কলামগুলিকে আলাদা করে এবং সেগুলির মধ্যে ব্যবধান রাখে।
pure-u-1-2: ইনপুট ফিল্ডগুলোকে ৫০% প্রস্থে সেট করে (ডেস্কটপ স্ক্রীনে দুই কলামে)।
pure-input-1-1: ইনপুট ফিল্ডগুলোকে পুরো প্রস্থে সেট করে।

Pure.CSS ব্যবহার করে ফর্ম লেআউট এবং কাস্টমাইজেশন সহজে এবং দ্রুত করা সম্ভব। এর মাধ্যমে আপনি সুন্দর এবং রেসপন্সিভ ফর্ম তৈরি করতে পারবেন। Pure.CSS Grid System, mobile-first design, এবং custom form elements ব্যবহার করে আপনি অত্যন্ত কাস্টমাইজেবল এবং কার্যকরী ফর্ম তৈরি করতে পারেন।

Content added By

Najjar Hossain Raju

Simple এবং Complex Form Layouts তৈরি করা

170

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 এর ছোট আকার এবং সহজ ব্যবহারের মাধ্যমে আপনি মোবাইল-ফার্স্ট, রেসপন্সিভ এবং স্টাইলিশ ফর্ম তৈরি করতে পারবেন।

Content added By

Najjar Hossain Raju

Inline Forms এবং Stacked Forms

214

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 এর মাধ্যমে, আপনি সহজে রেসপনসিভ, মিনিমাল এবং সুন্দর ফর্ম ডিজাইন করতে পারবেন যা ওয়েব পেজের ইন্টারফেসকে আরও ইউজার-ফ্রেন্ডলি করে তোলে।

Content added By

Najjar Hossain Raju

Form Grids এবং Responsive Form Design

189

Pure.CSS একটি ছোট, হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টের জন্য সহজে রেসপন্সিভ এবং সুন্দর ফর্ম ডিজাইন তৈরি করতে সহায়তা করে। Form Grids এবং Responsive Form Design এর জন্য Pure.CSS প্রি-বিল্ট স্টাইলিং প্রদান করে, যা ফর্মের জন্য একটি সহজ এবং আকর্ষণীয় লেআউট তৈরি করতে সাহায্য করে।

১. Form Grids with Pure.CSS:

Pure.CSS ব্যবহার করে আপনি ফর্মের জন্য গ্রিড সিস্টেম তৈরি করতে পারেন। এটি ফর্ম এলিমেন্টগুলিকে সুষমভাবে সাজাতে সাহায্য করে, যাতে ফর্মটি সহজে পড়া যায় এবং ইন্টারঅ্যাক্ট করা যায়।

উদাহরণ: Form Grids in 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 Grids with Pure.CSS</title>
  <style>
    .form-container {
      width: 60%;
      margin: 0 auto;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <form class="pure-form pure-form-aligned">
      <fieldset>
        <legend>Contact Form</legend>

        <div class="pure-control-group">
          <label for="name">Full Name</label>
          <input id="name" type="text" placeholder="Your Name">
        </div>

        <div class="pure-control-group">
          <label for="email">Email Address</label>
          <input id="email" type="email" placeholder="Your Email">
        </div>

        <div class="pure-control-group">
          <label for="message">Message</label>
          <textarea id="message" placeholder="Your Message"></textarea>
        </div>

        <div class="pure-controls">
          <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
      </fieldset>
    </form>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

pure-form-aligned: এটি Pure.CSS এর একটি ক্লাস যা ফর্ম এলিমেন্টগুলোকে একসাথে সুন্দরভাবে সাজায়, যাতে ইনপুট ফিল্ড এবং লেবেল এক সোজা লাইনে থাকে।
pure-control-group: এই ক্লাসটি প্রতিটি ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়, যা ইনপুট এলিমেন্ট এবং তার লেবেলকে একটি গ্রুপে রাখে।
pure-controls: এটি ফর্মের সাবমিট বাটন এবং অন্যান্য নিয়ন্ত্রণ উপাদানগুলিকে স্টাইল করে।

২. Responsive Form Design with Pure.CSS:

Pure.CSS এর মাধ্যমে আপনি সহজেই রেসপন্সিভ ফর্ম ডিজাইন করতে পারেন, যা বিভিন্ন ডিভাইসে (মোবাইল, ট্যাবলেট, ডেস্কটপ) সুন্দরভাবে দেখাবে। Pure.CSS এর গ্রিড সিস্টেম এবং ক্লাসগুলি ওয়েব ফর্মকে ডিভাইসের আকার অনুসারে স্বয়ংক্রিয়ভাবে মানিয়ে নিতে সাহায্য করে।

উদাহরণ: Responsive Form Design

<!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>
    .form-container {
      width: 80%;
      max-width: 600px;
      margin: 0 auto;
    }
    .pure-form {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
    }
    .pure-control-group {
      margin-bottom: 15px;
    }
    .pure-button {
      width: 100%;
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <form class="pure-form pure-form-aligned">
      <fieldset>
        <legend>Registration Form</legend>

        <div class="pure-control-group">
          <label for="first-name">First Name</label>
          <input id="first-name" type="text" placeholder="First Name">
        </div>

        <div class="pure-control-group">
          <label for="last-name">Last Name</label>
          <input id="last-name" type="text" placeholder="Last Name">
        </div>

        <div class="pure-control-group">
          <label for="email">Email Address</label>
          <input id="email" type="email" placeholder="Email Address">
        </div>

        <div class="pure-control-group">
          <label for="phone">Phone Number</label>
          <input id="phone" type="tel" placeholder="Phone Number">
        </div>

        <div class="pure-control-group">
          <label for="message">Message</label>
          <textarea id="message" placeholder="Your Message"></textarea>
        </div>

        <div class="pure-controls">
          <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
      </fieldset>
    </form>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

Responsive Design: Pure.CSS এর ব্যবহার ইমেজ, ফন্ট, এবং অন্যান্য উপাদানগুলোকে স্বয়ংক্রিয়ভাবে রেসপন্সিভ বানিয়ে দেয়, যাতে ওয়েব পেজটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে দেখা যায়।
pure-button: এই ক্লাসটি বাটনটিকে পূর্ণ প্রস্থে প্রদর্শন করে এবং ব্যবহারকারীর জন্য এটি আরও দৃশ্যমান এবং সহজলভ্য হয়।
max-width: এখানে max-width প্রপার্টি ব্যবহার করা হয়েছে, যা ফর্মের প্রস্থকে সর্বোচ্চ 600px পর্যন্ত সীমাবদ্ধ করে, যাতে বড় স্ক্রীনে এটি অতিরিক্ত বিস্তৃত না হয়ে যায়।
margin: 0 auto: এটি ফর্মের কন্টেইনারটিকে হরিজেন্টালি সেন্টার করে দেয়।

৩. Grid Layout for Forms:

Pure.CSS গ্রিড সিস্টেম ব্যবহার করে আপনি আপনার ফর্ম উপাদানগুলিকে আরও সুষমভাবে সাজাতে পারেন।

উদাহরণ: Grid Layout for Form Elements

<!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 Grid Layout</title>
  <style>
    .form-container {
      width: 70%;
      margin: 0 auto;
    }
    .pure-g {
      margin-top: 20px;
    }
    .pure-u-1-2 {
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <form class="pure-form">
      <fieldset>
        <legend>Grid Based Form</legend>

        <div class="pure-g">
          <div class="pure-u-1-2">
            <label for="name">Full Name</label>
            <input id="name" type="text" placeholder="Your Name">
          </div>

          <div class="pure-u-1-2">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Your Email">
          </div>
        </div>

        <div class="pure-g">
          <div class="pure-u-1-2">
            <label for="phone">Phone Number</label>
            <input id="phone" type="tel" placeholder="Your Phone Number">
          </div>

          <div class="pure-u-1-2">
            <label for="message">Message</label>
            <textarea id="message" placeholder="Your Message"></textarea>
          </div>
        </div>

        <div class="pure-controls">
          <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
      </fieldset>
    </form>
  </div>

</body>
</html>

উদাহরণ বিশ্লেষণ:

pure-g: এটি Pure.CSS এর গ্রিড সিস্টেমের একটি ক্লাস, যা ফর্মের উপাদানগুলোকে গ্রিডের মধ্যে সাজাতে সাহায্য করে।
pure-u-1-2: এটি গ্রিড কলামের জন্য ব্যবহৃত ক্লাস, যেখানে 1-2 অর্থ হল প্রতিটি উপাদান ফর্মের 50% প্রস্থ নিবে।

Pure.CSS এর গ্রিড সিস্টেম এবং প্রি-বিল্ট ক্লাসগুলি আপনাকে সহজে Responsive Forms এবং Form Grids তৈরি করতে সহায়তা করে। আপনি এই ক্লাসগুলো ব্যবহার করে ফর্মের ডিজাইনকে আরো সুন্দর এবং রেসপন্সিভ করতে পারেন, যাতে এটি সমস্ত ডিভাইসে সুন্দরভাবে প্রদর্শিত হয়।

Content added By

Najjar Hossain Raju

Form Elements এর Customization এবং Validation

190

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 ভ্যালিডেশন সমর্থন করে, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং কার্যকরী সমাধান প্রদান করে।

Content added By

Najjar Hossain Raju

Pure.CSS এর পরিচিতি Pure.CSS সেটআপ এবং ইনস্টলেশন Pure.CSS এর Responsive Grid System Pure.CSS এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Pure.CSS এর Buttons এবং Button Groups

Pure.CSS এর Forms Layouts এবং Customization

1. Basic Form Layout in Pure.CSS

Basic Form Example:

ব্যাখ্যা:

2. Forms Layout with Labels and Inputs

Forms Layout Example with Labels:

ব্যাখ্যা:

3. Stacked Forms

Stacked Form Example:

ব্যাখ্যা:

4. Customizing Form Elements

Custom Form Elements Example:

ব্যাখ্যা:

5. Responsive Forms in Pure.CSS

Responsive Form Example:

ব্যাখ্যা:

Simple এবং Complex Form Layouts তৈরি করা

১. Simple Form Layout

উদাহরণ: Simple Form Layout

ব্যাখ্যা:

২. Complex Form Layout

উদাহরণ: Complex Form Layout

ব্যাখ্যা:

৩. কাস্টমাইজেশন এবং স্টাইলিং:

উদাহরণ:

Inline Forms এবং Stacked Forms

1. Inline Forms with Pure.CSS

Inline Form Example with Pure.CSS:

ব্যাখ্যা:

2. Stacked Forms with Pure.CSS

Stacked Form Example with Pure.CSS:

ব্যাখ্যা:

3. Responsive Form Design Using Pure.CSS

ব্যাখ্যা:

Form Grids এবং Responsive Form Design

১. Form Grids with Pure.CSS:

উদাহরণ: Form Grids in Pure.CSS

উদাহরণ বিশ্লেষণ:

২. Responsive Form Design with Pure.CSS:

উদাহরণ: Responsive Form Design

উদাহরণ বিশ্লেষণ:

৩. Grid Layout for Forms:

উদাহরণ: Grid Layout for Form Elements

উদাহরণ বিশ্লেষণ:

Form Elements এর Customization এবং Validation

১. Form Elements এর Customization:

a) Custom Input Fields:

b) Custom Radio Buttons:

c) Custom Checkboxes:

২. Responsive Form Design:

৩. Form Validation:

a) HTML5 Form Validation:

b) Custom Error Messages:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!