বুটস্ট্রাপ ৫ একটি শক্তিশালী ফর্ম সিস্টেম প্রদান করে যা সহজেই বিভিন্ন ধরনের ইনপুট ফিল্ড, বাটন, চেকবক্স, রেডিও বাটন, সিলেক্ট মেনু, এবং আরও অনেক কিছু তৈরি করতে সাহায্য করে। বুটস্ট্রাপের ফর্ম স্টাইলিং অত্যন্ত নমনীয়, এবং এটি মোবাইল-প্রথম (mobile-first) ডিজাইনে তৈরি করা।

নিচে বুটস্ট্রাপ ৫ এর ফর্ম এবং ইনপুট ফিল্ডস সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

বুটস্ট্রাপ ৫ এর ফর্ম স্টাইলিং

বুটস্ট্রাপ ৫ এ ফর্ম তৈরি করার জন্য কিছু প্রাথমিক ক্লাস এবং স্টাইল রয়েছে যা সহজে ফর্ম কন্ট্রোল এবং অন্যান্য ফর্ম এলিমেন্ট স্টাইল করতে সাহায্য করে।

ফর্মের মৌলিক গঠন

<form>
  <div class="mb-3">
    <label for="exampleInput" class="form-label">ইনপুট লেবেল</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="এখানে ইনপুট দিন">
  </div>
  <div class="mb-3">
    <label for="exampleInputEmail" class="form-label">ইমেইল ঠিকানা</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="আপনার ইমেইল">
  </div>
  <button type="submit" class="btn btn-primary">সাবমিট করুন</button>
</form>

এখানে:

• <form>: এটি ফর্মের প্রধান কনটেইনার।
• class="form-label": লেবেল স্টাইল করার জন্য ব্যবহার করা হয়।
• class="form-control": ইনপুট ফিল্ডে বুটস্ট্রাপের স্টাইল প্রয়োগ করার জন্য ব্যবহৃত হয়।
• class="btn btn-primary": বাটনকে বুটস্ট্রাপের স্টাইল দেয়া হয়।

ইনপুট ফিল্ডস (Input Fields)

বুটস্ট্রাপ ৫ বিভিন্ন ধরনের ইনপুট ফিল্ডের জন্য স্টাইলিং প্রদান করে। এতে রয়েছে সাধারণ টেক্সট ইনপুট, পাসওয়ার্ড ইনপুট, চেকবক্স, রেডিও বাটন, সিলেক্ট মেনু ইত্যাদি।

টেক্সট ইনপুট (Text Input)

<div class="mb-3">
  <label for="textInput" class="form-label">টেক্সট ইনপুট</label>
  <input type="text" class="form-control" id="textInput" placeholder="এখানে টেক্সট লিখুন">
</div>

পাসওয়ার্ড ইনপুট (Password Input)

<div class="mb-3">
  <label for="passwordInput" class="form-label">পাসওয়ার্ড</label>
  <input type="password" class="form-control" id="passwordInput" placeholder="আপনার পাসওয়ার্ড">
</div>

ইমেইল ইনপুট (Email Input)

<div class="mb-3">
  <label for="emailInput" class="form-label">ইমেইল</label>
  <input type="email" class="form-control" id="emailInput" placeholder="আপনার ইমেইল">
</div>

নাম্বার ইনপুট (Number Input)

<div class="mb-3">
  <label for="numberInput" class="form-label">নাম্বার ইনপুট</label>
  <input type="number" class="form-control" id="numberInput" placeholder="একটি সংখ্যা লিখুন">
</div>

টেক্সট এরিয়া (Text Area)

<div class="mb-3">
  <label for="textArea" class="form-label">টেক্সট এরিয়া</label>
  <textarea class="form-control" id="textArea" rows="3" placeholder="এখানে লেখা লিখুন"></textarea>
</div>

ফর্মের চেকবক্স এবং রেডিও বাটন

চেকবক্স (Checkbox)

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">
      আমি শর্তাবলী মেনে চলব।
    </label>
  </div>
</div>

রেডিও বাটন (Radio Button)

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      বিকল্প ১
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      বিকল্প ২
    </label>
  </div>
</div>

সিলেক্ট মেনু (Select Menu)

<div class="mb-3">
  <label for="selectInput" class="form-label">সিলেক্ট অপশন</label>
  <select class="form-select" id="selectInput">
    <option selected>একটি অপশন নির্বাচন করুন</option>
    <option value="1">অপশন ১</option>
    <option value="2">অপশন ২</option>
    <option value="3">অপশন ৩</option>
  </select>
</div>

ইনপুট গ্রুপ (Input Group)

বুটস্ট্রাপ ৫ এ ইনপুট গ্রুপ ব্যবহার করে একাধিক ইনপুট ফিল্ড বা আইকন একই লাইন বা ইনপুট ফিল্ডে যুক্ত করা যেতে পারে।

ইনপুট গ্রুপের উদাহরণ:

<div class="mb-3">
  <label for="inputGroup" class="form-label">ইনপুট গ্রুপ</label>
  <div class="input-group">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" id="inputGroup" placeholder="আপনার ইউজারনেম" aria-describedby="basic-addon1">
  </div>
</div>

এখানে input-group ক্লাসটি ইনপুট ফিল্ডকে একটি গ্রুপের মধ্যে নিয়ে আসে এবং input-group-text ক্লাসটি ইনপুট ফিল্ডের পাশে একটি আইকন বা টেক্সট যোগ করে।

বাটন স্টাইলিং (Button Styling)

বুটস্ট্রাপ ৫ বাটনের বিভিন্ন স্টাইলও প্রদান করে, যার মাধ্যমে আপনি সাবমিট বাটন বা অন্যান্য বাটনগুলো সহজে ডিজাইন করতে পারেন।

বাটন উদাহরণ:

<button type="submit" class="btn btn-primary">সাবমিট করুন</button>
<button type="button" class="btn btn-secondary">キャンセル</button>

এখানে:

• btn-primary: প্রধান রঙের বাটন
• btn-secondary: সেকেন্ডারি রঙের বাটন

ফর্মের Validation

বুটস্ট্রাপ ৫ ফর্মের ইনপুটের জন্য ইনবিল্ট ভ্যালিডেশন ক্লাসও সরবরাহ করে, যা ব্যবহারকারীর ইনপুট চেক করে এবং ফর্ম সাবমিটের আগে ভুলগুলি প্রদর্শন করে।

ইনপুট ভ্যালিডেশন উদাহরণ:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationInput" class="form-label">ইনপুট</label>
    <input type="text" class="form-control" id="validationInput" required>
    <div class="invalid-feedback">
      অনুগ্রহ করে একটি ইনপুট দিন।
    </div>
  </div>
  <button class="btn btn-primary" type="submit">সাবমিট করুন</button>
</form>

এখানে needs-validation এবং invalid-feedback ক্লাসগুলো ভ্যালিডেশন পরিচালনার জন্য ব্যবহার করা হয়।

এভাবে বুটস্ট্রাপ ৫ এর ফর্ম এবং ইনপুট ফিল্ডস ব্যবহার করে আপনি একটি কার্যকর এবং রেসপন্সিভ ফর্ম তৈরি করতে পারবেন।

বুটস্ট্রাপ ৫ ফর্ম তৈরির জন্য বিভিন্ন প্রি-ডিফাইন্ড ক্লাস সরবরাহ করে, যা সহজেই ফর্ম এলিমেন্টসকে কাস্টমাইজ এবং রেসপন্সিভ করে তোলে। আপনি সঠিক স্টাইল এবং কাঠামো ব্যবহার করে ফর্ম তৈরিতে অনেক সময় ও পরিশ্রম বাঁচাতে পারেন। এখানে বুটস্ট্রাপ ৫ এর কিছু গুরুত্বপূর্ণ ফর্ম এলিমেন্টস এবং তাদের ব্যবহারের উদাহরণ দেওয়া হলো।

ফর্ম ইনপুট এলিমেন্টস

বুটস্ট্রাপ ৫ এ বিভিন্ন ধরনের ইনপুট এলিমেন্টস রয়েছে, যেমন টেক্সট বক্স, রেডিও বাটন, চেকবক্স, ড্রপডাউন, টেক্সট এরিয়া, ফাইল ইনপুট ইত্যাদি। প্রতিটি ইনপুটের জন্য প্রি-ডিফাইন্ড ক্লাস রয়েছে যা ব্যবহারের মাধ্যমে আপনি দ্রুত সঠিক স্টাইল পেতে পারেন।

১. টেক্সট ইনপুট (Text Input)

<div class="mb-3">
  <label for="exampleInputEmail1" class="form-label">ইমেইল</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="আপনার ইমেইল এড্রেস">
</div>

এখানে form-control ক্লাসটি টেক্সট ইনপুটের জন্য ব্যবহার করা হয়, যা বুটস্ট্রাপের সেরা স্টাইলটি অ্যাপ্লাই করে।

২. পাসওয়ার্ড ইনপুট (Password Input)

<div class="mb-3">
  <label for="exampleInputPassword1" class="form-label">পাসওয়ার্ড</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="আপনার পাসওয়ার্ড">
</div>

এখানে type="password" ব্যবহার করে পাসওয়ার্ড ইনপুট বানানো হয়েছে, যা form-control ক্লাসের মাধ্যমে স্টাইল করা হয়েছে।

৩. টেক্সট এরিয়া (Textarea)

<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">মন্তব্য</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

এই কোডটি একটি টেক্সট এরিয়া তৈরি করে, যা ব্যবহারকারীদের বড় পরিসরে টেক্সট ইনপুট করতে সক্ষম করে। rows অ্যাট্রিবিউট দিয়ে টেক্সট এরিয়ার উচ্চতা নির্ধারণ করা যায়।

ফর্মের অন্যান্য ইনপুট এলিমেন্টস

৪. চেকবক্স (Checkbox)

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
      আমি শর্তাবলী মেনে চলব
    </label>
  </div>
</div>

form-check ক্লাসের মাধ্যমে চেকবক্সের সঠিক স্টাইল পাওয়া যায়।

৫. রেডিও বাটন (Radio Button)

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      পুরুষ
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      মহিলা
    </label>
  </div>
</div>

এখানে form-check-input ব্যবহার করা হয়েছে রেডিও বাটনটির জন্য এবং form-check-label ক্লাস লেবেলের জন্য।

৬. সিলেক্ট ড্রপডাউন (Select Dropdown)

<div class="mb-3">
  <label for="exampleFormControlSelect1" class="form-label">পছন্দ করুন</label>
  <select class="form-select" id="exampleFormControlSelect1">
    <option>বিকল্প ১</option>
    <option>বিকল্প ২</option>
    <option>বিকল্প ৩</option>
  </select>
</div>

form-select ক্লাসের মাধ্যমে ড্রপডাউন সিলেক্ট অপশন তৈরি করা হয়।

৭. ফাইল ইনপুট (File Input)

<div class="mb-3">
  <label for="formFile" class="form-label">ফাইল আপলোড করুন</label>
  <input class="form-control" type="file" id="formFile">
</div>

এখানে form-control ক্লাস ব্যবহার করা হয়েছে ফাইল ইনপুট ফিল্ডের জন্য।

ফর্মের গ্রুপিং এবং লেবেল

বুটস্ট্রাপ ৫ ফর্ম গ্রুপিং করার জন্য এবং ইনপুট ফিল্ডগুলোকে সুন্দরভাবে সাজানোর জন্য কিছু বিশেষ ক্লাস সরবরাহ করেছে।

৮. ফর্ম গ্রুপ (Form Group)

<div class="mb-3">
  <label for="exampleInputName" class="form-label">নাম</label>
  <input type="text" class="form-control" id="exampleInputName" placeholder="আপনার নাম">
</div>

এখানে form-label এবং form-control ক্লাস ব্যবহার করে ইনপুট এবং লেবেল গ্রুপ করা হয়েছে।

৯. ফর্ম ইনলাইন (Form Inline)

<form class="row g-3">
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">পাসওয়ার্ড</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="পাসওয়ার্ড">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">প্রেরণ</button>
  </div>
</form>

এখানে row এবং col-auto ক্লাস ব্যবহার করে ফর্ম ইনপুট এবং বাটন ইনলাইনে সাজানো হয়েছে।

ফর্ম বাটন এবং কন্ট্রোল

১০. ফর্ম বাটন (Button)

<button type="submit" class="btn btn-primary">সাবমিট</button>

বুটস্ট্রাপ ৫ btn ক্লাসের মাধ্যমে ফর্মের বাটনকে সুন্দরভাবে স্টাইল করে।

সারাংশ

বুটস্ট্রাপ ৫ ফর্ম এলিমেন্টস ব্যবহার করে আপনি সহজেই রেসপন্সিভ, সুন্দর ও ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে পারেন। বুটস্ট্রাপের প্রি-ডিফাইন্ড ক্লাস যেমন form-control, form-check, form-select ইত্যাদি ব্যবহার করে আপনি ফর্মের ইনপুট, বাটন এবং অন্যান্য উপাদানকে দ্রুত কাস্টমাইজ করতে পারবেন।

বুটস্ট্রাপ ৫ এর ফর্ম সিস্টেম আপনাকে সহজে এবং দ্রুতভাবে সুন্দর, রেসপন্সিভ ফর্ম তৈরি করতে সহায়তা করে। ফর্ম এলিমেন্টগুলোকে গ্রিড সিস্টেম ব্যবহার করে সাজানো হলে, ফর্মের লেআউট আরও কার্যকর এবং সহজে উপযুক্ত ডিভাইসের জন্য মানিয়ে যায়। এই টিউটোরিয়ালে, আমরা ফর্মের মৌলিক লেআউট এবং গ্রিড-বেসড ফর্ম তৈরি করার পদ্ধতি আলোচনা করব।

ফর্ম লেআউটস

বুটস্ট্রাপ ৫ এ ফর্ম এলিমেন্টগুলো সাধারণত form-control ক্লাস ব্যবহার করে সাজানো হয়। ফর্মের ইনপুট ফিল্ড, টেক্সট এরিয়া, সিলেক্ট ড্রপডাউন, চেকবক্স, রেডিও বাটন ইত্যাদি ব্যবহার করা যায়। আপনি ফর্মের এলিমেন্টগুলিকে form-group ক্লাস দিয়ে গঠন করতে পারেন, যা একটি গ্রুপ হিসেবে সাজায়।

উদাহরণ: বেসিক ফর্ম লেআউট

<div class="container">
    <form>
        <div class="form-group">
            <label for="exampleInputName">নাম</label>
            <input type="text" class="form-control" id="exampleInputName" placeholder="নাম লিখুন">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail">ইমেইল</label>
            <input type="email" class="form-control" id="exampleInputEmail" placeholder="ইমেইল লিখুন">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword">পাসওয়ার্ড</label>
            <input type="password" class="form-control" id="exampleInputPassword" placeholder="পাসওয়ার্ড লিখুন">
        </div>
        <button type="submit" class="btn btn-primary">সাবমিট</button>
    </form>
</div>

এখানে:

• form-control: ইনপুট ফিল্ডের জন্য স্টাইল ব্যবহার করা হয়েছে, যাতে এটি সুন্দর এবং রেসপন্সিভ হয়।
• form-group: ফর্ম এলিমেন্টকে গ্রুপ করার জন্য ব্যবহার করা হয়েছে, যাতে বিভিন্ন ইনপুট ফিল্ড একত্রে সজ্জিত হয়।

গ্রিড-বেসড ফর্মস

বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম ব্যবহার করে আপনি ফর্মের ইনপুট ফিল্ডগুলিকে বিভিন্ন সাইজের কলামে সাজাতে পারেন। এতে ফর্মটি রেসপন্সিভ হয়ে ওঠে এবং বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্তভাবে মানিয়ে যায়। গ্রিড সিস্টেমের col ক্লাস ব্যবহার করে আপনি ফর্মের ফিল্ডগুলোকে নির্দিষ্ট কলামে ভাগ করতে পারেন।

উদাহরণ: গ্রিড-বেসড ফর্ম

<div class="container">
    <form>
        <div class="form-row">
            <div class="col-md-6 form-group">
                <label for="firstName">প্রথম নাম</label>
                <input type="text" class="form-control" id="firstName" placeholder="প্রথম নাম লিখুন">
            </div>
            <div class="col-md-6 form-group">
                <label for="lastName">শেষ নাম</label>
                <input type="text" class="form-control" id="lastName" placeholder="শেষ নাম লিখুন">
            </div>
        </div>
        <div class="form-group">
            <label for="email">ইমেইল</label>
            <input type="email" class="form-control" id="email" placeholder="ইমেইল লিখুন">
        </div>
        <div class="form-group">
            <label for="message">বার্তা</label>
            <textarea class="form-control" id="message" rows="3" placeholder="আপনার বার্তা লিখুন"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">সাবমিট</button>
    </form>
</div>

এখানে:

• form-row: গ্রিডের জন্য সারি তৈরি করা হয়েছে, যাতে ইনপুট ফিল্ডগুলো সুন্দরভাবে সাজানো যায়।
• col-md-6: প্রতি ইনপুট ফিল্ডকে ৬ কলামে ভাগ করা হয়েছে, যাতে প্রতি সারিতে দুটি ইনপুট ফিল্ড থাকে। এর মাধ্যমে আপনি একাধিক ইনপুট ফিল্ডগুলোকে রেসপন্সিভভাবে বিভিন্ন সাইজে সাজাতে পারেন।

রেসপন্সিভ ফর্ম লেআউট

বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেমের মাধ্যমে ফর্মের ফিল্ডগুলিকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে সাজানো সম্ভব। উদাহরণস্বরূপ, আপনি ছোট স্ক্রীনে ফর্ম ফিল্ডগুলোকে পুরো প্রস্থে দিতে পারেন এবং বড় স্ক্রীনে একাধিক কলামে সাজাতে পারেন।

উদাহরণ: রেসপন্সিভ গ্রিড ফর্ম

<div class="container">
    <form>
        <div class="form-row">
            <div class="col-12 col-sm-6 col-md-4 form-group">
                <label for="firstName">প্রথম নাম</label>
                <input type="text" class="form-control" id="firstName" placeholder="প্রথম নাম লিখুন">
            </div>
            <div class="col-12 col-sm-6 col-md-4 form-group">
                <label for="lastName">শেষ নাম</label>
                <input type="text" class="form-control" id="lastName" placeholder="শেষ নাম লিখুন">
            </div>
            <div class="col-12 col-md-4 form-group">
                <label for="email">ইমেইল</label>
                <input type="email" class="form-control" id="email" placeholder="ইমেইল লিখুন">
            </div>
        </div>
        <div class="form-group">
            <label for="message">বার্তা</label>
            <textarea class="form-control" id="message" rows="3" placeholder="আপনার বার্তা লিখুন"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">সাবমিট</button>
    </form>
</div>

এখানে:

• col-12: ছোট স্ক্রীনে ফর্ম ফিল্ডগুলো পুরো প্রস্থে থাকবে।
• col-sm-6: ট্যাবলেট স্ক্রীনে দুটি ইনপুট ফিল্ড ৬ কলাম নিয়ে উপস্থাপন হবে।
• col-md-4: বড় স্ক্রীনে তিনটি ইনপুট ফিল্ড ৪ কলামে ভাগ হবে।

সারাংশ

বুটস্ট্রাপ ৫ এর গ্রিড সিস্টেম ব্যবহার করে ফর্ম লেআউট তৈরি করা খুবই সহজ এবং রেসপন্সিভ। আপনি ফর্ম এলিমেন্টগুলোকে গ্রিড সিস্টেমে সাজিয়ে বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত ফর্ম তৈরি করতে পারেন। form-group, form-control, এবং form-row ক্লাস ব্যবহার করে ফর্মের এলিমেন্টগুলোকে সুন্দরভাবে সাজানো সম্ভব, এবং col- ক্লাসের সাহায্যে ফর্ম ফিল্ডগুলোকে গ্রিড সিস্টেমে ভাগ করা যায়।

বুটস্ট্রাপ ৫ এ Validation এবং Custom Error Messages ব্যবহারের মাধ্যমে আপনি আপনার ফর্মের ইনপুটগুলোর সঠিকতা পরীক্ষা করতে পারেন এবং ব্যবহারকারীকে নির্দিষ্ট ত্রুটি বার্তা প্রদান করতে পারেন। বুটস্ট্র্যাপের প্রি-বিল্ট validation ক্লাস এবং সিএসএস এর মাধ্যমে ফর্মের ইন্টিগ্রিটি নিশ্চিত করা খুবই সহজ। এটি ব্যবহারকারীকে সঠিক ইনপুট দিতে সহায়তা করে এবং ভুল ইনপুট দিলে সহজেই ভুলগুলি চিহ্নিত করে দেখায়।

HTML ফর্ম Validation

বুটস্ট্রাপ ৫ এ ফর্মের ইনপুট ফিল্ডগুলির জন্য HTML5 validation অ্যাট্রিবিউটসমূহ এবং Bootstrap validation classes ব্যবহার করা হয়। required, pattern, minlength, maxlength ইত্যাদি বৈশিষ্ট্যগুলি ব্যবহার করে ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করা যায়।

১. ফর্মের ইনপুট Validations

Required validation: ইনপুট ফিল্ডটি অবশ্যই পূর্ণ হতে হবে।

Pattern validation: ইনপুটের মান একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে হবে।

minlength এবং maxlength: ইনপুটের সর্বনিম্ন এবং সর্বোচ্চ দৈর্ঘ্য নির্ধারণ করা।

<form>
  <div class="mb-3">
    <label for="name" class="form-label">নাম</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      নামটি অবশ্যই পূর্ণ করতে হবে।
    </div>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">ইমেইল</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      সঠিক ইমেইল ঠিকানা প্রদান করুন।
    </div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">পাসওয়ার্ড</label>
    <input type="password" class="form-control" id="password" minlength="6" required>
    <div class="invalid-feedback">
      পাসওয়ার্ড কমপক্ষে ৬ অক্ষরের হতে হবে।
    </div>
  </div>

  <button type="submit" class="btn btn-primary">সাবমিট</button>
</form>

এই কোডে, invalid-feedback ক্লাস ব্যবহার করে আপনি কাস্টম ত্রুটি বার্তা প্রদর্শন করতে পারেন। যখন ব্যবহারকারী ভুল ইনপুট দেয়, তখন এটি প্রদর্শিত হবে।

বুটস্ট্রাপ ৫ Validation ক্লাস

বুটস্ট্রাপ ৫ ফর্মে validation classes প্রদান করে যা আপনার ফর্মের ইনপুটগুলোকে সঠিকভাবে যাচাই করতে সহায়তা করে। বুটস্ট্রাপের was-validated ক্লাস ব্যবহৃত হলে, ইনপুট ফিল্ডের ত্রুটি হলে তা স্বয়ংক্রিয়ভাবে দেখানো হয়।

১. Valid এবং Invalid States

বুটস্ট্রাপ ৫ এর ইনপুট ফিল্ডগুলির জন্য দুইটি প্রধান স্টেট রয়েছে: valid এবং invalid। এটি ফিল্ডের সঠিকতা দেখাতে ব্যবহৃত হয়।

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">ব্যবহারকারীর নাম</label>
    <input type="text" class="form-control is-invalid" id="username" required>
    <div class="invalid-feedback">
      ব্যবহারকারীর নামটি আবশ্যক।
    </div>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">ইমেইল</label>
    <input type="email" class="form-control is-valid" id="email" required>
    <div class="valid-feedback">
      সঠিক ইমেইল ঠিকানা।
    </div>
  </div>

  <button type="submit" class="btn btn-primary">সাবমিট</button>
</form>

• is-valid: ইনপুট সঠিক হলে ব্যবহৃত হয়।
• is-invalid: ইনপুট ভুল হলে ব্যবহৃত হয়।

২. Custom Error Messages (কাস্টম ত্রুটি বার্তা)

যখন একটি ফর্ম ফিল্ডের ইনপুট ভুল হয়, তখন invalid-feedback ক্লাস ব্যবহার করে কাস্টম ত্রুটি বার্তা প্রদর্শিত হয়। আপনি এখানে আপনার নিজের বার্তা লিখতে পারেন যা ব্যবহারকারীকে সঠিক ইনপুট দেওয়ার জন্য নির্দেশনা দেয়।

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">ইমেইল</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      দয়া করে একটি সঠিক ইমেইল ঠিকানা দিন।
    </div>
  </div>

  <button type="submit" class="btn btn-primary">সাবমিট</button>
</form>

এখানে, invalid-feedback ক্লাসের মাধ্যমে ব্যবহারকারীর ভুল ইনপুটের জন্য কাস্টম বার্তা প্রদর্শিত হবে।

JavaScript সহ Validation

বুটস্ট্রাপ ৫ এর ফর্ম ভ্যালিডেশন কেবল HTML5 এর ইনপুট বৈশিষ্ট্যের মাধ্যমে কাজ করে না, এতে JavaScript কোডও যুক্ত করা যায়, যা ফর্মের সবগুলো ইনপুট যাচাই করতে সহায়তা করে।

উদাহরণ: ফর্ম ভ্যালিডেশন (JavaScript)

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">ব্যবহারকারীর নাম</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">
      ব্যবহারকারীর নাম আবশ্যক।
    </div>
  </div>

  <button type="submit" class="btn btn-primary">সাবমিট</button>
</form>

<script>
  (function() {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms)
      .forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
  })()
</script>

এই কোডটি JavaScript ব্যবহার করে ফর্মের ইনপুটের সঠিকতা পরীক্ষা করে এবং ত্রুটি থাকলে সেগুলো দেখায়।

সারাংশ

বুটস্ট্রাপ ৫ এ ফর্মের validation এবং custom error messages এর মাধ্যমে আপনি সহজেই আপনার ওয়েব ফর্মগুলোকে ব্যবহারকারী বান্ধব এবং সঠিক ইনপুট সংগ্রহ করার উপযোগী করতে পারেন। HTML5 এর ইনপুট বৈশিষ্ট্য এবং বুটস্ট্রাপের স্টাইলিং ক্লাসসমূহ একত্রে ব্যবহৃত হলে, ত্রুটি সনাক্তকরণ এবং ব্যবহারকারীকে সঠিক ইনপুট প্রদানের জন্য কার্যকরী সমাধান পাওয়া যায়।

বুটস্ট্রাপ ৫ ফর্ম উপাদানগুলোর জন্য স্টাইলিং প্রদান করে, যা File Inputs, Checkboxes, এবং Radio Buttons এর ব্যবহার এবং কাস্টমাইজেশনের জন্য অত্যন্ত সুবিধাজনক। এই উপাদানগুলো ইন্টারঅ্যাকটিভ ফর্ম ডিজাইনের জন্য গুরুত্বপূর্ণ এবং বুটস্ট্রাপ ৫ এ এগুলোর জন্য সহজ স্টাইলিং এবং কাস্টমাইজেশন সাপোর্ট রয়েছে।

File Inputs (ফাইল ইনপুট)

ফাইল ইনপুট ফিল্ড ব্যবহারকারীদের ফাইল আপলোড করতে দেয়। বুটস্ট্রাপ ৫ এ ফাইল ইনপুট স্টাইল করতে form-control ক্লাস ব্যবহার করা হয়, এবং এটি আরও আকর্ষণীয় করতে form-file ক্লাসের মাধ্যমে কাস্টমাইজ করা যায়।

উদাহরণ: ফাইল ইনপুট

<div class="mb-3">
    <label for="formFile" class="form-label">ফাইল নির্বাচন করুন</label>
    <input class="form-control" type="file" id="formFile">
</div>

কাস্টম ফাইল ইনপুট (বুটস্ট্রাপ ৫)

বুটস্ট্রাপ ৫ এ ফাইল ইনপুটের জন্য একটি কাস্টম স্টাইলিংও রয়েছে, যা ব্যবহারকারীকে আরো সুন্দর ফাইল সিলেকশন প্রদর্শন করতে সহায়তা করে।

<div class="mb-3">
    <label for="formFile" class="form-label">কাস্টম ফাইল নির্বাচন</label>
    <input class="form-control form-control-lg" type="file" id="formFile">
</div>

এখানে form-control-lg ব্যবহার করে ফাইল ইনপুটের সাইজ বড় করা হয়েছে। এছাড়া form-control ক্লাস দ্বারা স্টাইল করা হয়েছে।

Checkboxes (চেকবক্স)

বুটস্ট্রাপ ৫ এ চেকবক্সের স্টাইলিং অত্যন্ত সহজ। Checkboxes সাধারণত ব্যবহারকারীদের একটি বা একাধিক অপশন সিলেক্ট করতে দেয়। আপনি form-check ক্লাস ব্যবহার করে চেকবক্সগুলোকে সুন্দরভাবে ডিজাইন করতে পারেন।

উদাহরণ: চেকবক্স

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        আমি শর্তাবলী সম্মত
    </label>
</div>

এখানে:

• form-check-input ক্লাস চেকবক্স ইনপুটের জন্য ব্যবহার করা হয়েছে।
• form-check-label ক্লাস লেবেল টেক্সটের জন্য ব্যবহৃত।

কাস্টম চেকবক্স (স্টাইল)

বুটস্ট্রাপ ৫ এ কাস্টম চেকবক্স তৈরি করতে form-check-inline এবং form-check-label ক্লাস ব্যবহার করতে পারেন।

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheck1">
    <label class="form-check-label" for="inlineCheck1">
        চেকবক্স ১
    </label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheck2">
    <label class="form-check-label" for="inlineCheck2">
        চেকবক্স ২
    </label>
</div>

এখানে:

• form-check-inline ক্লাস ব্যবহার করে চেকবক্সগুলো এক লাইনে রাখা হয়েছে।

Radio Buttons (রেডিও বাটন)

Radio Buttons ব্যবহারকারীকে একাধিক অপশন থেকে একটি সিলেক্ট করতে দেয়। বুটস্ট্রাপ ৫ এ রেডিও বাটনগুলোর জন্য form-check ক্লাস ব্যবহার করা হয়, এবং এগুলো কাস্টম স্টাইলের জন্য form-check-input ক্লাস প্রয়োগ করা হয়।

উদাহরণ: রেডিও বাটন

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        অপশন ১
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        অপশন ২
    </label>
</div>

এখানে:

• form-check-input ক্লাস রেডিও বাটনের জন্য ব্যবহৃত।
• form-check-label ক্লাস রেডিও বাটনের লেবেল টেক্সটের জন্য ব্যবহৃত।
• name="exampleRadios": রেডিও বাটনগুলোর মধ্যে গ্রুপিং করার জন্য name অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যা একটি গ্রুপের মধ্যে একটি অপশন সিলেক্ট করতে সহায়তা করে।

কাস্টম রেডিও বাটন

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">অপশন ১</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">অপশন ২</label>
</div>

এখানে:

• form-check-inline ক্লাস ব্যবহার করা হয়েছে যাতে রেডিও বাটনগুলো এক লাইনে অবস্থান করে।

Summary

• File Inputs: ফাইল আপলোডের জন্য form-control ক্লাস ব্যবহার করে বুটস্ট্রাপ ৫ এ ফাইল ইনপুট ডিজাইন করা হয়।
• Checkboxes: চেকবক্স ডিজাইন করতে form-check এবং form-check-input ক্লাস ব্যবহার করা হয়। কাস্টম স্টাইলের জন্য form-check-inline ব্যবহার করা হয়।
• Radio Buttons: রেডিও বাটন ডিজাইন করতে form-check এবং form-check-input ক্লাস ব্যবহার করা হয়। একাধিক রেডিও বাটনকে গ্রুপ করার জন্য name অ্যাট্রিবিউট প্রয়োগ করা হয়।