چک‌باکس‌ها و دکمه‌های رادیویی: راهنمای کامل بوت‌استرپ

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

پایه‌ها: استایل پایه‌ی چک‌باکس و رادیو در بوت‌استرپ

استفاده از کلاس‌های زیر باعث ساختاریافته‌شدن و زیباسازی این عناصر می‌شود:

.form-check: یک کانتینر برای هر چک‌باکس یا رادیو به همراه لیبل آن. این کلاس فاصله‌گذاری و چینش یکسانی فراهم می‌کند. ضروری است که <input> و <label> هر دو درون عنصری با این کلاس قرار بگیرند.
.form-check-input: برای تگ <input> از نوع چک‌باکس یا رادیو. این کلاس استایل پایه برای نشانگر چک یا دایره رادیویی را فراهم می‌کند.
.form-check-label: برای تگ <label> مربوط به چک‌باکس یا رادیو. این کلاس متن لیبل را بهتر استایل می‌دهد و ناحیه کلیک‌پذیر را افزایش می‌دهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Checks and Radios</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 Checkboxes</h2>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
            <label class="form-check-label" for="defaultCheck1">
                Default checkbox
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
            <label class="form-check-label" for="defaultCheck2">
                Disabled checkbox
            </label>
        </div>

        <h2 class="mt-3">Basic Radio Buttons</h2>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
            <label class="form-check-label" for="exampleRadios1">
                Default radio
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
            <label class="form-check-label" for="exampleRadios2">
                Second radio
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
            <label class="form-check-label" for="exampleRadios3">
                Disabled radio
            </label>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

چک‌باکس‌ها و دکمه‌های رادیویی: راهنمای کامل بوت‌استرپ

نمایش چک‌باکس‌ها و رادیوها به‌صورت درون‌خطی

با افزودن کلاس .form-check-inline به کانتینر، می‌توانید این کنترل‌ها را در یک خط در کنار هم نمایش دهید.

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
</div>

سویچ‌ها: چک‌باکس‌هایی به سبک سوئیچ

برای نمایش چک‌باکس‌ها به شکل سویچ (روشن/خاموش)، از کلاس .form-switch در کنار .form-check استفاده می‌شود.

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>

یکپارچه‌سازی با فرم‌ها و سیستم گرید بوت‌استرپ

چک‌باکس‌ها و دکمه‌های رادیویی مانند سایر کنترل‌های فرم، می‌توانند به‌راحتی درون سیستم گرید بوت‌استرپ قرار بگیرند. با استفاده از کلاس‌هایی مانند .row و .col-md-*، آن‌ها را در ستون‌های مناسب جای دهید.

<form class="row g-3 mt-4">
    <div class="col-md-6">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="gridCheck1">
            <label class="form-check-label" for="gridCheck1">
                Option 1
            </label>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="gridSwitch1">
            <label class="form-check-label" for="gridSwitch1">
                Enable Feature
            </label>
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadio1" value="option1" checked>
            <label class="form-check-label" for="gridRadio1">
                First radio
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadio2" value="option2">
            <label class="form-check-label" for="gridRadio2">
                Second radio
            </label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

مدیریت وضعیت‌ها: غیرفعال و فقط خواندنی

غیرفعال (disabled): با افزودن ویژگی disabled به <input>، کنترل به حالت غیرفعال می‌رود و خاکستری نمایش داده می‌شود. لیبل نیز ظاهر غیرفعال خواهد داشت.
فقط‌خواندنی (readonly): به‌صورت پیش‌فرض برای چک‌باکس‌ها/رادیوها پشتیبانی نمی‌شود اما می‌توان با CSS ظاهرشان را تغییر داد. در HTML، چک‌باکس readonly معمولاً معنایی ندارد زیرا قابل تغییر نیست.

حالت‌های اعتبارسنجی (.is-valid و .is-invalid)

بوت‌استرپ قابلیت نمایش وضعیت اعتبارسنجی را برای چک‌باکس‌ها و رادیوها نیز دارد:

.is-valid: مرز سبز و آیکون تأیید.
.is-invalid: مرز قرمز و آیکون خطا.
از .valid-feedback و .invalid-feedback برای نمایش پیام‌های مربوطه استفاده کنید.

<form class="mt-4 needs-validation" novalidate>
    <div class="form-check">
        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">
            Agree to terms and conditions
        </label>
        <div class="invalid-feedback">
            You must agree before submitting.
        </div>
    </div>

    <div class="mt-3">
        <div class="form-check">
            <input class="form-check-input is-valid" type="radio" name="validRadio" id="validRadio1" required>
            <label class="form-check-label" for="validRadio1">
                Option one
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="validRadio" id="validRadio2" required>
            <label class="form-check-label" for="validRadio2">
                Option two
            </label>
        </div>
        <div class="valid-feedback">More than one option is not valid here.</div>
    </div>

    <button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>

سفارشی‌سازی پیشرفته و نکات قابل توجه

سفارشی‌سازی ظاهر

اگر ظاهر پیش‌فرض کافی نیست، می‌توانید با CSS سفارشی ظاهر چک‌باکس‌ها و دکمه‌های رادیویی را با هدف طراحی خاص خود تغییر دهید. برای مثال می‌توان از ::before برای اضافه‌کردن استایل خاص استفاده کرد.

دسترسی‌پذیری

برای اطمینان از دسترس‌پذیر بودن کنترل‌ها:

لیبل‌های واضح: همیشه از <label> متصل به <input> با ویژگی for استفاده کنید.
ناوبری با کیبورد: مرورگرها به‌طور پیش‌فرض از کلید Tab و Space برای جابه‌جایی و انتخاب استفاده می‌کنند.
گروه‌بندی منطقی: در رادیو باتن‌ها، استفاده از name یکسان برای گروه‌بندی الزامی‌ست. برای گروه‌بندی معنایی از <fieldset> و <legend> استفاده کنید.
کنتراست کافی: اطمینان حاصل کنید که رنگ‌ها برای افراد با بینایی ضعیف نیز مناسب باشند.

تعامل با جاوااسکریپت

برای مثال، فعال‌سازی/غیرفعال‌سازی عناصر دیگر فرم بر اساس وضعیت چک‌باکس‌ها نیازمند کدنویسی جاوااسکریپت است. می‌توانید با استفاده از Event Listenerها این تعاملات را پیاده‌سازی کنید.

ایده‌هایی خاص برای طراحی چک‌باکس و رادیو با بوت‌استرپ

تبدیل به دکمه‌ها: با CSS می‌توان ظاهر چک‌باکس یا رادیو را شبیه دکمه‌ها کرد.
استفاده از آیکون‌ها: از آیکون‌های بوت‌استرپ یا Font Awesome برای جذابیت بیشتر استفاده کنید.
چیدمان کارت‌مانند: گروه‌های چک‌باکس یا رادیو را درون کارت‌های بوت‌استرپ قرار دهید.
فرم‌های چندمرحله‌ای: از چک‌باکس‌ها برای نمایش مراحل انجام‌شده استفاده کنید.
استفاده از رنگ‌های زمینه‌ای: با کمک کلاس‌های رنگی بوت‌استرپ (مثلاً bg-success، text-primary) چک‌باکس‌ها را به شکل خاص‌تری درآورید.

نتیجه‌گیری: انتخاب‌پذیری بهتر با چک‌باکس و رادیو در بوت‌استرپ

بوت‌استرپ ابزارهای ساختاریافته و منعطفی برای طراحی چک‌باکس‌ها و رادیوها در فرم‌ها فراهم می‌کند. با تسلط بر کلاس‌های اصلی مانند .form-check, .form-check-input و .form-check-label و درک نحوه‌ی استفاده از گرید و اعتبارسنجی، می‌توانید کنترل‌هایی کاربرپسند و حرفه‌ای بسازید. همواره به دسترس‌پذیری توجه داشته باشید و در صورت نیاز از CSS و جاوااسکریپت برای سفارشی‌سازی بیشتر بهره بگیرید.