فورمې

کتنه

د بوټسټریپ فارم کنټرولونه زموږ د ریبوټ شوي فارم سټایلونو کې د ټولګیو سره پراخیږي. د دې ټولګیو څخه کار واخلئ ترڅو په براوزرونو او وسیلو کې د لا دوامداره رینډرینګ لپاره د دوی دودیز ډیزاینونو غوره کولو لپاره وکاروئ.

ډاډ ترلاسه کړئ چې 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.

د فورم متن لاندې داخلونه په سټایل کې کیدی شي .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منځپانګې، چې کله د فورمې ساحې مینځپانګې ولري له منځه ځي) به د مرستندویه ټیکنالوژۍ کاروونکو ته ګټه ورسوي، د لیبل لیبل متن نشتوالی ممکن د ځینو کاروونکو لپاره ستونزه وي. د لید لیبل ځینې ډولونه عموما د لاسرسي او کارونې لپاره غوره لاره ده.

ساس

ډیری فورمې تغیرات په عمومي کچه ټاکل شوي ترڅو د انفرادي فارم اجزاو لخوا بیا وکارول شي او پراخ شي. تاسو به دا ډیری وختونه $input-btn-*او $input-*تغیرات وګورئ.

متغیرات

$input-btn-*متغیرونه زموږ د بټونو او زموږ د فارم اجزاو ترمنځ شریک نړیوال متغیرونه دي. تاسو به دا په مکرر ډول د نورو اجزاو ځانګړي متغیرونو ته د ارزښتونو په توګه بیا ګمارل ومومئ.

$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;