📘 Bootstrap 5 – Forms (بخش اول)

1️⃣ Overview (مرور کلی فرم‌ها)

• فرم‌ها در Bootstrap 5 کاملاً Flexbox-based هستند
• اکثر استایل‌ها با کلاس‌ها انجام می‌شود نه با CSS دستی
• ساختار استاندارد:

<form>
  <div class="mb-3">
    <label class="form-label">...</label>
    <input class="form-control">
  </div>
</form>

کلاس‌های پرکاربرد عمومی:

• mb-* → فاصله عمودی بین فیلدها
• form-label → استایل label
• form-text → متن راهنما زیر input

2️⃣ form-control

برای ورودی‌های متنی استفاده می‌شود.

<input type="text" class="form-control">
<textarea class="form-control"></textarea>

نکات مهم:

• ❌ برای submit, button, checkbox, radio استفاده نمی‌شود
• حالت غیرفعال:

<input class="form-control" disabled>

• فقط خواندنی:

<input class="form-control" readonly>

3️⃣ Select

برای لیست‌های کشویی استفاده می‌شود.

<select class="form-select">
  <option>گزینه ۱</option>
</select>

کلاس‌ها:

• form-select → جایگزین form-control برای select
• سایزبندی:

  • form-select-sm
    form-select-lg

❌ استفاده از form-control برای select اشتباه است.

4️⃣ Checkboxes & Radios

برای انتخاب‌های تیک‌دار استفاده می‌شوند.

ساختار استاندارد:

<div class="form-check">
  <input class="form-check-input" type="checkbox">
  <label class="form-check-label">موافقم</label>
</div>

کلاس‌های مهم:

• form-check → کانتینر
• form-check-input → input
• form-check-label → متن کنار input

Radio:

<input class="form-check-input" type="radio" name="gender">

نکات مهم Check & Radio 📝

• برای ردیفی کردن:

<div class="form-check form-check-inline">

• غیرفعال:

<input class="form-check-input" disabled>

• مقدار پیش‌فرض انتخاب‌شده:

<input class="form-check-input" checked>

📌 جمع‌بندی خیلی مهم

• form-control → فقط ورودی‌های متنی
• form-select → فقط select
• form-check-input → checkbox و radio
• btn → دکمه‌ها و submit