فرم‌های Bootstrap 5

فرم‌های چیده شده

تمام عناصر <input> و <textarea> که دارای کلاس .form-control هستند، از استایل صحیح فرم بهره‌مند می‌شوند:

مثال

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">ایمیل:</label>
    <input type="email" class="form-control" id="email" placeholder="لطفاً آدرس ایمیل خود را وارد کنید" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">رمز عبور:</label>
    <input type="password" class="form-control" id="pwd" placeholder="لطفاً رمز عبور خود را وارد کنید" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> بخاطر بسپار من
    </label>
  </div>
  <button type="submit" class="btn btn-primary">ثبت</button>
</form>

آزمایش کنید

لطفاً توجه داشته باشید که ما برای هر عنصر label .form-label کلاس تنظیم می‌شوند تا پر کردن صحیح انجام شود.

چک باکس‌ها دارای علامت‌های مختلفی هستند. آنها با .form-check عنصر محیطی کلاس احاطه می‌شوند. تنظیمات label .form-check-label کلاس، و چک باکس‌ها و دکمه‌های رادیویی توسط .form-check-input.

Textarea

مثال

<label for="comment">نظرات:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

آزمایش کنید

فرم سطر / شبکه (فرم درون سطر) استفاده کنید

اگر می‌خواهید عناصر فرم به صورت عمودی نمایش داده شوند، از .row و .col:

مثال

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="لطفاً آدرس ایمیل خود را وارد کنید" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="لطفاً رمز عبور خود را وارد کنید" name="pswd">
    </div>
  </div>
</form>

آزمایش کنید

شما در Bootstrap شبکه 更多信息 در مورد ستون‌ها و ردیف‌ها در فصل یاد بگیرید.

اندازه کنترل فرم

شما می‌توانید .form-control-lg یا .form-control-sm تغییر .form-control اندازه کنترل ورودی:

مثال

<input type="text" class="form-control form-control-lg" placeholder="کنترل ورودی بزرگ">
<input type="text" class="form-control" placeholder="کنترل ورودی معمولی">
<input type="text" class="form-control form-control-sm" placeholder="کنترل ورودی کوچک">

آزمایش کنید

غیرفعال و خواندنی

برای غیرفعال کردن فیلد ورودی از ویژگی‌های disabled و/یا readonly استفاده کنید:

مثال

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

آزمایش کنید

ورودی متن ساده

لطفاً از .form-control-plaintext برای تنظیم سبک ورودی‌های بدون حاشیه، اما با حاشیه مناسب استفاده کنید:

مثال

<input type="text" class="form-control-plaintext" placeholder="ورودی متن ساده">
<input type="text" class="form-control" placeholder="کنترل ورودی معمولی">

آزمایش کنید

انتخاب‌گر رنگ

برای تنظیم درست سبک ورودی با type="color"، لطفاً از .form-control-color کلاس:

مثال

<input type="color" class="form-control form-control-color" value="#CCCCCC">

آزمایش کنید