ورودیی متن
ورودیی پسورد
ورودیی ایمیل
ورودیی لینک
ورودیی تلفن
ورودیی جستجو
ورودیی رنج
ورودیی رنج سفارشی
ورودیی با لیبل
<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>
متن راهنمایی درون خطی
<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>
© کپی رایت
بومی سازی شده توسط : ایمان پاکروح