فرم‌ها

اجزای فرم پویا برای دادن ورودی های آموزنده و بصری به کاربران شما
کنترل های فرم پیش فرض بوت استرپ
<form>
    <div class="mb-3"><label for="exampleFormControlInput1">ایمیل</label><input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com"></div>
    <div class="mb-3">
        <label for="exampleFormControlSelect1">نمونه لیست انتخابی</label><select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="exampleFormControlSelect2">نمونه لیست انتخاب چندتایی</label><select class="form-control" id="exampleFormControlSelect2" multiple="">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="mb-0"><label for="exampleFormControlTextarea1">نمونه ورودی textarea</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea></div>
</form>
form
    .mb-3
        label(for='exampleFormControlInput1') ایمیل
        input#exampleFormControlInput1.form-control(type='email', placeholder='name@example.com')
    .mb-3
        label(for='exampleFormControlSelect1') نمونه لیست انتخابی
        select#exampleFormControlSelect1.form-control
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-3
        label(for='exampleFormControlSelect2') نمونه لیست انتخاب چندتایی
        select#exampleFormControlSelect2.form-control(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-0
        label(for='exampleFormControlTextarea1') نمونه ورودی textarea
        textarea#exampleFormControlTextarea1.form-control(rows='3')
حالت های کنترل فرم بوت استرپ پیش فرض برای تناسب با موضوع SB Admin Pro تغییر شکل داده شده است. سبک تغییر کرده است، اما نشانه گذاری یکسان است.
فرم کنترل های سفارشی
<form>
    <div class="mb-3"><label for="exampleFormControlInput1">ایمیل</label><input class="form-control form-control-solid" id="exampleFormControlInput1" type="email" placeholder="name@example.com"></div>
    <div class="mb-3">
        <label for="exampleFormControlSelect1">نمونه لیست</label><select class="form-control form-control-solid" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="exampleFormControlSelect2">نمونه لیست انتخاب جندتایی</label><select class="form-control form-control-solid" id="exampleFormControlSelect2" multiple="">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="mb-0"><label for="exampleFormControlTextarea1">نمونه ورودی textarea</label><textarea class="form-control form-control-solid" id="exampleFormControlTextarea1" rows="3"></textarea></div>
</form>
form
    .mb-3
        label(for='exampleFormControlInput1') ایمیل
        input#exampleFormControlInput1.form-control.form-control-solid(type='email', placeholder='name@example.com')
    .mb-3
        label(for='exampleFormControlSelect1') نمونه لیست
        select#exampleFormControlSelect1.form-control.form-control-solid
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-3
        label(for='exampleFormControlSelect2') نمونه لیست انتخاب جندتایی
        select#exampleFormControlSelect2.form-control.form-control-solid(multiple='')
            option 1
            option 2
            option 3
            option 4
            option 5
    .mb-0
        label(for='exampleFormControlTextarea1') نمونه ورودی textarea
        textarea#exampleFormControlTextarea1.form-control.form-control-solid(rows='3')
فرم کنترل‌های سفارشی به عنوان جایگزینی برای استایل فرم پیش‌فرض ایجاد شده‌اند. از آنها با افزودن .form-control-solid به کلاس .form-control از آن استفاده کنید
چک باکس های و رادیو باکس سفارشی
چک باکس های سفارشی بوت استرپ:
<div class="form-check">
    <input class="form-check-input" id="flexCheckDefault" type="checkbox" value="">
    <label class="form-check-label" for="flexCheckDefault">پیشفرض</label>
</div>
<div class="form-check">
    <input class="form-check-input" id="flexCheckChecked" type="checkbox" value="" checked">
    <label class="form-check-label" for="flexCheckChecked">تبک خورده</label>
</div>
<div class="form-check">
    <input class="form-check-input" id="flexCheckDisabled" type="checkbox" value="" disabled>
    <label class="form-check-label" for="flexCheckDisabled">غیرفعال</label>
</div>
.form-check
    input#flexCheckDefault.form-check-input(type='checkbox', value='')
    label.form-check-label(for='flexCheckDefault')
        | پیشفرض
.form-check
    input#flexCheckChecked.form-check-input(type='checkbox', value='', checked)
    label.form-check-label(for='flexCheckChecked')
        | تیک خورده
.form-check
    input#flexCheckDisabled.form-check-input(type='checkbox', value='', disabled)
    label.form-check-label(for='flexCheckDisabled')
        |  غیرفعال
استایل چک باکس سفارشی Bootstrap برای تم SB Admin Pro اصلاح شده است.
رادیو باکس سفارشی بوت استرپ:
<div class="form-check">
    <input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault">
    <label class="form-check-label" for="flexRadioDefault1">پیشفرض</label>
</div>
<div class="form-check">
    <input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked">
    <label class="form-check-label" for="flexRadioDefault2">تیک خورده</label>
</div>
<div class="form-check">
    <input class="form-check-input" id="flexRadioDefault3" type="radio" name="flexRadioDefault" disabled>
    <label class="form-check-label" for="flexRadioDefault3">غیرفعال</label>
</div>
.form-check
    input#flexRadioDefault1.form-check-input(type='radio', name='flexRadioDefault')
    label.form-check-label(for='flexRadioDefault1')
        | پیشفرض
.form-check
    input#flexRadioDefault2.form-check-input(type='radio', name='flexRadioDefault', checked)
    label.form-check-label(for='flexRadioDefault2')
        | تیک خورده
.form-check
    input#flexRadioDefault3.form-check-input(type='radio', name='flexRadioDefault', disabled)
    label.form-check-label(for='flexRadioDefault3')
        | غیرفعال
استایل رادیویی سفارشی بوت استرپ نیز برای تم SB Admin Pro اصلاح شده است.
چک باکس رادیو باکس پررنگ
چک باکس سفارشی پررنگ:
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexCheckSolidDefault" type="checkbox" value="">
    <label class="form-check-label" for="flexCheckSolidDefault">پیشفرض</label>
</div>
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexCheckSolidChecked" type="checkbox" value="" checked">
    <label class="form-check-label" for="flexCheckSolidChecked">تیک خورده</label>
</div>
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexCheckSolidDisabled" type="checkbox" value="" disabled>
    <label class="form-check-label" for="flexCheckSolidDisabled">غیرفعال</label>
</div>
.form-check.form-check-solid
    input#flexCheckSolidDefault.form-check-input(type='checkbox', value='')
    label.form-check-label(for='flexCheckSolidDefault')
        | پیشفرض
.form-check.form-check-solid
    input#flexCheckSolidChecked.form-check-input(type='checkbox', value='', checked)
    label.form-check-label(for='flexCheckSolidChecked')
        | تیک خورده
.form-check.form-check-solid
    input#flexCheckSolidDisabled.form-check-input(type='checkbox', value='', disabled)
    label.form-check-label(for='flexCheckSolidDisabled')
        | غیرفعال
کلاس .custom-control-solid میشه با کلاس .custom-control استفاده شود، به فرم کنترل استایل پررنگ می دهد.
رادیو باکس سفارشی:
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexRadioSolid1" type="radio" name="flexRadioSolid">
    <label class="form-check-label" for="flexRadioSolid1">پیشفرض</label>
</div>
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexRadioSolid2" type="radio" name="flexRadioSolid" checked">
    <label class="form-check-label" for="flexRadioSolid2">تیک خورده</label>
</div>
<div class="form-check form-check-solid">
    <input class="form-check-input" id="flexRadioSolid3" type="radio" name="flexRadioSolid" disabled>
    <label class="form-check-label" for="flexRadioSolid3">غیرفعال</label>
</div>
.form-check.form-check-solid
    input#flexRadioSolid1.form-check-input(type='radio', name='flexRadioSolid')
    label.form-check-label(for='flexRadioSolid1')
        | پیشفرض
.form-check.form-check-solid
    input#flexRadioSolid2.form-check-input(type='radio', name='flexRadioSolid', checked)
    label.form-check-label(for='flexRadioSolid2')
        | تیک خورده
.form-check.form-check-solid
    input#flexRadioSolid3.form-check-input(type='radio', name='flexRadioSolid', disabled)
    label.form-check-label(for='flexRadioSolid3')
        | غیرفعال
The .custom-control-solid works with custom radios as well.
گروبندی فرم کنترل ورودی
<!-- Joined input group append example-->
<div class="input-group input-group-joined">
    <input class="form-control pe-0" type="text" placeholder="گروه بندی در انتها..." aria-label="جستجو">
    <span class="input-group-text">
        <i data-feather="search"></i>
    </span>
</div>

<!-- Joined input group prepend example-->
<div class="input-group input-group-joined">
    <span class="input-group-text">
        <i data-feather="search"></i>
    </span>
    <input class="form-control ps-0" type="text" placeholder="گروه بندی در ابتدا..." aria-label="جستجو">
</div>

<!-- Joined input group solid append example-->
<div class="input-group input-group-joined input-group-solid">
    <input class="form-control pe-0" type="text" placeholder="گروه بندی در انتها..." aria-label="جستجو">
    <span class="input-group-text">
        <i data-feather="search"></i>
    </span>
</div>

<!-- Joined input group solid prepend example-->
<div class="input-group input-group-joined input-group-solid">
    <span class="input-group-text">
        <i data-feather="search"></i>
    </span>
    <input class="form-control ps-0" type="text" placeholder="گروه بندی در ابتدا..." aria-label="جستجو">
</div>
// Joined input group append example
.input-group.input-group-joined
    input.form-control.pe-0(type='text', placeholder='گروه بندی در انتها...', aria-label='جستجو')
    span.input-group-text
        i(data-feather='search')
// Joined input group prepend example
.input-group.input-group-joined
    span.input-group-text
        i(data-feather='search')
    input.form-control.ps-0(type='text', placeholder='گروه بندی در ابتدا...', aria-label='جستجو')
// Joined input group solid append example
.input-group.input-group-joined.mb-4.input-group-solid
    input.form-control.pe-0(type='text', placeholder='گروه بندی در انتها...', aria-label='جستجو')
    span.input-group-text
        i(data-feather='search')
// Joined input group solid prepend example
.input-group.input-group-joined.input-group-solid
    span.input-group-text
        i(data-feather='search')
    input.form-control.ps-0(type='text', placeholder='گروه بندی در ابتدا...', aria-label='جستجو')
گروه بندی فرم ها ویژگی :focus-within کلاس شبه CSS برای پیوستن به گروه ورودی در یک گروه ورودی اضافه می‌شود. برخلاف رفتار گروه ورودی پیش‌فرض بوت استرپ، این تغییرات گروه ورودی پیوسته، وقتی کنترل فرم درون انتخاب می‌شود، کل گروه ورودی را متمرکز می‌کند. این تنوع همچنین رنگ‌آمیزی پس‌زمینه و حاشیه عناصر ضمیمه و پیش‌پیوند را برای ظاهری صاف و بدون درز گروه ورودی حذف می‌کند.
تاریخ شمسی پلاگین 
<!-- Date Range Picker Example-->
<div class="input-group input-group-joined" style="width: 16.5rem;">
    <span class="input-group-text">
        <i data-feather="calendar"></i>
    </span>
    <input class="form-control ps-0" id="datepickerRangePlugin" placeholder="تاریخ تولد خود را انتخاب کنید..." />
</div>
// Date Range Picker Example
.input-group.input-group-joined(style='width: 16.5rem;')
    span.input-group-text
        i(data-feather='calendar')
    input.form-control.ps-0.pointer#datepickerRangePlugin(placeholder='تاریخ تولد خود را انتخاب کنید...')

این افزونه توسط یک وابستگی شخص ثالث به نام PersianWebToolkit طراحی شده است. برای دیدن نمونه های بیشتر از مستندات PersianWebToolkit دیدن کنید

مستندات بوت استرپ موجود است

فرم‌ها یک جزء پیش‌فرض هستند که در چارچوب Bootstrap گنجانده شده است. برای اطلاعات بیشتر در مورد پیاده‌سازی، اصلاح و گسترش استفاده از فرم‌ها در پروژه خود، از صفحه رسمی مستندات فرم‌های بوت استرپ دیدن کنید.

از Bootstrap Forms Docs دیدن کنید