فارم

اوسر

بوٽ اسٽريپ جا فارم ڪنٽرول اسان جي ريبوٽ ٿيل فارم جي طرز تي ڪلاسن سان گڏ وڌندا آھن. انهن طبقن کي استعمال ڪريو انهن جي ڪسٽمائيز ڊسپليز کي چونڊڻ لاءِ وڌيڪ هڪجهڙائي واري رينڊرنگ لاءِ برائوزرن ۽ ڊوائيسز تي.

نئين ان پٽ ڪنٽرولن جهڙوڪ اي ميل جي تصديق، نمبر جي چونڊ، ۽ وڌيڪ مان فائدو وٺڻ لاءِ 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>

معذور فارم

disabledاستعمال ڪندڙ جي رابطي کي روڪڻ لاءِ ان پٽ تي بوليان وصف شامل ڪريو ۽ ان کي روشن ڪرڻ لاءِ.

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

disabledوصف شامل ڪريو a <fieldset>۾ سڀني ڪنٽرولن کي غير فعال ڪرڻ لاءِ. براؤزرز سڀني ڏيتي ليتي ڪنٽرول ( <input>, <select>, and <button>elements ) جي اندر هڪ <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-*variables.

متغير

$input-btn-*variables اسان جي بٽڻ ۽ اسان جي فارم حصن جي وچ ۾ عالمي متغير آهن . توھان ڳوليندا ھين اڪثر ڪري مقرر ڪيل قدرن جي طور تي ٻين جزن جي مخصوص متغيرن کي.

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