BS5 suzuvchi yorliqlar
Suzuvchi yorliqlar / animatsiyali yorliqlar (floating labels)
Standart holatda yorliqlar (label) odatda kiritish maydonining tepasida ko‘rinadi:
Suzuvchi yorliqlar yordamida yorliqni kiritish maydoni ichiga joylashtirishingiz va kiritish maydoni bosilganda uning suzib chiqishi/animatsiyalanishini ta’minlashingiz mumkin:
Misol
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label for="pwd">Password</label>
</div>
O‘zingiz sinab ko‘ring »
Suzuvchi yorliqlar haqida eslatmalar: <label> elementlari <input> elementidan keyin kelishi kerak va har bir <input> elementi uchun placeholder atributi majburiy (garchi u ko‘rsatilmasa ham).
Textarea
Bu textarea’lar uchun ham ishlaydi:
Misol
<div class="form-floating">
<textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
<label for="comment">Comments</label>
</div>
O‘zingiz sinab ko‘ring »
Tanlash menyulari
"Floating-labels"dan tanlash menyularida ham foydalanishingiz mumkin. Biroq ular suzib chiqmaydi/animatsiyalanmaydi. Yorliq har doim tanlash menyusi ichida, yuqori chap burchakda ko‘rinadi:
Misol
<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">Select list (select one):</label>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!