برچسب‌های شناور فرم‌های Bootstrap 5

برچسب‌های شناور/برچسب‌های آنی‌سازی

به طور پیش‌فرض، هنگام استفاده از برچسب (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 ویژگی‌ها (حتی اگر نمایش داده نشوند).

Textarea

همچنین برای فیلد‌های متن نیز صدق می‌کند:

مثال

<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>

آزمایش کنید