Bootstrap 5 ফর্ম ফ্লোটিং লেবেল
- পূর্ববর্তী পৃষ্ঠা BS5 ইনপুট গ্রুপ
- পরবর্তী পৃষ্ঠা BS5 ফর্ম ভারিফিকেশন
ফ্লটিং ট্যাগ/এনিমেশন ট্যাগ
ডিফল্টভাবে, লেবেল (label) ব্যবহার করলে, তারা সাধারণত ইনপুট ফিল্ডের শীর্ষে দেখা যায়:
ফ্লটিং ট্যাগ ব্যবহার করে, আপনি ইনপুট ফিল্ডে ট্যাগ যোগ করতে পারেন এবং ইনপুট ফিল্ডের উপর ক্লিক করলে তারা ফ্লটিং/এনিমেশন হয়:
উদাহরণ
<div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="email" placeholder="প্রদেয় ই-মেল ঠিকানা" name="email"> <label for="email">ইমেল</label> </div> <div class="form-floating mt-3 mb-3"> <input type="text" class="form-control" id="pwd" placeholder="পাসওয়ার্ড ইনপুট করুন" name="pswd"> <label for="pwd">পাসওয়ার্ড</label> </div>
ফ্লোটিং ট্যাগ সম্পর্কে নোটিশ:
<label> এলিমেন্টটি <input> এলিমেন্টের পরে থাকতে হবে, এবং প্রত্যেক <input> এলিমেন্টকে একটি হতে বাধ্যতামূলক placeholder প্রতিশব্দ (যদিও দেখানো হয় না)।
টেক্সটেইয়ারা
টেক্সট ফিল্ডেও প্রযোজ্য:
উদাহরণ
<div class="form-floating"> <textarea class="form-control" id="comment" name="text" placeholder="মন্তব্য এখানে যোগ করুন"></textarea> <label for="comment">মন্তব্য</label> </div>
পস্তক মেনু
আপনি অবশ্যই পস্তক মেনুতে "ফ্লোটিং ট্যাগ" ব্যবহার করতে পারেন। কিন্তু, তারা ফ্লোটিং/অ্যানিমেশন করবে না। ট্যাগ সর্বদা পস্তক মেনুর ডানদিকের উপরে অবস্থান করবে:
উদাহরণ
<div class="form-floating">
<select class="form-select" id="sel1" name="sellist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1" class="form-label">পস্তক চিহ্নিত করুন (একটি পস্তক চিহ্নিত করুন)：</label>
</div>
- পূর্ববর্তী পৃষ্ঠা BS5 ইনপুট গ্রুপ
- পরবর্তী পৃষ্ঠা BS5 ফর্ম ভারিফিকেশন
