ڕیزبەست

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

لەم پەیجەدا

فۆڕمەکان

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

تازە لە فۆڕمی وێبگەڕەکان؟ بیر لە پێداچوونەوە بە دۆکیومێنتەکانی فۆڕمی MDN بکەرەوە بۆ تێڕوانینێکی گشتی و لیستی تەواوی تایبەتمەندییە بەردەستەکان.
<button>s لەناو <form>پێشوەختەدا بۆ type="submit", بۆیە هەوڵبدە تایبەت بیت و هەمیشە a type.
دەتوانیت هەموو توخمێکی فۆڕم لەناو فۆڕمێکدا بە disabledتایبەتمەندی لەسەر <form>.

بەو پێیەی Bootstrap کاردەکات display: blockو width: 100%بۆ نزیکەی هەموو کۆنتڕۆڵەکانی فۆڕمەکانمان، فۆڕمەکان بە شێوەیەکی دیفۆڵت بە شێوەی ڕاست ستاک دەبن. دەتوانرێت پۆلی زیادە بەکاربهێنرێت بۆ گۆڕینی ئەم شێوازە لەسەر بنەمای هەر فۆڕمێک.

خزمەتگوزارییەکان

سوودمەندی پەراوێز ئاسانترین ڕێگایە بۆ زیادکردنی هەندێک پێکهاتە بۆ فۆڕمەکان. ئەوان گرووپکردنی بنەڕەتی ناوەکان، کۆنتڕۆڵەکان، دەقی فۆڕمی هەڵبژاردە، و پەیامەکانی چەسپاندنی فۆڕم دابین دەکەن. پێشنیار دەکەین پابەند بیت بە margin-bottomخزمەتگوزارییەکان، و بەکارهێنانی یەک ئاراستە لە سەرتاسەری فۆڕمەکەدا بۆ یەکدەنگی.

ئازادانە فۆڕمەکانت بە هەر شێوەیەک حەزت لێیە دروست بکە، بە <fieldset>s، <div>s، یان نزیکەی هەر توخمێکی تر.

نموونەی لیبێڵ

یەکێکی تر لە لیبێڵەکان

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

تۆڕی فۆڕم

دەتوانرێت فۆڕمی ئاڵۆزتر دروست بکرێت بە بەکارهێنانی پۆلەکانی تۆڕەکەمان. ئەمانە بۆ نەخشەی فۆڕمەکان بەکاربهێنە کە پێویستیان بە چەندین ستوون، پانایی جۆراوجۆر و هەڵبژاردەی ڕێکخستنی زیادە هەیە. پێویستی بە $enable-grid-classesچالاککردنی گۆڕاوەی Sass هەیە (بە شێوازی پێشوەختە چالاک بێت).

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

کانیاوەکان

بە زیادکردنی پۆلەکانی گۆڕینی کانیاو , دەتوانیت کۆنتڕۆڵی پانایی کانیاوەکەت هەبێت لە هەروەها لە هێڵی ناوەوە و ئاراستەی بلۆک. هەروەها پێویستە $enable-grid-classesگۆڕاوەی Sass چالاک بکرێت (بە شێوازی پێشوەختە چالاک بێت).

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

هەروەها دەتوانرێت بە سیستەمی تۆڕەکە نەخشەی ئاڵۆزتر دروست بکرێت.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <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>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

فۆڕمی ئاسۆیی

فۆڕمی ئاسۆیی بە تۆڕەکە دروست بکە بە زیادکردنی .rowپۆلەکە بۆ فۆڕمی گروپەکان و بەکارهێنانی .col-*-*پۆلەکان بۆ دیاریکردنی پانایی ناو و کۆنتڕۆڵەکانت. دڵنیابە کە زیاد بکە .col-form-labelبۆ s ـەکەت <label>بە هەمان شێوە بۆ ئەوەی بە شێوەی ڕاست ناوەند بن لەگەڵ کۆنتڕۆڵەکانی فۆڕمی پەیوەندیداریان.

لە هەندێک کاتدا، ڕەنگە پێویستت بە بەکارهێنانی سوودمەندیەکانی پەراوێز یان پادکردن بێت بۆ دروستکردنی ئەو ڕێکخستنە تەواوەی کە پێویستتە. padding-topبۆ نموونە، ئێمە ناوی زانیارییەکانی هاتنەژوورەوەی ڕادیۆیی کۆکراومان لابردووە بۆ ئەوەی باشتر هێڵی بنەڕەتی دەقەکە ڕێکبخەین.

<form>
  <div class="row mb-3">
    <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="row mb-3">
    <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="row mb-3">
    <legend class="col-form-label col-sm-2 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="row mb-3">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

قەبارەدانانی لیبێڵی فۆڕمی ئاسۆیی

دڵنیابە لە بەکارهێنانی .col-form-label-smیان .col-form-label-lgبۆ <label>s یان <legend>s ی خۆت بۆ ئەوەی بە دروستی قەبارەی .form-control-lgو پەیڕەو بکەیت .form-control-sm.

ئیمەیڵ

<div class="row mb-3">
  <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="row mb-3">
  <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="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>

قەبارەدانانی ستوونەکان

وەک لە نموونەکانی پێشوودا نیشان دراوە، سیستەمی تۆڕەکەمان ڕێگەت پێدەدات هەر ژمارەیەک .cols لەناو a .row. پانایی بەردەست بە یەکسانی لە نێوانیاندا دابەش دەکەن. هەروەها دەتوانیت ژێرکۆمەڵێک لە ستوونەکانت هەڵبژێریت بۆ ئەوەی کەم یان زۆر شوێن بگرێتەوە، لە کاتێکدا .cols ی ماوەتەوە بە یەکسانی باقی دابەش دەکات، لەگەڵ پۆلی ستوونی تایبەت وەک .col-sm-7.

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

قەبارەی ئۆتۆماتیکی

نموونەی خوارەوە سوودمەندی flexbox بەکاردەهێنێت بۆ ناوەندکردنی ناوەڕۆکەکان بە شێوەیەکی ڕاست و دەگۆڕێت .colبۆ .col-autoئەوەی ستوونەکانت تەنها ئەوەندە شوێنی پێویست بگرن. بە جۆرێکی تر، ستوونەکە قەبارەی خۆی بە پشتبەستن بە ناوەڕۆکەکەی دادەنێت.

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <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">
    <div class="form-check">
      <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">Submit</button>
  </div>
</form>

پاشان دەتوانیت جارێکی تر ئەو شتە بە پۆلەکانی ستوونی تایبەت بە قەبارە ڕیمیکس بکەیتەوە.

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <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">
    <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">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

فۆڕمی ناو هێڵ

پۆلەکان بەکاربهێنە .row-cols-*بۆ دروستکردنی نەخشەی ئاسۆیی وەڵامدەرەوە. بە زیادکردنی پۆلەکانی گۆڕینی کانیاوەکان , کانیاوەکانمان دەبێت بە ئاراستەی ئاسۆیی و ڕاست. لەسەر ڤیوپۆرتە تەسکەکانی مۆبایل، .col-12یارمەتی کۆکردنەوەی کۆنتڕۆڵەکانی فۆڕم و زۆر شتی تر دەدات. The .align-items-centerتوخمەکانی فۆڕمەکە بە ناوەڕاست ڕێکدەخات، .form-checkboxڕێکخستنەکە بە باشی دەکات.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>