فۆڕمەکان

تێڕوانینێکی گشتی

کۆنتڕۆڵەکانی فۆڕمی Bootstrap فراوانتر دەبن لەسەر ستایلەکانی فۆڕمی Rebooted ی ئێمە لەگەڵ پۆلەکان. ئەم پۆلانە بەکاربهێنە بۆ هەڵبژاردنی نمایشە تایبەتمەندەکانیان بۆ ڕەندەرکردنێکی یەکگرتووتر لە سەرانسەری وێبگەڕ و ئامێرەکاندا.

دڵنیابە لە بەکارهێنانی typeتایبەتمەندییەکی گونجاو لەسەر هەموو زانیارییەکانی ناوەوە (بۆ نموونە، emailبۆ ناونیشانی ئیمەیڵ یان numberبۆ زانیاری ژمارەیی) بۆ سوودوەرگرتن لە کۆنتڕۆڵە نوێیەکانی چوونەژوورەوە وەک پشتڕاستکردنەوەی ئیمەیڵ، هەڵبژاردنی ژمارە و زۆر شتی تر.

لێرەدا نموونەیەکی خێرا بۆ نیشاندانی شێوازەکانی فۆڕمی Bootstrap دەخەینەڕوو. بەردەوام بە لە خوێندنەوە بۆ بەڵگەنامەکردن لەسەر پۆلە پێویستەکان، شێوازی فۆڕم و زۆر شتی تر.

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

فۆڕمی کەمئەندام

تایبەتمەندی boolean لەسەر ئینپوتێک زیاد بکە disabledبۆ ڕێگریکردن لە کارلێکەکانی بەکارهێنەر و واکردنی سووکتر دەربکەوێت.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

disabledتایبەتمەندیەکە زیاد بکە بۆ a <fieldset>بۆ لەکارخستنی هەموو کۆنتڕۆڵەکانی ناوەوە. وێبگەڕەکان هەموو کۆنتڕۆڵەکانی فۆڕمی ڕەسەن ( <input>, <select>, و <button>توخمەکان) لە ناو a <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;