1️⃣ Basic Floating Label

• کلاس‌ها:

  • form-floating → والد برای فعال کردن حالت شناور

  • form-control → خود input

  • label → متن لیبل

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">ایمیل</label>
</div>

• placeholder الزامی است ولی دیده نمی‌شود، فقط برای پشتیبانی از مرورگر استفاده می‌شود

2️⃣ Floating Label برای Password

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">رمز عبور</label>
</div>

• مناسب برای فرم‌های ورود و ثبت‌نام

3️⃣ Textarea با Floating Label

<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
  <label for="floatingTextarea">پیام شما</label>
</div>

• برای متن طولانی یا کامنت

4️⃣ Floating Labels در فرم‌های چندتایی (Stacked)

<form>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingName" placeholder="Name">
    <label for="floatingName">نام</label>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
    <label for="floatingEmail">ایمیل</label>
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

• حالت Stack باعث می‌شود لیبل‌ها به صورت شناور روی هر input قرار گیرند

5️⃣ Floating Labels با Select

<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>انتخاب کنید</option>
    <option value="1">گزینه ۱</option>
    <option value="2">گزینه ۲</option>
    <option value="3">گزینه ۳</option>
  </select>
  <label for="floatingSelect">گزینه‌ها</label>
</div>

• لیبل شناور روی select هم کار می‌کند

✅ نکات مهم

• لیبل‌ها وقتی input خالی است داخل input و وقتی کاربر تایپ می‌کند بالا می‌روند

• کلاس form-floating باید والد input باشد

• می‌توان textarea و select را هم با این سبک استفاده کرد

• ظاهر مدرن و کاربر پسند برای فرم‌های ورود و ثبت‌نام