Bootstrap 5 FormsLesson 39Preview gratis
BS5 Floating Labels
Lesson ini bagian dari Bootstrap · Semua level
Ringkasan
Floating label membuat label terlihat melayang di atas kolom isian ketika pengguna mengisi atau fokus, menghemat ruang sekaligus tetap informatif. Caranya, bungkus <input> dan <label> dengan .form-floating dan pastikan label ditulis setelah input. Elemen ini mendukung input, select, dan textarea.
Poin kunci
- .form-floating membingkai input dan label floating.
- Urutan wajib: <input> lalu <label> di dalam .form-floating.
- Tinggi elemen .form-floating cukup besar agar label punya ruang melayang.
- Mendukung input, textarea, dan select.
- Placeholder tetap diperlukan agar perilaku label sesuai desain.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.