Bootstrap 5 ফর্ম
- পূর্ববর্তী পৃষ্ঠা BS5 ফ্লেক্স
- পরবর্তী পৃষ্ঠা BS5 সিলেকশন মেনু
স্ট্যাক ফর্ম
সকল .form-control ক্লাস সম্পন্ন <input> এবং <textarea> ইউনিটগুলি সঠিক ফর্ম শৈলী পাবে:
প্রকল্প
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">ইমেইল：</label>
<input type="email" class="form-control" id="email" placeholder="ইমেইল ঠিকানা প্রবেশ করুন" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">পাসওয়ার্ড：</label>
<input type="password" class="form-control" id="pwd" placeholder="পাসওয়ার্ড প্রবেশ করুন" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> মনে রাখুন
</label>
</div>
<button type="submit" class="btn btn-primary">জমা দিন</button>
</form>
আরও আপনাকে মনে রাখুন, আমরা প্রত্যেক লেবেল ইলেকমেন্টে .form-label শ্রেণী নির্ধারিত হয়েছে যাতে সঠিক পূর্ণ হোক
চেকবক্সগুলির বিভিন্ন টাগস রয়েছে। তারা .form-check শ্রেণীর কন্টেনার ইলেকমেন্ট বেষ্টিত .form-check-label শ্রেণী, এবং চেকবক্স এবং রেডিও বটনগুলি শ্রেণী ব্যবহার করে .form-check-input。
Textarea
প্রকল্প
<label for="comment">মন্তব্য：</label> <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
ফর্ম সারিগুলি / গ্রিড (ইনলাইন ফর্ম)
যদি আপনি ফর্ম ইলেকমেন্টগুলিকে একসাথে দেখতে চান .row এবং .col：
প্রকল্প
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="ইমেইল ঠিকানা প্রবেশ করুন" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="পাসওয়ার্ড প্রবেশ করুন" name="pswd">
</div>
</div>
</form>
আপনি করবেন ব্রস্টক গ্রিড শ্রেণীতে সংখ্যা এবং দাঁড়াওয়ার বিষয়ে আরও শিখুন
ফর্ম কন্ট্রোল মাপ
আপনি ব্যবহার করতে পারেন .form-control-lg বা .form-control-sm পরিবর্তন .form-control ইনপুট কন্ট্রোলের মাপ
প্রকল্প
<input type="text" class="form-control form-control-lg" placeholder="বড় ইনপুট কন্ট্রোল"> <input type="text" class="form-control" placeholder="সাধারণ ইনপুট কন্ট্রোল"> <input type="text" class="form-control form-control-sm" placeholder="ছোট ইনপুট কন্ট্রোল">
ডিসেবল এবং readonly
ডিসেবল এবং/অথবা readonly অ্যাট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডকে ডিসেবল করুন
প্রকল্প
<input type="text" class="form-control" placeholder="সাধারণ ইনপুট কন্ট্রোল"> <input type="text" class="form-control" placeholder="ডিসেবল ইনপুট কন্ট্রোল" disabled> <input type="text" class="form-control" placeholder="রোমান্টিক ইনপুট কন্ট্রোল" readonly>
স্বতন্ত্র টেক্সট ইনপুট
এটা ব্যবহার করুন .form-control-plaintext ক্লাস ব্যবহার করে কিন্তু সঠিক মার্গ এবং মাঝারি মার্গ সংরক্ষিত করে কোন হুক না থাকা ইনপুট ফিল্ডের স্টাইল সেট করুন
প্রকল্প
<input type="text" class="form-control-plaintext" placeholder="স্বতন্ত্র টেক্সট ইনপুট"> <input type="text" class="form-control" placeholder="সাধারণ ইনপুট কন্ট্রোল">
পিককাস্টার
type="color" ইনপুট স্টাইল সঠিকভাবে সেট করতে, এটা ব্যবহার করুন .form-control-color শ্রেণী:
প্রকল্প
<input type="color" class="form-control form-control-color" value="#CCCCCC">
- পূর্ববর্তী পৃষ্ঠা BS5 ফ্লেক্স
- পরবর্তী পৃষ্ঠা BS5 সিলেকশন মেনু
