ورودیی متن

از ورودی type="text"استفاده کنید.

ورودیی پسورد

از ورودی type="password"استفاده کنید

ورودیی ایمیل

از ورودی type="email"استفاده کنید

ورودیی لینک

از ورودی type="url"استفاده کنید

ورودیی تلفن

از ورودی type="tel"استفاده کنید

ورودیی جستجو

از ورودی type="search"استفاده کنید

ورودیی رنج

از ورودی type="range"استفاده کنید

ورودیی رنج سفارشی

از ورودی type="range"استفاده کنید

ورودیی با لیبل

<div class="form-group">
    <label for="exampleFormControlInput1">Full Name</label>
    <input type="text" class="form-control" id="exampleFormControlInput1" value="محمد رضا رضایی">
</div> 

کنترل های فرم

طرح بندی های شبکه

شبکه فرم

<form>
    <div class="row mb-4">
        <div class="col">
            <input type="text" class="form-control" placeholder="نام کوچک">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="نام فامیلی">
        </div>
    </div>
    <input type="submit" name="time" class="btn btn-primary">
</form>

ردیف فرم

<form>
    <div class="form-row mb-4">
        <div class="col">
          <input type="text" class="form-control" placeholder="نام کوچک">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="نام فامیلی">
        </div>
    </div>
    <input type="submit" name="time" class="mb-4 btn btn-primary">
</form>

فرم گروهی

<form>
    <div class="form-group mb-4">
        <label for="formGroupExampleInput">برچسب نمونه</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="مثال ورودی">
    </div>
    <div class="form-group mb-4">
        <label for="formGroupExampleInput2">برچسب دیگر</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="ورودی دیگر">
    </div>
    <input type="submit" name="time" class="btn btn-primary">
</form>

اندازه ستون

<form>
    <div class="form-row mb-4">
        <div class="col-7">
            <input type="text" class="form-control" placeholder="شهر">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="دولت">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="کد پستی">
        </div>
    </div>
    <input type="submit" name="time" class="mb-4 btn btn-primary">
</form>

متن راهنما

ورودیی با متن راهنما (پیش فرض سمت چپ)

برای متن یاور از small و .text-off استفاده کنید.

من متن کمک کننده هستم
<div class="form-group">
    <p>Use <code>small</code> tag and <code>.text-muted</code> من متن کمک کننده هستم </p>
    <label for="h-text1" class="sr-only">آدرس ایمیل</label>
    <input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
    <small id="sh-text1" class="form-text text-muted">من متن کمک کننده هستم</small>
</div>

ورودیی با متن راهنمایی نشان (پیش فرض سمت چپ)

برچسب small را در داخل برچسب span با .badge ببندید

من متن کمک کننده هستم
<div class="form-group">
    <p>Wrap the <code>small</code> tag inside the <code>span</code> tag with  <code>.badge</code></p>
    <label for="h-text4" class="sr-only">آدرس ایمیل</label>
    <input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
    <div class=" mt-1">
        <span class="badge badge-primary">
            <small id="sh-text4" class="form-text mt-0">من متن کمک کننده هستم</small>
        </span>
    </div>
</div>

ورودیی با متن راهنمایی نشان بلوک (پیش فرض سمت چپ)

برای ایجاد انسداد از کلاس .w-100 به برچسب دهانه استفاده کنید.

من متن کمک کننده هستم
<div class="form-group">
    <p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
    <label for="h-text7" class="sr-only">آدرس ایمیل</label>
    <input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
    <div class="mt-1">
        <span class="badge badge-primary w-100">
            <small id="sh-text7" class="form-text mt-0 text-left">من متن کمک کننده هستم</small>
        </span>
    </div>
</div>

متن راهنمایی درون خطی

حداقل 8-20 کاراکتر
<form class="form-inline mb-4">
    <div class="form-group  d-block text-left">
        <label for="inputPassword6" class="d-block">Password</label>
        <input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
        <small id="passwordHelpInline" class="text-muted">
            حداقل 8-20 کاراکتر
        </small>
    </div>
</form>
<input type="submit" name="time" class="btn btn-primary">

اندازه

زمینه های ورودی

<!-- ورودی بزرگ -->
<div class="form-group">
    <label for="exampleFormControlInput1">ورودی بزرگ</label>
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>

<!-- ورودی پیش فرض -->
<div class="form-group">
    <label for="exampleFormControlInput1">ورودی پیش فرض</label>
    <input class="form-control" type="text" placeholder="Default input">
</div>

<!-- ورودی کوچک -->
<div class="form-group">
    <label for="exampleFormControlInput1">ورودی کوچک</label>
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

فیلد را انتخاب کنید

<!-- ورودی بزرگ -->
<select class="form-control form-control-lg">
    <option>بزرگ را انتخاب کنید</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<!-- ورودی پیش فرض -->
<select class="form-control">
    <option>پیش فرض را انتخاب کنید</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

<!-- ورودی کوچک -->
<select class="form-control form-control-sm">
    <option>کوچک را انتخاب کنید</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

اندازه برچسب افقی

<div class="form-group row  mb-4">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div>
<div class="form-group row mb-4">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div>
<div class="form-group row mb-4">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
</div>

فقط خواندنی

ورودی فقط خواندنی

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

بارگذاری پرونده سفارشی HTML

بارگذاری پرونده

<div class="custom-file mb-4">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">انتخاب فایل</label>
</div>

غیرفعال

زمینه غیرفعال

<form>
    <fieldset disabled>
        <div class="form-group mb-4">
            <label for="disabledTextInput">ورودی غیرفعال است</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="ورودی غیرفعال است">
        </div>
        <div class="form-group mb-4">
            <label for="disabledSelect">منوی انتخاب غیرفعال است</label>
            <select id="disabledSelect" class="form-control">
                <option>انتخاب غیرفعال</option>
            </select>
        </div>
        <div class="form-check mt-5 mb-3 pl-0">
            <div class="custom-control custom-checkbox mb-4">
                <input type="checkbox" class="custom-control-input" id="disabledFieldsetCheck">
                <label class="custom-control-label" for="disabledFieldsetCheck">نمی توانید این را بررسی کنید</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary mt-0">Submit</button>
    </fieldset>
</form>

سفارشی

چک باکس ها

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">این کادر تأیید را علامت بزنید</label>
</div>

رادیو درون خطی

    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline1">این رادیو سفارشی را تغییر دهید</label>
        </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline2">این رادیو سفارشی را تغییر دهید</label>
    </div>
    

رادیو

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">این رادیو سفارشی را تغییر دهید</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">یا این رادیو سفارشی دیگر را تغییر دهید</label>
</div>

غیرفعال

<div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
    <label class="custom-control-label" for="customCheckDisabled">این کادر تأیید را علامت بزنید</label>
</div>

<div class="custom-control custom-radio mb-4">
    <input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
    <label class="custom-control-label" for="radio3">این رادیو سفارشی را تغییر دهید</label>
</div>

انتخاب منو

<select class="custom-select mb-4">
    <option selected>این منوی انتخاب را باز کنید</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

اندازه منو را انتخاب کنید

<select class="custom-select custom-select-lg">
  <option selected>این منوی انتخاب را باز کنید</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>این منوی انتخاب را باز کنید</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

چند انتخاب کنید

<select class="custom-select" multiple>
    <option selected>این منوی انتخاب را باز کنید</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

اندازه را انتخاب کنید

<select class="custom-select mb-4" size="4">
    <option selected>این منوی انتخاب را باز کنید</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="3">Four</option>
    <option value="3">Five</option>
</select>