گروه‌های ورودی در بوت استرپ (Input Group)

ورودی‌های تکی و ساده را فراموش کنید. گروه‌های ورودی (Input Groups) بوت‌استرپ ابزار شما برای ساخت تعاملات فرمی غنی‌تر و شهودی‌تر هستند. این گروه‌ها به شما اجازه می‌دهند عناصر مکمل — مانند متن، دکمه‌ها، منوهای کشویی و حتی چک‌باکس‌ها — را مستقیماً با کنترل‌های ورودی ترکیب کنید، زمینه‌ای فوری فراهم کنید و تجربه کاربری را بهبود ببخشید. بیایید روش‌های مختلف استفاده از این کامپوننت قدرتمند را بررسی کنیم:

سناریو ۱: افزودن واحدها و قالب‌بندی

فرض کنید نیاز دارید کاربران مقادیر، اندازه‌گیری‌ها یا آدرس‌های اینترنتی وارد کنند. گروه‌های ورودی در ارائه‌ی این زمینه‌ عالی عمل می‌کنند:

• ورودی ارزی: نمایش واضح نوع ارز.

<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="number" class="form-control" aria-label="Amount">
    <span class="input-group-text">.00</span>
</div>

• مشخص کردن واحد اندازه‌گیری:

<div class="input-group mb-3">
    <input type="number" class="form-control" aria-label="Weight">
    <span class="input-group-text">kg</span>
</div>

• نمایش پیشوند دامنه (URL):

<div class="input-group">
    <span class="input-group-text">https://</span>
    <input type="text" class="form-control" aria-label="Website URL">
</div>

ویژگی کلیدی: تراز بی‌دردسر
کلاس .input-group در بوت‌استرپ تضمین می‌کند که همه‌ی عناصر اضافه شده، کاملاً هم‌راستا با فیلد ورودی قرار بگیرند، بدون نیاز به CSS سفارشی برای تراز کردن.

سناریو ۲: ارتقای عملکرد ورودی

گاهی اوقات یک فیلد متنی ساده کافی نیست. گروه‌های ورودی به شما امکان می‌دهند اقدامات را مستقیماً تعبیه کنید:

• جستجو با دکمه: ارائه‌ی عمل فوری مانند “برو” یا “جستجو”.

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search..." aria-label="Search term">
    <button class="btn btn-outline-primary" type="button">Search</button>
</div>

• عملکردهای منوی کشویی: ارائه چندین عملیات مرتبط از طریق دکمه کشویی.

<div class="input-group">
    <input type="text" class="form-control" aria-label="Find related content">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Options</button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">View Details</a></li>
        <li><a class="dropdown-item" href="#">Edit</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Delete</a></li>
    </ul>
</div>

ویژگی کلیدی: ادغام دکمه‌ها
اتصال دکمه‌ها به ورودی ساده است و امکان تعامل فوری با کاربر را فراهم می‌کند.

سناریو ۳: ارائه گزینه‌های ورودی

برای ورودی‌های محدود شده، افزودن یک منوی کشویی به ورودی می‌تواند بسیار مؤثر باشد:

• انتخاب پیشوند/پسوند: اجازه دهید کاربر از گزینه‌های از پیش تعیین شده انتخاب کند.

<div class="input-group mb-3">
    <label class="input-group-text" for="prefixSelect">Prefix</label>
    <select class="form-select" id="prefixSelect">
        <option selected>Choose...</option>
        <option value="mr">Mr.</option>
        <option value="ms">Ms.</option>
        <option value="dr">Dr.</option>
    </select>
    <input type="text" class="form-control" aria-label="First name">
</div>

ویژگی کلیدی: پیوستن منوی انتخابی
ادغام بدون دردسر منوی کشویی برای کنترل ورودی یا انتخاب زمینه‌ای.

سناریو ۴: مدیریت انتخاب‌های بولی (بله/خیر)

اگرچه غیرمعمول‌تر است، اما می‌توانید چک‌باکس یا دکمه‌های رادیویی را هم اضافه کنید:

• تغییر ساده: افزودن چک‌باکس برای روشن/خاموش کردن سریع.

<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Toggle feature">
    </div>
    <input type="text" class="form-control" aria-label="Feature description (affected by toggle)">
</div>

ویژگی کلیدی: انعطاف‌پذیری
گروه‌های ورودی محدود به متن نیستند؛ می‌توانند عناصر مختلف فرم را هم در خود جای دهند.

فراتر از مبانی: سفارشی‌سازی و نکات مهم

• اندازه‌بندی: مانند سایر کنترل‌های فرم، می‌توانید از کلاس‌های .input-group-sm و .input-group-lg برای اندازه‌های مختلف استفاده کنید.
• چندین افزودنی: برای سناریوهای پیچیده‌تر، چندین عنصر اضافه شده را ترکیب کنید (مثلاً نماد ارز و مقدار ثابت).
• اعتبارسنجی: کلاس‌های اعتبارسنجی بوت‌استرپ (.is-valid, .is-invalid) به‌طور طبیعی روی گروه‌های ورودی اعمال می‌شوند.
• دسترس‌پذیری: همیشه اولویت را به دسترس‌پذیری بدهید. از ویژگی‌های aria-label و aria-describedby برای ارتباط روشن بین ورودی و عناصر اطراف استفاده کنید.

باز کردن الگوهای خاص رابط کاربری

فراتر از نمونه‌های استاندارد فکر کنید! گروه‌های ورودی می‌توانند پایه‌ای برای این موارد باشند:

• سازندگان URL قابل سفارشی‌سازی: انتخاب زیردامنه یا مسیر از طریق منوهای کشویی.
• فیلتر تعاملی: اضافه کردن معیارهای فیلترینگ به جستجو.
• ورودی قالب‌بندی شده: راهنمایی کاربران از طریق نشانه‌های تصویری (مثلاً قالب تاریخ).

نتیجه‌گیری: زمینه حرف اول را می‌زند

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