فرم‌ در Bootstrap

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

پایه: ساختار و استایل‌دهی ابتدایی فرم‌ها

Bootstrap استایل اولیه‌ای برای عناصر استاندارد HTML فرم مانند <form>, <input>, <textarea>, <select>, <button> و غیره ارائه می‌دهد تا ظاهر یکدست‌تر و زیباتری بین مرورگرها ایجاد کند. نکات کلیدی:

فونت و فاصله‌گذاری یکدست: فونت‌ها استاندارد شده‌اند و فاصله‌گذاری پیش‌فرض منطقی برای عناصر فرم اعمال می‌شود.
ظاهر بهتر ورودی‌ها: فیلدهای ورودی دارای گوشه‌های گرد، حاشیه ظریف و استایل تمرکز (focus) بهبود یافته هستند.
عرض کامل به صورت پیش‌فرض: کنترل‌های فرم معمولاً در سیستم گرید 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 Form</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 Form</h2>
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ساختاردهی فرم‌ در Bootstrap: چیدمان و سیستم گرید

سیستم گرید Bootstrap ابزاری کلیدی برای ساخت فرم‌های انعطاف‌پذیر و واکنش‌گرا است. می‌توانید عناصر فرم را مانند سایر محتواها در ردیف‌ها و ستون‌ها بچینید.

چیدمان پایه گرید: با استفاده از کلاس‌های .row و .col-* می‌توانید برچسب‌ها و کنترل‌ها را در صفحه‌های بزرگ کنار هم و در صفحه‌های کوچک به صورت پشته‌ای نمایش دهید.

<form class="row g-3">
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>California</option>
            <option>Texas</option>
            </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
</form>

گروه‌های فرم (`.mb-3`)

کلاس .mb-3 معمولاً برای ایجاد فاصله عمودی بین برچسب و ورودی استفاده می‌شود که خوانایی فرم را افزایش می‌دهد.

متن کمکی فرم‌ها (`.form-text`)

کلاس .form-text برای نمایش متن راهنما در زیر فیلدهای ورودی استفاده می‌شود. با استفاده از aria-describedby می‌توانید این متن را با فیلد ورودی مرتبط کنید.

برچسب‌ها (`.form-label`)

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

کنترل‌های خاص فرم‌ در Bootstrap و استایل‌دهی:

انواع ورودی‌ها: ورودی‌هایی مثل متن، ایمیل، رمز عبور، عدد، تاریخ و فایل با کلاس .form-control استایل یکسان و زیبایی می‌گیرند.

منوهای انتخاب (<select> با .form-select): کلاس .form-select برای استایل‌دهی منوی کشویی استفاده می‌شود.

<label for="exampleFormControlSelect1" class="form-label">Example select</label>
<select class="form-select" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

نواحی متنی (<textarea> با .form-control): برای وارد کردن متن چند خطی استفاده می‌شود. می‌توانید با ویژگی rows ارتفاع آن را کنترل کنید.

<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

چک‌باکس و دکمه‌های رادیویی: درون کانتینر .form-check می‌توانید چک‌باکس‌ها و رادیوها را با استایل سفارشی نمایش دهید.

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        Default checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
    <label class="form-check-label" for="flexRadioDefault1">
        Default radio
    </label>
</div>

چک‌باکس‌ها و رادیوهای خطی (.form-check-inline): برای نمایش کنار هم چک‌باکس‌ها یا رادیوها.

ورودی بازه‌ای (input[type="range"] با .form-range): استایل زیبا برای اسلایدر عددی.

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

سوئیچ‌ها (.form-check-switch): چک‌باکس‌هایی با ظاهر سوئیچ.

<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>

ورودی فایل: با کلاس .form-control استایل‌دهی زیبا برای آپلود فایل.

<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">

ورودی رنگ (type="color" با .form-control-color): انتخاب‌گر رنگ استایل‌شده.

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

اعتبارسنجی فرم‌ها: بازخورد کاربر

Bootstrap استایل‌های داخلی برای نمایش وضعیت اعتبارسنجی دارد:

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

<div class="mb-3">
    <label for="validationServer01" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
    <div class="valid-feedback">
        Looks good!
    </div>
</div>
<div class="mb-3">
    <label for="validationServer02" class="form-label">Last name</label>
    <input type="text" class="form-control is-invalid" id="validationServer02" value="" required>
    <div class="invalid-feedback">
        Please provide a valid last name.
    </div>
</div>

توجه: برای اعتبارسنجی واقعی باید از منطق سمت سرور یا جاوااسکریپت سمت کاربر استفاده کنید.

API اعتبارسنجی مرورگر: Bootstrap با API داخلی مرورگر (مثل ویژگی‌های required, pattern, minlength) سازگار است.

چیدمان‌های پیشرفته فرم و سفارشی‌سازی:

فرم‌های افقی: برچسب در سمت چپ و فیلد در سمت راست در صفحه‌های بزرگ. با استفاده از کلاس‌های .row و .col-*.

برچسب‌های شناور (.form-floating): برچسب هنگام فوکوس یا ورود داده بالا می‌رود.

<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>

اندازه فرم‌ها: با استفاده از .form-control-sm, .form-control-lg و معادل‌های آن برای select.

ورودی فقط‌خواندنی: استفاده از .form-control-plaintext برای نمایش اطلاعات به صورت ساده و بدون قابلیت ویرایش.

ملاحظات دسترسی‌پذیری در فرم‌ها:

استفاده صحیح از <label> با ویژگی for برای ارتباط با ورودی‌ها
پیام‌های خطای واضح با .invalid-feedback
استفاده از ویژگی‌های ARIA مثل aria-describedby, aria-invalid
امکان حرکت کامل در فرم با صفحه‌کلید
حفظ یا طراحی مناسب برای فوکوس‌بینی

ایده‌هایی برای طراحی خلاقانه فرم با Bootstrap:

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

نتیجه‌گیری: ساخت تجربه‌های تعاملی با فرم‌های Bootstrap

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

برای مطالعه بیشتر می توانید به سایت مرجع مراجعه نمایید.