📌 فرم‌ها برای دریافت اطلاعات از کاربر استفاده می‌شوند و Bootstrap 5 امکانات متنوعی برای طراحی سریع، واکنش‌گرا و زیبا ارائه می‌دهد.

1️⃣ Basic Form (فرم ساده)

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">ایمیل</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="example@email.com">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">رمز عبور</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

• کلاس form-control → برای استایل‌دهی به input

• form-label → استایل‌دهی به label

2️⃣ Floating Labels (لیبل شناور)

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="ایمیل">
  <label for="floatingInput">ایمیل</label>
</div>
<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="رمز عبور">
  <label for="floatingPassword">رمز عبور</label>
</div>

• لیبل به صورت شناور روی input ظاهر می‌شود.

• زیبا و مدرن، مخصوص فرم‌های ورود و ثبت‌نام.

3️⃣ Form Check (چک‌باکس و رادیو)

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    چک‌باکس پیش‌فرض
  </label>
</div>

<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">
    رادیو انتخاب ۱
  </label>
</div>

• کلاس form-check → بلوک چک‌باکس یا رادیو

• form-check-input → استایل ورودی

• form-check-label → استایل label

4️⃣ Select / Dropdown

<select class="form-select mb-3" aria-label="Default select example">
  <option selected>انتخاب کنید</option>
  <option value="1">گزینه ۱</option>
  <option value="2">گزینه ۲</option>
  <option value="3">گزینه ۳</option>
</select>

• کلاس form-select → استایل زیبا برای select

• می‌توان از size="sm" یا size="lg" برای کوچک یا بزرگ کردن استفاده کرد

5️⃣ Input Group (گروه ورودی)

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

• ترکیب چند عنصر در یک خط

• استفاده از آیکون، متن یا دکمه کنار input

6️⃣ Disabled / Readonly Inputs

<input type="text" class="form-control" placeholder="غیر فعال" disabled>
<input type="text" class="form-control" placeholder="فقط خواندنی" readonly>

• disabled → غیر فعال

• readonly → فقط خواندنی

7️⃣ Validation (اعتبارسنجی فرم)

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <input type="text" class="form-control" placeholder="نام" required>
    <div class="invalid-feedback">
      لطفاً نام خود را وارد کنید.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

• needs-validation → فعال کردن اعتبارسنجی Bootstrap

• invalid-feedback → پیام خطا

8️⃣ Horizontal Form (فرم افقی)

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">رمز عبور</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

• استفاده از کلاس‌های Grid بوت‌استرپ برای فرم افقی

• col-form-label → استایل label در فرم افقی

✅ نکات مهم

• کلاس‌های form-control, form-select, form-check, form-floating و input-group مهم‌ترین کلاس‌ها هستند.

• فرم‌ها با Utilities بوت‌استرپ ترکیب می‌شوند تا فاصله، رنگ و اندازه را کنترل کنید.

• همه فرم‌ها ریسپانسیو و آماده موبایل هستند.

• اعتبارسنجی داخلی Bootstrap بدون نوشتن JS زیاد کار می‌کند.