فورمې
د فارم کنټرول سټایلونو، ترتیب اختیارونو، او د مختلفو بڼو د جوړولو لپاره دودیز اجزاوو لپاره مثالونه او د کارولو لارښوونې.
کتنه
د بوټسټریپ فارم کنټرولونه زموږ د ریبوټ شوي فارم سټایلونو کې د ټولګیو سره پراخیږي. د دې ټولګیو څخه کار واخلئ ترڅو په براوزرونو او وسیلو کې د لا دوامداره رینډرینګ لپاره د دوی دودیز ډیزاینونو غوره کولو لپاره وکاروئ.
ډاډ ترلاسه کړئ چې 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 row">
<legend class="col-form-label col-sm-2 float-sm-left 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>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<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
د پورته معلوماتو څخه د اسانه واټن لپاره ځینې پورتنۍ حاشیه شامله او اضافه کوي.
<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>
<legend>Disabled fieldset example</legend>
<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 کې ملاتړ شوی نه دی. د لنگر پر بنسټ کنټرولونه به هم وي. د کیبورډ په کارولو سره د تمرکز وړ او د چلولو وړ. تاسو باید دا کنټرولونه په لاسي ډول د دې په اضافه کولو سره ترمیم کړئ tabindex="-1"
ترڅو دوی د تمرکز ترلاسه کولو مخه ونیسي او aria-disabled="disabled"
د دوی حالت مرستندویه ټیکنالوژیو ته سیګنال کړي.
د کراس براوزر مطابقت
پداسې حال کې چې بوټسټریپ به دا سټایلونه په ټولو براوزرونو کې پلي کړي ، د انټرنیټ اکسپلورر 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-6 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-6 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>
<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-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</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
د دې ټولګیو سره هم ملاتړ کیږي.
د ناسمو ساحو لپاره، ډاډ ترلاسه کړئ چې د غلط فیډبیک/غلطي پیغام د اړونده فارم ساحې سره د کارولو سره تړاو لري aria-describedby
. دا خاصیت له یو id
څخه ډیرو ته د حوالې اجازه ورکوي، په هغه صورت کې چې ساحه دمخه د اضافي بڼې متن ته اشاره کوي.
<form>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" 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
<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="mb-3">
<select class="custom-select" required>
<option value="">Choose...</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 mb-3">
<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>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
وسیلې
که ستاسو د فورمې ترتیب دې ته اجازه ورکړي، تاسو کولی شئ د .{valid|invalid}-feedback
ټولګیو لپاره .{valid|invalid}-tooltip
ټولګي بدل کړئ ترڅو په سټایل شوي اوزار کې د تایید فیډبیک ښکاره کړي. ډاډ ترلاسه کړئ چې position: relative
د وسیلې ټایپ موقعیت لپاره په دې کې مور او پلار ولرئ. په لاندې مثال کې، زموږ د کالم ټولګي دا دمخه لري، مګر ستاسو پروژه ممکن یو بدیل ترتیب ته اړتیا ولري.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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));
}
د ګروپ تایید داخل کړئ
د دې معلومولو لپاره چې کوم عناصر د تایید سره د ان پټ ګروپ دننه ګردي کونجونو ته اړتیا لري، د ان پټ ګروپ اضافي .has-validation
ټولګي ته اړتیا لري.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
دودیز بڼې
د حتی نور تخصیص او کراس براوزر تسلسل لپاره ، زموږ د بشپړ دودیز فارم عناصر وکاروئ د براوزر ډیفالټ بدلولو لپاره. دوی د سیمانټیک او د لاسرسي وړ مارک اپ په سر کې جوړ شوي ، نو دا د هرډول ډیفالټ فارم کنټرول لپاره قوي بدیل دي.
چک بکسونه او راډیوګانې
هر چک بکس او راډیو <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="customRadioInline" 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="customRadioInline" 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">
د فایل براوزر
د دوتنې ان پټ د ډنډ څخه خورا لوی دی او اضافي جاوا سکریپټ ته اړتیا لري که تاسو غواړئ دوی د فعال انتخاب فایل سره وصل کړئ… او د فایل نوم متن غوره کړئ.
<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>