فورمې
د فارم کنټرول سټایلونو، ترتیب اختیارونو، او د مختلفو بڼو د جوړولو لپاره دودیز اجزاوو لپاره مثالونه او د کارولو لارښوونې.
کتنه
د بوټسټریپ فارم کنټرولونه زموږ د ریبوټ شوي فارم سټایلونو کې د ټولګیو سره پراخیږي. د دې ټولګیو څخه کار واخلئ ترڅو په براوزرونو او وسیلو کې د لا دوامداره رینډرینګ لپاره د دوی دودیز ډیزاینونو غوره کولو لپاره وکاروئ.
ډاډ ترلاسه کړئ چې type
په ټولو داخلونو کې یو مناسب خاصیت وکاروئ (د بیلګې په توګه email
د بریښنالیک آدرس یا number
شمیري معلوماتو لپاره) ترڅو د نوي ان پټ کنټرولونو څخه ګټه پورته کړئ لکه د بریښنالیک تصدیق ، شمیره انتخاب او نور.
دلته د بوټسټریپ فارم سټایلونو ښودلو لپاره یو ګړندی مثال دی. د اړینو ټولګیو، فورمې ترتیب، او نور په اړه د اسنادو لوستلو ته دوام ورکړئ.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 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>
فورمه متن
د بلاک په کچه یا د انلاین کچې فورمه متن په کارولو سره رامینځته کیدی شي .form-text
.
د فارم کنټرولونو سره د فورم متن شریکول
د فورم متن باید په ښکاره ډول د فارم کنټرول سره تړاو ولري چې دا د aria-describedby
ځانګړتیا کارولو پورې اړه لري. دا به ډاډ ترلاسه کړي چې مرستندویه ټیکنالوژي — لکه د سکرین لوستونکي — به د دې فارم متن اعلان کړي کله چې کارونکي تمرکز کوي یا کنټرول ته ننوځي.
د فورم متن لاندې داخلونه په سټایل کې کیدی شي .form-text
. که چیرې د بلاک کچې عنصر وکارول شي، د پورتنیو معلوماتو څخه د اسانه فاصلې لپاره لوړ حاشیه اضافه کیږي.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
انلاین متن کولی شي هر ډول عادي انلاین HTML عنصر وکاروي (که دا یو <span>
، <small>
یا بل څه وي) پرته له .form-text
ټولګي پرته.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
معلول شوي فورمې
disabled
د بولین خاصیت په ان پټ کې اضافه کړئ ترڅو د کارونکي متقابل عمل مخه ونیسي او دا روښانه ښکاري.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
په دننه کې د ټولو کنټرولونو غیر فعالولو disabled
لپاره a ته خاصیت اضافه کړئ . <fieldset>
براوزر ټول اصلي بڼه کنټرولونه ( <input>
, <select>
, او <button>
عناصر) دننه د <fieldset disabled>
معلول په توګه چلند کوي، په دوی کې د کیبورډ او ماوس تعامل مخه نیسي.
په هرصورت، که ستاسو په فورمه کې د دودیز تڼۍ په څیر عناصر هم شامل وي لکه <a class="btn btn-*">...</a>
، دا به یوازې د سټایل ورکړل شي pointer-events: none
، پدې معنی چې دوی لاهم د کیبورډ په کارولو سره د تمرکز وړ او د کار وړ دي. په دې حالت کې، تاسو باید دا کنټرولونه په لاسي ډول tabindex="-1"
د دوی د تمرکز ترلاسه کولو څخه مخنیوي او aria-disabled="disabled"
مرستندویه ټیکنالوژیو ته د دوی حالت په نښه کولو سره اضافه کړئ.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<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>
لاسرسی
ډاډ ترلاسه کړئ چې ټول فارم کنټرولونه د لاسرسي وړ مناسب نوم لري ترڅو د دوی هدف د مرستندویه ټیکنالوژیو کاروونکو ته واستول شي. د دې ترلاسه کولو لپاره ترټولو ساده لاره د <label>
عنصر کارول دي، یا د بټونو په حالت کې - د محتوياتو د یوې برخې په توګه د کافي توضیحي متن شاملولو لپاره <button>...</button>
.
د هغو شرایطو لپاره چې د لیدلو وړ یا مناسب متن منځپانګې شاملول ممکن نه وي <label>
، د لاسرسي وړ نوم چمتو کولو بدیل لارې شتون لري، لکه:
<label>
.visually-hidden
عناصر د ټولګي په کارولو سره پټ شوي- یو موجود عنصر ته اشاره کول چې کولی شي د لیبل په توګه کار وکړي
aria-labelledby
title
د صفت برابرول- په ښکاره ډول په یو عنصر کې د لاسرسي وړ نوم په کارولو سره تنظیم کول
aria-label
که چیرې له دې څخه هیڅ هم شتون ونلري، مرستندویه ټیکنالوژي ممکن د لاسرسي وړ نوم او عناصرو placeholder
لپاره د فال بیک په توګه د صفت کارولو څخه کار واخلي . په دې برخه کې مثالونه یو څو وړاندیز شوي، د قضیې ځانګړي طریقې وړاندې کوي.<input>
<textarea>
پداسې حال کې چې د لید پټ مینځپانګې کارول ( .visually-hidden
, aria-label
, او حتی placeholder
منځپانګې، چې کله د فورمې ساحې مینځپانګې ولري له منځه ځي) به د مرستندویه ټیکنالوژۍ کاروونکو ته ګټه ورسوي، د لیبل لیبل متن نشتوالی ممکن د ځینو کاروونکو لپاره ستونزه وي. د لید لیبل ځینې ډولونه عموما د لاسرسي او کارونې لپاره غوره لاره ده.
ساس
ډیری فورمې تغیرات په عمومي کچه ټاکل شوي ترڅو د انفرادي فارم اجزاو لخوا بیا وکارول شي او پراخ شي. تاسو به دا ډیری وختونه $btn-input-*
او $input-*
تغیرات وګورئ.
متغیرات
$btn-input-*
متغیرونه زموږ د بټونو او زموږ د فارم اجزاو ترمنځ شریک نړیوال متغیرونه دي. تاسو به دا په مکرر ډول د نورو اجزاو ځانګړي متغیرونو ته د ارزښتونو په توګه بیا ګمارل ومومئ.
$input-btn-padding-y: .375rem;
$input-btn-padding-x: .75rem;
$input-btn-font-family: null;
$input-btn-font-size: $font-size-base;
$input-btn-line-height: $line-height-base;
$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur: 0;
$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm: .25rem;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-padding-y-lg: .5rem;
$input-btn-padding-x-lg: 1rem;
$input-btn-font-size-lg: $font-size-lg;
$input-btn-border-width: $border-width;