1️⃣ Stacked Form (فرم ستونی)

• عناصر فرم به صورت عمودی و پشت سر هم قرار می‌گیرند

• پیش‌فرض اکثر فرم‌ها در Bootstrap ستونی هستند

<form>
  <div class="mb-3">
    <label for="inputName" class="form-label">نام</label>
    <input type="text" class="form-control" id="inputName">
  </div>
  <div class="mb-3">
    <label for="inputEmail" class="form-label">ایمیل</label>
    <input type="email" class="form-control" id="inputEmail">
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

2️⃣ Textarea

• برای وارد کردن متن طولانی یا پاراگراف

• کلاس form-control هم روی textarea اعمال می‌شود

<div class="mb-3">
  <label for="exampleTextarea" class="form-label">پیام شما</label>
  <textarea class="form-control" id="exampleTextarea" rows="4" placeholder="متن خود را وارد کنید"></textarea>
</div>

3️⃣ Form Row / Grid (Inline Forms)

• استفاده از Grid برای فرم‌های چند ستونه یا در یک خط

• کلاس row و col برای تقسیم فرم

<form>
  <div class="row mb-3">
    <div class="col">
      <input type="text" class="form-control" placeholder="نام">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="نام خانوادگی">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

• Inline Form: عناصر فرم در یک خط نمایش داده می‌شوند: form-inline (در بوت‌استرپ 5 با d-flex ساخته می‌شود)

<form class="d-flex mb-3">
  <input type="text" class="form-control me-2" placeholder="جستجو">
  <button class="btn btn-primary" type="submit">جستجو</button>
</form>

4️⃣ Form Control Size

• کوچک: form-control-sm

• بزرگ: form-control-lg

<input type="text" class="form-control form-control-sm mb-2" placeholder="کوچک">
<input type="text" class="form-control form-control-lg" placeholder="بزرگ">

5️⃣ Disabled and Readonly Inputs

• غیر فعال: disabled

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

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

6️⃣ Plain Text Inputs

• نمایش متن بدون استایل input

• کلاس: form-control-plaintext

<div class="mb-3">
  <label class="form-label">نام کاربری</label>
  <input type="text" readonly class="form-control-plaintext" value="Ali123">
</div>

7️⃣ Color Picker

• انتخاب رنگ توسط کاربر

• نوع input: color

<div class="mb-3">
  <label for="favcolor" class="form-label">رنگ مورد علاقه</label>
  <input type="color" class="form-control form-control-color" id="favcolor" value="#563d7c" title="Choose your color">
</div>

✅ نکات مهم

• ترکیب Grid و فرم‌ها باعث می‌شود فرم ریسپانسیو و چند ستونه طراحی کنید.

• کلاس‌های اندازه (form-control-sm, form-control-lg) به طراحی حرفه‌ای کمک می‌کنند.

• استفاده از disabled, readonly, form-control-plaintext باعث کنترل کامل رفتار ورودی‌ها می‌شود.

• همه ورودی‌ها با Utilities بوت‌استرپ قابل ترکیب هستند: margin, padding, width, colors و …