برچسب‌های شناور در بوت استرپ (Floating labels)

برچسب‌های شناور در Bootstrap روشی منحصربه‌فرد و جذاب برای مدیریت برچسب‌های فرم ارائه می‌دهند. برخلاف روش سنتی که برچسب‌ها بالای فیلد ورودی یا کنار آن قرار می‌گیرند، در این روش برچسب به‌صورت جای‌نگهدار (placeholder) درون فیلد ظاهر می‌شود. به‌محض اینکه کاربر شروع به تایپ کند یا مقداری را انتخاب نماید، برچسب به‌نرمی به بالای فیلد “شناور” می‌شود و بدون اشغال فضای اضافه، زمینه‌ای واضح برای ورودی فراهم می‌آورد. این راهنمای جامع به بررسی سازوکار، مزایا، پیاده‌سازی، سفارشی‌سازی و ملاحظات دسترسی (accessibility) در سیستم برچسب‌های شناور Bootstrap می‌پردازد.

ساختار و سازوکار

اثر برچسب شناور از ترکیب ساختار HTML و موقعیت‌دهی CSS حاصل می‌شود. اجزای اصلی آن عبارتند از:

مخزن .form-floating: عنصر <input>، <textarea> یا <select> به همراه <label> مربوطه درون یک <div> با کلاس .form-floating قرار می‌گیرند. این مخزن زمینه موقعیتی را فراهم می‌کند.
کلاس‌های .form-control یا .form-select: عناصر ورودی همانند همیشه از کلاس‌های فرم استاندارد Bootstrap استفاده می‌کنند.
برچسب <label>: عنصر برچسب نقش کلیدی دارد. در ابتدا مانند یک جای‌نگهدار درون ورودی ظاهر می‌شود. ویژگی for در برچسب باید با id عنصر ورودی متناظر باشد.
ترنزیشن و تبدیل CSS: Bootstrap به کمک ترنزیشن‌ها و تبدیل‌ها، برچسب را به‌صورت نرم به بالا منتقل می‌کند و اندازه‌اش را کاهش می‌دهد تا اثر “شناوری” ایجاد شود.

نمونه کد ساده:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Floating Label</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Floating Label</h2>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">Password</label>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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

کاهش آشفتگی بصری: در حالت اولیه فضای اضافه‌ای اشغال نمی‌شود.
زمینه‌سازی واضح در هنگام فوکوس: برچسب حتی پس از تایپ، باقی می‌ماند و یادآوری واضحی از نوع ورودی است.
کارآمدی فضایی: به‌ویژه در فرم‌های متراکم یا صفحات کوچک مفید است.
زیبایی مدرن: جلوه‌ای تمیز و معاصر به فرم می‌بخشد.

تطبیق‌پذیری شناور: پیاده‌سازی در انواع ورودی‌ها

ورودی‌های متنی: مانند <input type="text"> یا <input type="email"> رایج‌ترین استفاده.
رمز عبور: در <input type="password"> نیز به‌خوبی عمل می‌کند.
متن چندخطی:

<div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

منوهای انتخاب (Select):

<div class="form-floating">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Works with selects</label>
</div>

گزینه‌های سفارشی‌سازی

رنگ: از ابزارهای رنگ Bootstrap یا CSS دلخواه برای تغییر رنگ برچسب استفاده کنید.
اندازه فونت: برای تاکید یا ظرافت بیشتر قابل تنظیم است.
موقعیت‌یابی: با CSS پیشرفته می‌توان موقعیت برچسب را کمی تغییر داد.
انیمیشن: مدت زمان و حالت انیمیشن ترنزیشن قابل تنظیم است.

ملاحظات دسترسی

ویژگی for در <label>: باید با id ورودی متناظر باشد تا توسط screen reader‌ها تشخیص داده شود.
ویژگی placeholder: وجود آن توصیه می‌شود، حتی اگر به محض تایپ مخفی شود.
کنتراست رنگ: برچسب در حالت شناور باید با زمینه ورودی کنتراست کافی داشته باشد.
ویژگی‌های ARIA: در موارد پیچیده‌تر از ویژگی‌هایی مانند aria-labelledby استفاده شود.

کاربردهای خاص

رابط‌های مینیمالیستی: حالت اولیه برچسب با طراحی‌های ساده هماهنگ است.
فرم‌های موبایل‌محور: بهره‌وری فضایی آنها در صفحات کوچک مهم است.
فرم‌های دارای تم: رنگ و انیمیشن برچسب می‌تواند با برندینگ اپ هماهنگ شود.
استفاده با گروه‌های ورودی:

<div class="form-floating mb-3">
    <div class="input-group">
        <span class="input-group-text">$</span>
        <input type="number" class="form-control" id="floatingInputGroup" placeholder="Amount">
        <label for="floatingInputGroup">Amount</label>
    </div>
</div>

بهترین شیوه‌ها

یکپارچگی در استفاده: از این سیستم به‌صورت سازگار در کل اپلیکیشن استفاده کنید.
پرهیز از استفاده بیش از حد: در فیلدهایی با توضیح طولانی مناسب نیست.
تست کامل: عملکرد در مرورگرها و دستگاه‌های مختلف بررسی شود.
توجه به دسترسی‌پذیری: فارغ از ظاهر، HTML پایه باید کاملاً در دسترس باشد.

جمع‌بندی: ارتقاء تجربه کاربری با برچسب‌های شناور

برچسب‌های شناور در Bootstrap راهکاری مدرن و کارآمد برای برچسب‌گذاری در فرم‌ها هستند. با درک سازوکار آن، بهره‌گیری از انعطاف‌پذیری آن‌ها و رعایت اصول دسترسی، می‌توان فرم‌هایی کاربرپسند، زیبا و واضح طراحی کرد. حرکت ملایم برچسب به سمت بالا، نشان‌دهنده ارتقاء تجربه کاربری است؛ تجربه‌ای که حس پویایی و سادگی را همزمان منتقل می‌کند.