باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

فۆڕمەکان

نموونە و ڕێنماییەکانی بەکارهێنان بۆ شێوازەکانی کۆنترۆڵکردنی فۆڕم، هەڵبژاردەکانی نەخشە و پێکهاتە تایبەتەکان بۆ دروستکردنی فۆڕمی جۆراوجۆر.

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

کۆنتڕۆڵەکانی فۆڕمی 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.

پەیوەستکردنی دەقی فۆڕم بە کۆنتڕۆڵەکانی فۆڕم

دەقی فۆڕم دەبێ بە ڕوونی پەیوەست بێت بە کۆنترۆڵی فۆڕمەوە کە پەیوەندی بە بەکارهێنانی 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>

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

تایبەتمەندی 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;