عناوين النصوص المنغصلة 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>

جربها بنفسك