Sourceفورمې
د فارم کنټرول سټایلونو، ترتیب اختیارونو، او د مختلفو بڼو د جوړولو لپاره دودیز اجزاوو لپاره مثالونه او د کارولو لارښوونې.
کتنه
د بوټسټریپ فارم کنټرولونه زموږ د ریبوټ شوي فارم سټایلونو کې د ټولګیو سره پراخیږي. د دې ټولګیو څخه کار واخلئ ترڅو په براوزرونو او وسیلو کې د لا دوامداره رینډرینګ لپاره د دوی دودیز ډیزاینونو غوره کولو لپاره وکاروئ.
ډاډ ترلاسه کړئ چې type
په ټولو داخلونو کې یو مناسب خاصیت وکاروئ (د بیلګې په توګه email
د بریښنالیک آدرس یا number
شمیري معلوماتو لپاره) ترڅو د نوي ان پټ کنټرولونو څخه ګټه پورته کړئ لکه د بریښنالیک تصدیق ، شمیره انتخاب او نور.
دلته د بوټسټریپ فارم سټایلونو ښودلو لپاره یو ګړندی مثال دی. د اړینو ټولګیو، فورمې ترتیب، او نور په اړه د اسنادو لوستلو ته دوام ورکړئ.
کاپي
<form>
<div class= "form-group" >
<label for= "exampleInputEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleInputEmail1" aria-describedby= "emailHelp" >
<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" > Password</label>
<input type= "password" class= "form-control" id= "exampleInputPassword1" >
</div>
<div class= "form-group form-check" >
<input type= "checkbox" class= "form-check-input" id= "exampleCheck1" >
<label class= "form-check-label" for= "exampleCheck1" > Check me out</label>
</div>
<button type= "submit" class= "btn btn-primary" > Submit</button>
</form>
د متن فارم کنټرولونه لکه <input>
s، <select>
s، او s — د ټولګي <textarea>
سره سټایل شوي دي . .form-control
د عمومي ظهور، د تمرکز حالت، اندازه کولو، او نور لپاره سټایلونه شامل دي.
ډاډ ترلاسه کړئ چې زموږ دودیز فارمونه نور سټایل ته وپلټئ <select>
.
کاپي
<form>
<div class= "form-group" >
<label for= "exampleFormControlInput1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleFormControlInput1" placeholder= "[email protected] " >
</div>
<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>
<div class= "form-group" >
<label for= "exampleFormControlSelect2" > Example multiple select</label>
<select multiple class= "form-control" id= "exampleFormControlSelect2" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
<div class= "form-group" >
<label for= "exampleFormControlTextarea1" > Example textarea</label>
<textarea class= "form-control" id= "exampleFormControlTextarea1" rows= "3" ></textarea>
</div>
</form>
د فایل داخلولو لپاره، د دې .form-control
لپاره بدل کړئ .form-control-file
.
کاپي
<form>
<div class= "form-group" >
<label for= "exampleFormControlFile1" > Example file input</label>
<input type= "file" class= "form-control-file" id= "exampleFormControlFile1" >
</div>
</form>
اندازه کول
د ټولګیو لکه .form-control-lg
او په کارولو سره لوړوالی تنظیم کړئ .form-control-sm
.
کاپي
<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>
صرف د لوست وړ
readonly
د ان پټ د ارزښت د بدلون د مخنیوي لپاره په ان پټ کې د بولین صفت اضافه کړئ . یوازې د لوستلو آخذې سپک ښکاري (لکه غیر فعال شوي آخذې)، مګر معیاري کرسر ساتي.
کاپي
<input class= "form-control" type= "text" placeholder= "Readonly input here..." readonly >
یوازې د لوستلو ساده متن
که تاسو غواړئ <input readonly>
په خپل فارم کې عناصر د ساده متن په توګه سټایل کړئ، .form-control-plaintext
د ډیفالټ فارم ساحې سټایل لرې کولو لپاره ټولګي وکاروئ او سم حاشیه او پیډینګ وساتئ.
کاپي
<form>
<div class= "form-group row" >
<label for= "staticEmail" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "text" readonly class= "form-control-plaintext" id= "staticEmail" value= "[email protected] " >
</div>
</div>
<div class= "form-group row" >
<label for= "inputPassword" class= "col-sm-2 col-form-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword" >
</div>
</div>
</form>
کاپي
<form class= "form-inline" >
<div class= "form-group mb-2" >
<label for= "staticEmail2" class= "sr-only" > Email</label>
<input type= "text" readonly class= "form-control-plaintext" id= "staticEmail2" value= "[email protected] " >
</div>
<div class= "form-group mx-sm-3 mb-2" >
<label for= "inputPassword2" class= "sr-only" > Password</label>
<input type= "password" class= "form-control" id= "inputPassword2" placeholder= "Password" >
</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
ښه کیږي چې د دوی د HTML عناصرو ترتیب او چلند ښه کوي . چک بکسونه په لیست کې د یو یا څو انتخابونو غوره کولو لپاره دي، پداسې حال کې چې راډیوګانې د ډیری څخه د یو انتخاب غوره کولو لپاره دي.
غیر فعال چیک باکسونه او راډیوګانې ملاتړ کیږي. disabled
خاصیت به یو روښانه رنګ پلي کړي ترڅو د ننوتلو حالت په ګوته کولو کې مرسته وکړي .
د چک بکسونه او راډیو بټونه د HTML پر بنسټ د فورمې تایید ملاتړ کوي او لنډ، د لاسرسي وړ لیبلونه چمتو کوي. په دې توګه، زموږ <input>
s او <label>
s د وروڼو عناصر دي لکه څنګه چې د <input>
دننه دننه مخالف دي <label>
. دا یو څه ډیر فعل دی ځکه چې تاسو باید د id
او for
سره د تړاو لپاره <input>
مشخصات مشخص کړئ <label>
.
ډیفالټ (سټاک شوی)
په ډیفالټ ډول، د چک بکسونو او راډیوګانو هر ډول شمیر چې سمدستي وروڼه دي به په عمودي توګه سټیک شي او په مناسبه توګه د .form-check
.
کاپي
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "defaultCheck1" >
<label class= "form-check-label" for= "defaultCheck1" >
Default checkbox
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "defaultCheck2" disabled >
<label class= "form-check-label" for= "defaultCheck2" >
Disabled checkbox
</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" >
Default radio
</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 default radio
</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" >
Disabled radio
</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= "radio" name= "inlineRadioOptions" id= "inlineRadio1" value= "option1" >
<label class= "form-check-label" for= "inlineRadio1" > 1</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "radio" name= "inlineRadioOptions" id= "inlineRadio2" value= "option2" >
<label class= "form-check-label" for= "inlineRadio2" > 2</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "radio" name= "inlineRadioOptions" id= "inlineRadio3" value= "option3" disabled >
<label class= "form-check-label" for= "inlineRadio3" > 3 (disabled)</label>
</div>
د لیبل پرته
.position-static
په هغه کې دننه معلوماتو ته اضافه کړئ .form-check
کوم لیبل متن نلري. په یاد ولرئ چې لاهم د مرستندویه ټیکنالوژیو لپاره د لیبل ځینې ډولونه چمتو کړئ (د مثال په توګه ، کارول aria-label
).
کاپي
<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>
ترتیب
څنګه چې بوټسټریپ پلي کیږي display: block
او width: 100%
زموږ نږدې ټولو فارم کنټرولونو ته ، فورمې به په ډیفالټ ډول په عمودي ډول سټیک شي. اضافي ټولګي د دې ترتیب بدلولو لپاره د فی فارم پر اساس کارول کیدی شي.
ټولګي په فورمو کې د .form-group
ځینې جوړښت اضافه کولو ترټولو اسانه لار ده. دا یو انعطاف وړ ټولګي چمتو کوي چې د لیبلونو مناسب ګروپ کول هڅوي، کنټرولونه، اختیاري مرستې متن، او د فورمې تایید پیغامونه. د ډیفالټ له مخې دا یوازې پلي کیږي margin-bottom
، مګر دا د اړتیا سره سم اضافي سټایلونه غوره کوي .form-inline
. <fieldset>
دا د s، <div>
s، یا نږدې کوم بل عنصر سره وکاروئ .
کاپي
<form>
<div class= "form-group" >
<label for= "formGroupExampleInput" > Example label</label>
<input type= "text" class= "form-control" id= "formGroupExampleInput" placeholder= "Example input placeholder" >
</div>
<div class= "form-group" >
<label for= "formGroupExampleInput2" > Another label</label>
<input type= "text" class= "form-control" id= "formGroupExampleInput2" placeholder= "Another input placeholder" >
</div>
</form>
زموږ د گرډ ټولګیو په کارولو سره ډیر پیچلي فارمونه رامینځته کیدی شي. دا د فارم ترتیبونو لپاره وکاروئ کوم چې ډیری کالمونو، مختلف پلنوالی، او اضافي سمون اختیارونو ته اړتیا لري.
کاپي
<form>
<div class= "row" >
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "First name" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Last name" >
</div>
</div>
</form>
تاسو کولی شئ د دې .row
لپاره هم بدل کړئ .form-row
، زموږ د معیاري گرډ قطار یو توپیر چې د ډیفالټ کالم ګټرونه د سخت او ډیر کمپیکٹ ترتیبونو لپاره پورته کوي.
کاپي
<form>
<div class= "form-row" >
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "First name" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Last name" >
</div>
</div>
</form>
نور پیچلي ترتیبونه د گرډ سیسټم سره هم رامینځته کیدی شي.
کاپي
<form>
<div class= "form-row" >
<div class= "form-group col-md-6" >
<label for= "inputEmail4" > Email</label>
<input type= "email" class= "form-control" id= "inputEmail4" >
</div>
<div class= "form-group col-md-6" >
<label for= "inputPassword4" > Password</label>
<input type= "password" class= "form-control" id= "inputPassword4" >
</div>
</div>
<div class= "form-group" >
<label for= "inputAddress" > Address</label>
<input type= "text" class= "form-control" id= "inputAddress" placeholder= "1234 Main St" >
</div>
<div class= "form-group" >
<label for= "inputAddress2" > Address 2</label>
<input type= "text" class= "form-control" id= "inputAddress2" placeholder= "Apartment, studio, or floor" >
</div>
<div class= "form-row" >
<div class= "form-group col-md-6" >
<label for= "inputCity" > City</label>
<input type= "text" class= "form-control" id= "inputCity" >
</div>
<div class= "form-group col-md-4" >
<label for= "inputState" > State</label>
<select id= "inputState" class= "form-control" >
<option selected > Choose...</option>
<option> ...</option>
</select>
</div>
<div class= "form-group col-md-2" >
<label for= "inputZip" > Zip</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" >
Check me out
</label>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
.row
د ګروپونو جوړولو لپاره د ټولګي اضافه کولو او .col-*-*
د خپلو لیبلونو او کنټرولونو عرض مشخص کولو لپاره د ټولګیو په کارولو سره د ګریډ سره افقی شکلونه جوړ کړئ . ډاډ ترلاسه کړئ .col-form-label
چې ستاسو <label>
په s کې هم اضافه کړئ نو دوی په عمودي ډول د دوی اړوند فارم کنټرولونو سره متمرکز وي.
ځینې وختونه، تاسو ممکن د حاشیې یا پیډینګ اسانتیاو کارولو ته اړتیا ولرئ ترڅو هغه مناسب سمون رامینځته کړئ چې تاسو ورته اړتیا لرئ. د مثال په توګه، موږ padding-top
د متن بیس لاین په ښه توګه تنظیم کولو لپاره زموږ د سټیک شوي راډیو انپټس لیبل لرې کړی دی.
کاپي
<form>
<div class= "form-group row" >
<label for= "inputEmail3" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control" id= "inputEmail3" >
</div>
</div>
<div class= "form-group row" >
<label for= "inputPassword3" class= "col-sm-2 col-form-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword3" >
</div>
</div>
<fieldset class= "form-group" >
<div class= "row" >
<legend class= "col-form-label col-sm-2 pt-0" > Radios</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" >
First radio
</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" >
Second radio
</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" >
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class= "form-group row" >
<div class= "col-sm-2" > Checkbox</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" >
Example checkbox
</label>
</div>
</div>
</div>
<div class= "form-group row" >
<div class= "col-sm-10" >
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</div>
</div>
</form>
ډاډ ترلاسه کړئ چې .col-form-label-sm
یا .col-form-label-lg
ستاسو <label>
s یا <legend>
s وکاروئ ترڅو په سمه توګه د اندازې تعقیب .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" > 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" >
<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" >
<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>
</form>
د کالم اندازه کول
لکه څنګه چې په تیرو مثالونو کې ښودل شوي، زموږ د ګریډ سیسټم تاسو ته اجازه درکوي چې د .col
s شمیر په a .row
یا .form-row
. دوی به د دوی تر مینځ په مساوي ډول موجود عرض تقسیم کړي. تاسو کولی شئ د خپلو کالمونو یوه فرعي سیټ هم غوره کړئ ترڅو ډیر یا لږ ځای ونیسي، پداسې حال کې چې پاتې نور .col
په مساوي ډول د ځانګړي کالم ټولګیو سره تقسیم کړئ .col-7
.
کاپي
<form>
<div class= "form-row" >
<div class= "col-7" >
<input type= "text" class= "form-control" placeholder= "City" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "State" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Zip" >
</div>
</div>
</form>
اتومات اندازه کول
لاندې مثال د محتوياتو په عمودي توګه د مرکز کولو لپاره د فلیکس باکس افادیت کاروي او پدې کې بدلون راولي .col
ترڅو .col-auto
ستاسو کالم یوازې د اړتیا په اندازه ځای ونیسي. بله لاره واچوئ، د کالم اندازه پخپله د مینځپانګو پراساس ده.
کاپي
<form>
<div class= "form-row align-items-center" >
<div class= "col-auto" >
<label class= "sr-only" for= "inlineFormInput" > Name</label>
<input type= "text" class= "form-control mb-2" id= "inlineFormInput" placeholder= "Jane Doe" >
</div>
<div class= "col-auto" >
<label class= "sr-only" for= "inlineFormInputGroup" > Username</label>
<div class= "input-group mb-2" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroup" placeholder= "Username" >
</div>
</div>
<div class= "col-auto" >
<div class= "form-check mb-2" >
<input class= "form-check-input" type= "checkbox" id= "autoSizingCheck" >
<label class= "form-check-label" for= "autoSizingCheck" >
Remember me
</label>
</div>
</div>
<div class= "col-auto" >
<button type= "submit" class= "btn btn-primary mb-2" > Submit</button>
</div>
</div>
</form>
تاسو بیا کولی شئ دا یو ځل بیا د اندازې ځانګړي کالم ټولګیو سره ریمکس کړئ.
کاپي
<form>
<div class= "form-row align-items-center" >
<div class= "col-sm-3 my-1" >
<label class= "sr-only" for= "inlineFormInputName" > Name</label>
<input type= "text" class= "form-control" id= "inlineFormInputName" placeholder= "Jane Doe" >
</div>
<div class= "col-sm-3 my-1" >
<label class= "sr-only" for= "inlineFormInputGroupUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroupUsername" placeholder= "Username" >
</div>
</div>
<div class= "col-auto my-1" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" id= "autoSizingCheck2" >
<label class= "form-check-label" for= "autoSizingCheck2" >
Remember me
</label>
</div>
</div>
<div class= "col-auto my-1" >
<button type= "submit" class= "btn btn-primary" > Submit</button>
</div>
</div>
</form>
او البته د دودیز فارم کنټرول ملاتړ کیږي.
کاپي
<form>
<div class= "form-row align-items-center" >
<div class= "col-auto my-1" >
<label class= "mr-sm-2 sr-only" for= "inlineFormCustomSelect" > Preference</label>
<select class= "custom-select mr-sm-2" id= "inlineFormCustomSelect" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
</div>
<div class= "col-auto my-1" >
<div class= "custom-control custom-checkbox mr-sm-2" >
<input type= "checkbox" class= "custom-control-input" id= "customControlAutosizing" >
<label class= "custom-control-label" for= "customControlAutosizing" > Remember my preference</label>
</div>
</div>
<div class= "col-auto my-1" >
<button type= "submit" class= "btn btn-primary" > Submit</button>
</div>
</div>
</form>
.form-inline
په یوه افقی قطار کې د لیبلونو، فورمو کنټرولونو، او بټونو لړۍ ښودلو لپاره ټولګي وکاروئ . په انلاین فارمونو کې د فارم کنټرولونه د دوی له اصلي حالتونو څخه یو څه توپیر لري.
کنټرولونه دي ، د هر ډول HTML سپین ځای سقوط کوي او تاسو ته اجازه درکوي چې د فاصلې او فلیکس بکس اسانتیاو display: flex
سره د سمون کنټرول چمتو کړئ .
کنټرول او ان پټ ګروپونه width: auto
د بوټسټریپ ډیفالټ بدلولو لپاره ترلاسه کوي width: 100%
.
کنټرولونه یوازې په ویو پورټونو کې انلاین ښکاري چې لږترلږه 576px پراخه وي ترڅو په ګرځنده وسیلو کې د محدود لید پورټونو حساب وکړي.
تاسو ممکن اړتیا ولرئ په لاسي ډول د فاصلې اسانتیاو سره د انفرادي فارم کنټرولونو پلنوالی او ترتیب په ګوته کړئ (لکه څنګه چې لاندې ښودل شوي). په نهایت کې ، ډاډ ترلاسه کړئ چې تل <label>
د هر فارم کنټرول سره یو شامل کړئ ، حتی که تاسو اړتیا لرئ دا د غیر سکرین ریډر لیدونکو څخه پټ کړئ .sr-only
.
کاپي
<form class= "form-inline" >
<label class= "sr-only" for= "inlineFormInputName2" > Name</label>
<input type= "text" class= "form-control mb-2 mr-sm-2" id= "inlineFormInputName2" placeholder= "Jane Doe" >
<label class= "sr-only" for= "inlineFormInputGroupUsername2" > Username</label>
<div class= "input-group mb-2 mr-sm-2" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroupUsername2" placeholder= "Username" >
</div>
<div class= "form-check mb-2 mr-sm-2" >
<input class= "form-check-input" type= "checkbox" id= "inlineFormCheck" >
<label class= "form-check-label" for= "inlineFormCheck" >
Remember me
</label>
</div>
<button type= "submit" class= "btn btn-primary mb-2" > Submit</button>
</form>
د دودیز فارم کنټرولونه او انتخابونه هم ملاتړ کیږي.
کاپي
<form class= "form-inline" >
<label class= "my-1 mr-2" for= "inlineFormCustomSelectPref" > Preference</label>
<select class= "custom-select my-1 mr-sm-2" id= "inlineFormCustomSelectPref" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "custom-control custom-checkbox my-1 mr-sm-2" >
<input type= "checkbox" class= "custom-control-input" id= "customControlInline" >
<label class= "custom-control-label" for= "customControlInline" > Remember my preference</label>
</div>
<button type= "submit" class= "btn btn-primary my-1" > Submit</button>
</form>
د پټو لیبلونو بدیل
مرستندویه ټیکنالوژي لکه د سکرین لوستونکي به ستاسو د فورمو سره ستونزه ولري که تاسو د هر ان پټ لپاره لیبل شامل نه کړئ. .sr-only
د دې انلاین فورمو لپاره، تاسو کولی شئ د ټولګي په کارولو سره لیبلونه پټ کړئ . د مرستندویه ټیکنالوژیو لپاره د لیبل چمتو کولو لپاره نور بدیل میتودونه شتون لري، لکه aria-label
، aria-labelledby
یا title
خاصیت. که چیرې له دې څخه هیڅ هم شتون ونلري، مرستندویه ټیکنالوژي ممکن د placeholder
ځانګړتیاوو کارولو ته لاره هواره کړي، که شتون ولري، مګر په یاد ولرئ چې placeholder
د نورو لیبل کولو میتودونو لپاره د بدیل په توګه کارول سپارښتنه نه کیږي.
د مرستې متن
په فورمو کې د بلاک کچې مرستې متن په کارولو سره رامینځته کیدی شي .form-text
(پخوا .help-block
په v3 کې پیژندل شوی). د انلاین مرستې متن د هر ډول انلاین HTML عنصر او د کارونې ټولګیو لکه .text-muted
.
د فارم کنټرولونو سره د مرستې متن شریکول
د مرستې متن باید په ښکاره ډول د فارم کنټرول سره تړاو ولري چې دا د aria-describedby
ځانګړتیا کارولو پورې اړه لري. دا به ډاډ ترلاسه کړي چې مرستندویه ټیکنالوژي - لکه د سکرین لوستونکي - به د دې مرستې متن اعلان کړي کله چې کاروونکي تمرکز کوي یا کنټرول ته ننوځي.
د مرستې متن لاندې د معلوماتو سره سټایل کیدی شي .form-text
. پدې ټولګي کې display: block
د پورته معلوماتو څخه د اسانه واټن لپاره ځینې پورتنۍ حاشیه شامله او اضافه کوي.
رمز
ستاسو پټنوم باید د 8-20 حروف اوږد وي، لیکونه او شمیرې ولري، او باید ځایونه، ځانګړي حروف، یا ایموجي ونه لري.
کاپي
<label for= "inputPassword5" > Password</label>
<input type= "password" id= "inputPassword5" class= "form-control" aria-describedby= "passwordHelpBlock" >
<small id= "passwordHelpBlock" class= "form-text text-muted" >
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
انلاین متن کولی شي هر ډول انلاین HTML عنصر وکاروي (که دا یو <small>
, <span>
یا بل څه وي) د یوټیلټي ټولګي پرته نور څه نه وي.
کاپي
<form class= "form-inline" >
<div class= "form-group" >
<label for= "inputPassword6" > Password</label>
<input type= "password" id= "inputPassword6" class= "form-control mx-sm-3" aria-describedby= "passwordHelpInline" >
<small id= "passwordHelpInline" class= "text-muted" >
Must be 8-20 characters long.
</small>
</div>
</form>
disabled
د بولین خاصیت په ان پټ کې اضافه کړئ ترڅو د کارونکي متقابل عمل مخه ونیسي او دا روښانه ښکاري.
کاپي
<input class= "form-control" id= "disabledInput" type= "text" placeholder= "Disabled input here..." disabled >
په دننه کې د ټولو کنټرولونو غیر فعالولو disabled
لپاره a ته خاصیت اضافه کړئ .<fieldset>
کاپي
<form>
<fieldset disabled >
<div class= "form-group" >
<label for= "disabledTextInput" > Disabled input</label>
<input type= "text" id= "disabledTextInput" class= "form-control" placeholder= "Disabled input" >
</div>
<div class= "form-group" >
<label for= "disabledSelect" > Disabled select menu</label>
<select id= "disabledSelect" class= "form-control" >
<option> Disabled select</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" >
Can't check this
</label>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Submit</button>
</fieldset>
</form>
د لنگرونو سره احتیاط
په ډیفالټ، براوزرونه به د ټولو اصلي فارم کنټرولونو ( <input>
، <select>
او <button>
عناصرو) دننه د <fieldset disabled>
غیر فعال په توګه چلند وکړي، په دوی کې د کیبورډ او ماوس تعامل مخه ونیسي. په هرصورت، که ستاسو په فورمه کې <a ... class="btn btn-*">
عناصر هم شامل وي، دا به یوازې د سټایل ورکړل شي pointer-events: none
. لکه څنګه چې د بټونو لپاره د غیر فعال حالت په اړه برخه کې یادونه شوې (او په ځانګړې توګه د لنگر عناصرو لپاره فرعي برخه کې)، دا د CSS ملکیت لا تر اوسه معیاري نه دی او په انټرنیټ اکسپلورر 10 کې په بشپړ ډول ملاتړ شوی نه دی، او د کیبورډ کاروونکو مخه نه نیسي. د دې لینکونو تمرکز یا فعالولو توان لري. نو د خوندي کیدو لپاره ، د داسې لینکونو غیر فعالولو لپاره دودیز جاواسکریپټ وکاروئ.
د کراس براوزر مطابقت
پداسې حال کې چې بوټسټریپ به دا سټایلونه په ټولو براوزرونو کې پلي کړي ، د انټرنیټ اکسپلورر 11 او لاندې په بشپړ ډول د disabled
ځانګړتیا ملاتړ نه کوي <fieldset>
. په دې براوزرونو کې د ساحې سیټ غیر فعالولو لپاره دودیز جاوا سکریپټ وکاروئ.
اعتبار
د HTML5 فورمې تایید سره خپلو کاروونکو ته ارزښتناکه، د عمل وړ فیډبیک چمتو کړئ- زموږ په ټولو ملاتړ شوي براوزرونو کې شتون لري . د براوزر ډیفالټ تایید فیډبیک څخه غوره کړئ ، یا زموږ د جوړ شوي ټولګیو او سټارټر جاوا سکریپټ سره دودیز پیغامونه پلي کړئ.
موږ اوس مهال د دودیز تایید سټایلونو کارولو وړاندیز کوو ، ځکه چې د اصلي براوزر ډیفالټ تایید پیغامونه په دوامداره توګه په ټولو براوزرونو کې مرستندویه ټیکنالوژیو ته نه خپریږي (په ځانګړي توګه په ډیسټاپ او ګرځنده کې کروم).
څنګه کار کوي
دلته د بوټسټریپ سره د فورمې اعتبار څنګه کار کوي:
د HTML فورمه تایید د CSS د دوه pseudo- ټولګیو له لارې پلي کیږي، :invalid
او :valid
. <input>
دا په , <select>
او <textarea>
عناصرو باندې تطبیق کیږي .
بوټسټریپ د مورني ټولګي لپاره سټایلونه :invalid
او سټایلونه ټاکي، معمولا په . که نه نو، د ارزښت پرته هر اړین ساحه د پاڼې په بار کې د غلط په توګه ښکاره کیږي. په دې توګه، تاسو کولی شئ غوره کړئ کله چې دوی فعال کړئ (په عموم ډول د فورمې سپارلو هڅه کیږي).:valid
.was-validated
<form>
د فورمې بڼه بیا تنظیمولو لپاره (د مثال په توګه، د AJAX په کارولو سره د متحرک فورمو سپارلو په صورت کې)، د سپارلو وروسته بیا .was-validated
ټولګي څخه لیرې کړئ.<form>
د فال بیک په توګه، .is-invalid
او .is-valid
ټولګي ممکن د سیډو-کلاسونو پرځای د سرور اړخ اعتبار لپاره وکارول شي . .was-validated
دوی د والدین ټولګي ته اړتیا نلري .
د سی ایس ایس د کار کولو په څرنګوالي کې د خنډونو له امله، موږ نشو کولی (اوس مهال) داسې سټایلونه پلي کړو <label>
چې د دودیز جاوا سکریپټ مرستې پرته په DOM کې د فارم کنټرول دمخه راځي.
ټول عصري براوزرونه د محدودیت تایید API ملاتړ کوي ، د فارم کنټرولونو اعتبار کولو لپاره د جاواسکریپټ میتودونو لړۍ.
د فیډبیک پیغامونه ممکن د براوزر ډیفالټ (د هر براوزر لپاره مختلف وي ، او د CSS له لارې غیر فعال وي) یا زموږ د دودیز فیډبیک سټایلونه د اضافي HTML او CSS سره وکاروي.
setCustomValidity
تاسو ممکن په جاواسکریپټ کې د دودیز اعتبار پیغامونه چمتو کړئ .
د دې په پام کې نیولو سره، زموږ د دودیز فارم تایید سټایلونو، اختیاري سرور اړخ ټولګیو، او د براوزر ډیفالټ لپاره لاندې ډیمو په پام کې ونیسئ.
دودیز سټایلونه
د دودیز بوټسټریپ فارم تصدیق کولو پیغامونو لپاره ، تاسو اړتیا لرئ په خپل کې د novalidate
بولین خاصیت اضافه کړئ <form>
. دا د براوزر ډیفالټ فیډبیک وسیلې لارښوونې غیر فعالوي ، مګر لاهم په جاواسکریپټ کې د فارم تصدیق APIs ته لاسرسی چمتو کوي. هڅه وکړئ لاندې فورمه وسپاري؛ زموږ جاواسکریپټ به د سپارلو تڼۍ ودروي او تاسو ته به فیډبیک وړاندې کړي. کله چې د سپارلو هڅه کوئ، تاسو به وګورئ چې ستاسو د فارم کنټرولونو کې پلي شوي سټایلونه :invalid
او سټایلونه.:valid
د دودیز فیډبیک سټایلونه دودیز رنګونه ، سرحدونه ، د تمرکز سټایلونه او د شالید عکسونه پلي کوي ترڅو د فیډبیک ښه اړیکه ونیسي. د s لپاره د شالید <select>
عکسونه یوازې د سره شتون لري .custom-select
، او نه .form-control
.
کاپي
<form class= "needs-validation" novalidate >
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationCustom01" > First name</label>
<input type= "text" class= "form-control" id= "validationCustom01" value= "Mark" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationCustom02" > Last name</label>
<input type= "text" class= "form-control" id= "validationCustom02" value= "Otto" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationCustomUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationCustomUsername" aria-describedby= "inputGroupPrepend" required >
<div class= "invalid-feedback" >
Please choose a username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationCustom03" > City</label>
<input type= "text" class= "form-control" id= "validationCustom03" required >
<div class= "invalid-feedback" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationCustom04" > State</label>
<select class= "custom-select" id= "validationCustom04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-feedback" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationCustom05" > Zip</label>
<input type= "text" class= "form-control" id= "validationCustom05" required >
<div class= "invalid-feedback" >
Please provide a valid zip.
</div>
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "invalidCheck" required >
<label class= "form-check-label" for= "invalidCheck" >
Agree to terms and conditions
</label>
<div class= "invalid-feedback" >
You must agree before submitting.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
( function () {
' use strict ' ;
window . addEventListener ( ' load ' , function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document . getElementsByClassName ( ' needs-validation ' );
// Loop over them and prevent submission
var validation = Array . prototype . filter . call ( forms , function ( form ) {
form . addEventListener ( ' submit ' , function ( event ) {
if ( form . checkValidity () === false ) {
event . preventDefault ();
event . stopPropagation ();
}
form . classList . add ( ' was-validated ' );
}, false );
});
}, false );
})();
</script>
د براوزر ډیفالټ
د دودیز تایید فیډبیک پیغامونو یا د فارم چلند بدلولو لپاره جاواسکریپټ لیکلو کې علاقه نلري؟ ټول ښه، تاسو کولی شئ د براوزر ډیفالټ وکاروئ. هڅه وکړئ لاندې فورمه وسپارئ. ستاسو په براوزر او OS پورې اړه لري، تاسو به د فیډبیک یو څه مختلف سټایل وګورئ.
پداسې حال کې چې دا فیډبیک سټایلونه د CSS سره سټایل نشي کیدی ، تاسو لاهم کولی شئ د جاواسکریپټ له لارې د فیډبیک متن دودیز کړئ.
کاپي
<form>
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationDefault01" > First name</label>
<input type= "text" class= "form-control" id= "validationDefault01" value= "Mark" required >
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationDefault02" > Last name</label>
<input type= "text" class= "form-control" id= "validationDefault02" value= "Otto" required >
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationDefaultUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend2" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationDefaultUsername" aria-describedby= "inputGroupPrepend2" required >
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationDefault03" > City</label>
<input type= "text" class= "form-control" id= "validationDefault03" required >
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationDefault04" > State</label>
<select class= "custom-select" id= "validationDefault04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationDefault05" > Zip</label>
<input type= "text" class= "form-control" id= "validationDefault05" required >
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "invalidCheck2" required >
<label class= "form-check-label" for= "invalidCheck2" >
Agree to terms and conditions
</label>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
د سرور اړخ
موږ د مراجعینو اړخ تایید کارولو وړاندیز کوو، مګر په هغه صورت کې چې تاسو د سرور اړخ تایید ته اړتیا لرئ، تاسو کولی شئ د ناسم او باوري فارم ساحې په نښه کړئ .is-invalid
او .is-valid
. په یاد ولرئ چې .invalid-feedback
د دې ټولګیو سره هم ملاتړ کیږي.
کاپي
<form>
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationServer01" > First name</label>
<input type= "text" class= "form-control is-valid" id= "validationServer01" value= "Mark" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationServer02" > Last name</label>
<input type= "text" class= "form-control is-valid" id= "validationServer02" value= "Otto" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationServerUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend3" > @</span>
</div>
<input type= "text" class= "form-control is-invalid" id= "validationServerUsername" aria-describedby= "inputGroupPrepend3" required >
<div class= "invalid-feedback" >
Please choose a username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationServer03" > City</label>
<input type= "text" class= "form-control is-invalid" id= "validationServer03" required >
<div class= "invalid-feedback" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationServer04" > State</label>
<select class= "custom-select is-invalid" id= "validationServer04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-feedback" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationServer05" > Zip</label>
<input type= "text" class= "form-control is-invalid" id= "validationServer05" required >
<div class= "invalid-feedback" >
Please provide a valid zip.
</div>
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input is-invalid" type= "checkbox" value= "" id= "invalidCheck3" required >
<label class= "form-check-label" for= "invalidCheck3" >
Agree to terms and conditions
</label>
<div class= "invalid-feedback" >
You must agree before submitting.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
ملاتړ شوي عناصر
د تایید سټایلونه د لاندې فارم کنټرولونو او برخو لپاره شتون لري:
<input>
s او <textarea>
s سره .form-control
(د .form-control
ان پټ ګروپونو کې تر یوې پورې)
<select>
s سره .form-control
یا.custom-select
.form-check
s
.custom-checkbox
s او .custom-radio
s
.custom-file
کاپي
<form class= "was-validated" >
<div class= "mb-3" >
<label for= "validationTextarea" > Textarea</label>
<textarea class= "form-control is-invalid" id= "validationTextarea" placeholder= "Required example textarea" required ></textarea>
<div class= "invalid-feedback" >
Please enter a message in the textarea.
</div>
</div>
<div class= "custom-control custom-checkbox mb-3" >
<input type= "checkbox" class= "custom-control-input" id= "customControlValidation1" required >
<label class= "custom-control-label" for= "customControlValidation1" > Check this custom checkbox</label>
<div class= "invalid-feedback" > Example invalid feedback text</div>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" class= "custom-control-input" id= "customControlValidation2" name= "radio-stacked" required >
<label class= "custom-control-label" for= "customControlValidation2" > Toggle this custom radio</label>
</div>
<div class= "custom-control custom-radio mb-3" >
<input type= "radio" class= "custom-control-input" id= "customControlValidation3" name= "radio-stacked" required >
<label class= "custom-control-label" for= "customControlValidation3" > Or toggle this other custom radio</label>
<div class= "invalid-feedback" > More example invalid feedback text</div>
</div>
<div class= "form-group" >
<select class= "custom-select" required >
<option value= "" > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "invalid-feedback" > Example invalid custom select feedback</div>
</div>
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "validatedCustomFile" required >
<label class= "custom-file-label" for= "validatedCustomFile" > Choose file...</label>
<div class= "invalid-feedback" > Example invalid custom file feedback</div>
</div>
</form>
که ستاسو د فورمې ترتیب دې ته اجازه ورکړي، تاسو کولی شئ د .{valid|invalid}-feedback
ټولګیو لپاره .{valid|invalid}-tooltip
ټولګي بدل کړئ ترڅو په سټایل شوي اوزار کې د تایید فیډبیک ښکاره کړي. ډاډ ترلاسه کړئ چې position: relative
د وسیلې ټایپ موقعیت لپاره په دې کې مور او پلار ولرئ. په لاندې مثال کې، زموږ د کالم ټولګي لا دمخه دا لري، مګر ستاسو پروژه ممکن یو بدیل ترتیب ته اړتیا ولري.
کاپي
<form class= "needs-validation" novalidate >
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationTooltip01" > First name</label>
<input type= "text" class= "form-control" id= "validationTooltip01" value= "Mark" required >
<div class= "valid-tooltip" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationTooltip02" > Last name</label>
<input type= "text" class= "form-control" id= "validationTooltip02" value= "Otto" required >
<div class= "valid-tooltip" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationTooltipUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "validationTooltipUsernamePrepend" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationTooltipUsername" aria-describedby= "validationTooltipUsernamePrepend" required >
<div class= "invalid-tooltip" >
Please choose a unique and valid username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationTooltip03" > City</label>
<input type= "text" class= "form-control" id= "validationTooltip03" required >
<div class= "invalid-tooltip" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationTooltip04" > State</label>
<select class= "custom-select" id= "validationTooltip04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-tooltip" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationTooltip05" > Zip</label>
<input type= "text" class= "form-control" id= "validationTooltip05" required >
<div class= "invalid-tooltip" >
Please provide a valid zip.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
دودیز کول
$form-validation-states
د اعتبار ریاستونه د نقشې سره د ساس له لارې تنظیم کیدی شي . زموږ په فایل کې موقعیت لري _variables.scss
، دا ساس نقشه د ډیفالټ valid
/ invalid
تایید حالتونو رامینځته کولو لپاره لوپ شوې. د هر ایالت رنګ او آئیکون دودیز کولو لپاره یو ځړول شوی نقشه شامله ده. پداسې حال کې چې کوم بل ایالتونه د براوزرونو لخوا ملاتړ نه کیږي، هغه کسان چې دودیز سټایلونه کاروي کولی شي په اسانۍ سره ډیر پیچلي بڼې فیډبیک اضافه کړي.
مهرباني وکړئ په یاد ولرئ چې موږ د دې ارزښتونو دودیز کولو وړاندیز نه کوو پرته له دې چې form-validation-state
مکسین تعدیل کړي.
کاپي
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states : map-merge (
(
"valid" : (
"color" : $form-feedback-valid-color ,
"icon" : $form-feedback-icon-valid
) ,
"invalid" : (
"color" : $form-feedback-invalid-color ,
"icon" : $form-feedback-icon-invalid
)
) ,
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state , $data in $form-validation-states {
@include form-validation-state ( $state , map-get ( $data , color ) , map-get ( $data , icon ));
}
د حتی ن��ر تخصیص او کراس براوزر تسلسل لپاره ، زموږ د بشپړ دودیز فارم عناصر وکاروئ د براوزر ډیفالټ بدلولو لپاره. دوی د سیمانټیک او د لاسرسي وړ مارک اپ په سر کې جوړ شوي ، نو دا د هرډول ډیفالټ فارم کنټرول لپاره قوي بدیل دي.
چک بکسونه او راډیوګانې
هر چک بکس او راډیو <input>
او جوړه زموږ د دودیز کنټرول رامینځته کولو لپاره <label>
په یوه کې پوښل شوې . <div>
په ساختماني توګه، دا زموږ د ډیفالټ په څیر ورته طریقه ده .form-check
.
~
موږ د خپلو ټولو <input>
ایالتونو لپاره د وروڼه انتخاب کونکی ( ) کاروو — لکه :checked
— زموږ د دودیز فارم شاخص په سمه توګه سټایل کولو لپاره. کله چې د .custom-control-label
ټولګي سره یوځای شي، موږ کولی شو د هر توکي لپاره متن د حالت پر بنسټ سټایل کړو <input>
.
موږ د ډیفالټ <input>
سره پټوو او د نوي دودیز فارم شاخص جوړولو لپاره یې په خپل ځای کې او سره opacity
کاروو . له بده مرغه موږ نشو کولی یوازې له دې څخه دودیز جوړ کړو ځکه چې CSS په دې عنصر کار نه کوي..custom-control-label
::before
::after
<input>
content
په چک شوي ایالتونو کې، موږ د Open Iconic څخه د بیس64 ایمبیډ شوي SVG شبیه کاروو . دا موږ ته په براوزرونو او وسیلو کې د سټایل کولو او موقعیت ورکولو لپاره غوره کنټرول چمتو کوي.
چک بکسونه
کاپي
<div class= "custom-control custom-checkbox" >
<input type= "checkbox" class= "custom-control-input" id= "customCheck1" >
<label class= "custom-control-label" for= "customCheck1" > Check this custom checkbox</label>
</div>
دودیز چیک باکسونه کولی شي د :indeterminate
سیډو کلاس هم وکاروي کله چې په لاسي ډول د جاواسکریپټ له لارې تنظیم شي (د دې مشخص کولو لپاره د HTML ځانګړتیا شتون نلري).
که تاسو jQuery کاروئ، د دې په څیر یو څه باید کافي وي:
کاپي
$ ( ' .your-checkbox ' ). prop ( ' indeterminate ' , true )
راډیوګانې
کاپي
<div class= "custom-control custom-radio" >
<input type= "radio" id= "customRadio1" name= "customRadio" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadio1" > Toggle this custom radio</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" > Or toggle this other custom radio</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" > Toggle this custom radio</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" > Or toggle this other custom radio</label>
</div>
معلول
دودیز چیک باکسونه او راډیوګانې هم غیر فعال کیدی شي. disabled
ته د بولین خاصیت اضافه کړئ <input>
او د دودیز شاخص او لیبل توضیحات به په اوتومات ډول سټایل شي.
کاپي
<div class= "custom-control custom-checkbox" >
<input type= "checkbox" class= "custom-control-input" id= "customCheckDisabled1" disabled >
<label class= "custom-control-label" for= "customCheckDisabled1" > Check this custom checkbox</label>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" name= "radioDisabled" id= "customRadioDisabled2" class= "custom-control-input" disabled >
<label class= "custom-control-label" for= "customRadioDisabled2" > Toggle this custom radio</label>
</div>
سویچونه
یو سویچ د دودیز چیک باکس مارک اپ لري مګر .custom-switch
د ټګل سویچ وړاندې کولو لپاره ټولګي کاروي. سویچونه هم د disabled
ځانګړتیا ملاتړ کوي.
کاپي
<div class= "custom-control custom-switch" >
<input type= "checkbox" class= "custom-control-input" id= "customSwitch1" >
<label class= "custom-control-label" for= "customSwitch1" > Toggle this switch element</label>
</div>
<div class= "custom-control custom-switch" >
<input type= "checkbox" class= "custom-control-input" disabled id= "customSwitch2" >
<label class= "custom-control-label" for= "customSwitch2" > Disabled switch element</label>
</div>
ګمرکي <select>
مینو یوازې دودیز ټولګي ته اړتیا لري، .custom-select
د دودیز سټایلونو محرک کولو لپاره. دودیز سټایلونه <select>
د لومړني ظهور پورې محدود دي او نشي کولی <option>
د براوزر محدودیتونو له امله s بدل کړي.
دا انتخاب مینو خلاص کړئ یو دوه درې
کاپي
<select class= "custom-select" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
تاسو کولی شئ د کوچني او لوی دودیز انتخابونو څخه هم وټاکئ ترڅو زموږ د ورته اندازې متن آخذونو سره سمون ولري.
دا انتخاب مینو خلاص کړئ یو دوه درې
دا انتخاب مینو خلاص کړئ یو دوه درې
کاپي
<select class= "custom-select custom-select-lg mb-3" >
<option selected > Open this select menu</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 > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
multiple
صفت هم ملاتړ کیږي :
دا انتخاب مینو خلاص کړئ یو دوه درې
کاپي
<select class= "custom-select" multiple >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
لکه څنګه چې size
صفت دی:
دا انتخاب مینو خلاص کړئ یو دوه درې
کاپي
<select class= "custom-select" size= "3" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
رینج
سره دودیز <input type="range">
کنټرولونه جوړ کړئ .custom-range
. ټریک (شالید) او ګوتو (ارزښت) دواړه په براوزرونو کې د ورته څرګندیدو لپاره سټایل شوي دي. لکه څنګه چې یوازې IE او فایرفوکس د ګوتو له ښي یا ښي اړخ څخه د دوی ټریک "ډکولو" ملاتړ کوي د لید په توګه د پرمختګ څرګندولو لپاره ، موږ اوس مهال دا ملاتړ نه کوو.
د بېلګې لړۍ
کاپي
<label for= "customRange1" > Example range</label>
<input type= "range" class= "custom-range" id= "customRange1" >
min
د سلسلې آخذې په ترتیب سره د - او max
- 0
لپاره ضمني ارزښتونه 100
لري. تاسو ممکن د هغو کسانو لپاره نوي ارزښتونه مشخص کړئ چې دا min
او max
ځانګړتیاوې کاروي.
د بېلګې لړۍ
کاپي
<label for= "customRange2" > Example range</label>
<input type= "range" class= "custom-range" min= "0" max= "5" id= "customRange2" >
د ډیفالټ په واسطه، د رینج آخذه د عدد ارزښتونو ته "snap" ورکوي. د دې بدلولو لپاره، تاسو کولی شئ یو step
ارزښت مشخص کړئ. په لاندې مثال کې، موږ په کارولو سره د ګامونو شمیر دوه چنده کوو step="0.5"
.
د بېلګې لړۍ
کاپي
<label for= "customRange3" > Example range</label>
<input type= "range" class= "custom-range" min= "0" max= "5" step= "0.5" id= "customRange3" >
د فایل براوزر
د دودیز فایل ان پټ متحرک کولو لپاره وړاندیز شوی پلگ ان: bs-custom-file-input ، دا هغه څه دي چې موږ یې اوس دلته زموږ په اسنادو کې کاروو.
د دوتنې ان پټ د ډنډ څخه خورا لوی دی او اضافي جاوا سکریپټ ته اړتیا لري که تاسو غواړئ دوی د فعال انتخاب فایل سره وصل کړئ… او د فایل نوم متن غوره کړئ.
کاپي
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFile" >
<label class= "custom-file-label" for= "customFile" > Choose file</label>
</div>
موږ د ډیفالټ فایل <input>
له لارې پټوو opacity
او پرځای یې سټایل کوو <label>
. تڼۍ تولید شوې او د سره موقعیت لري ::after
. په نهایت کې ، موږ د شاوخوا مینځپانګې لپاره د مناسب واټن لپاره a width
او height
on اعلان کوو.<input>
د SCSS سره د تارونو ژباړل یا دودول
:lang()
pseudo-class د دې لپاره کارول کیږي چې نورو ژبو ته د "براؤز" متن ژباړلو اجازه ورکړي. د اړونده ژبې ټاګ او ځایی شوي تارونو $custom-file-text
سره د Sass متغیر ته ننوتل یا اضافه کړئ . د انګلیسي تارونه په ورته ډول تنظیم کیدی شي. د مثال په توګه، دلته دا دی چې څنګه یو څوک کولی شي هسپانوي ژباړه اضافه کړي (د هسپانوي ژبې کوډ دی ):es
کاپي
$custom-file-text : (
en : "Browse" ,
es : "Elegir"
);
دلته د lang(es)
هسپانوي ژباړې لپاره د دودیز فایل ان پټ په عمل کې دی:
کاپي
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFileLang" lang= "es" >
<label class= "custom-file-label" for= "customFileLang" > Seleccionar Archivo</label>
</div>
تاسو اړتیا لرئ د خپل سند ژبه (یا د هغې فرعي ونې) په سمه توګه تنظیم کړئ ترڅو سم متن وښودل شي. دا د نورو میتودونو په مینځ کې د عنصر یا HTTP سرلیک کې د lang
ځانګړتیا په کارولو سره ترسره کیدی شي .<html>
Content-Language
د HTML سره د تارونو ژباړل یا دودول
بوټسټریپ په HTML کې د "براؤز" متن د وژباړلو لپاره یوه لاره هم چمتو کوي د data-browse
ځانګړتیا سره کوم چې د دودیز ان پټ لیبل کې اضافه کیدی شي (مثال په هالنډ کې):
کاپي
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFileLangHTML" >
<label class= "custom-file-label" for= "customFileLangHTML" data-browse= "Bestand kiezen" > Voeg je document toe</label>
</div>