چینش فرم
نمای کلی
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="ایمیل خود را وارد نمایید">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with
anyone else.
</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">رمزعبور</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="رمزعبور">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">مرا علامت بزنید</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
کنترلهای فرم
برای فایلهای ورودی, تعویض کنید .form-control
را با .form-control-file
.
<!-- Input -->
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<!-- Select -->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<!-- File input -->
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
اندازه ورودیها
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
اندازه انتخابگر
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
تنها خواندنی
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
تنها خواندنی با متن جایگذاری شده
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">ایمیل</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">رمزعبور</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="رمزعبور">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">ایمیل</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">رمزعبور</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="رمزعبور">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
ورودی بازهای
از کد روبهرو برای ورودی بازهای استفاده کنید .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
چکباکس و دکمه رادیویی
به طور پیش فرض ، هر تعداد چکباکس و دکمه رادیویی که در یک سطح هستند ، به صورت عمودی کنار هم می آیند..form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
چکباکس پیشفرض
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
چکباکس غیرفعال
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
دکمه رادیویی پیشفرض
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Secondدکمه رادیویی پیشفرض
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
دکمه رادیویی غیرفعال
</label>
</div>
خطی
یا افزودن کلاس روبه رو به چکباکس و دکمههای رادیویی میتوانید آنها را خطی نمایید .form-check-inline .form-check.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
بدون لیبل
از .position-static
به ورودی های همراه .form-check
برای نداشتن لیبل میتوانید استفاده کنید اما به خاطر داشته باشید استفاده از لیبل برای فهم درست کاربر ضروری است.
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
چینش
فرم افقی
میتوانید به جای .row
از .form-row
برای استفاده از چینش ردیفی یا افقی استفاده کنید
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="نام">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="نام خانوادگی">
</div>
</div>
</form>
از چینش های متفاوت و پیشرفته تری هم با استفاده از گرید سیستم میتوانید بهره ببرید
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">ایمیل</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="ایمیل ">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">رمزعبورlt;/label>
<input type="password" class="form-control" id="inputPassword4" placeholder="رمزعبور">
</div>
</div>
<div class="form-group">
<label for="inputAddress">آدرس</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 خیابان اصلی ">
</div>
<div class="form-group">
<label for="inputAddress2">آدرس دوم</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="آپارتمان، طبقه، پلاک">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">شهر</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">استان</label>
<select id="inputState" class="form-control">
<option selected>انتخاب...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">کدپستی</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
مرا علامت بزنید
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">ورودlt;/button>
</form>
فرم عمودی
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">ایمیل</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="ایمیل ">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">رمزعبور</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="رمزعبور">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">دکمه رادیویی</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
دکمه رادیویی یک
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
دکمه رادیویی دو
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
دکمه رادیویی غیرفعال
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">چکباکس</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
چکباکس نمونه
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">ورود</button>
</div>
</div>
</form>
فرم عمودی با سایز لیبل
میتوانید از .col-form-label-sm
یا .col-form-label-lg
در
<label>
ها یا <label>
برای استفاده از سایز استفاده کنید همچنین .form-control-lg
و .form-control-sm
.
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">ایمیل</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">
<label for="colFormLabel" class="col-sm-2 col-form-label">ایمیل</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">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">ایمیل</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
متن راهنما
از این ویژگی میتوانید با استفاده از کلاس های روبه رو استفاده کنید .text-muted
و .form-text
که در ورژن های قبلی به .help-block
معروف بودند
<label for="inputPassword5">رمزعبور</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
رمز عبور شما باید 8-20 نویسه داشته باشد ، حروف و اعداد داشته باشد و نباید حاوی فضاها ، کاراکترهای ویژه یا ایموجی باشد.
</small>
فرم غیرفعال
برای استفاده از این ویژگی میتوانید از نمونه کد زیر استفاده نمایید
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">ورودی غیرفعال</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="ورودی غیرفعال">
</div>
<div class="form-group">
<label for="disabledSelect">انتخابگر غیرفعال</label>
<select id="disabledSelect" class="form-control">
<option>انتخابگر غیرفعال</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
نمیتوانید این باکس را علامت بزنید
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>