فارم
مثال ۽ استعمال جون هدايتون فارم ڪنٽرول اسلوب لاءِ، ترتيب جا اختيار، ۽ مختلف قسم جا فارم ٺاهڻ لاءِ ڪسٽم اجزاء.
اوسر
بوٽ اسٽريپ جا فارم ڪنٽرول اسان جي ريبوٽ ٿيل فارم جي طرز تي ڪلاسن سان گڏ وڌندا آھن. انهن طبقن کي استعمال ڪريو انهن جي ڪسٽمائيز ڊسپليز کي چونڊڻ لاءِ وڌيڪ هڪجهڙائي واري رينڊرنگ لاءِ برائوزرن ۽ ڊوائيسز تي.
نئين ان پٽ ڪنٽرولن جهڙوڪ اي ميل جي تصديق، نمبر جي چونڊ، ۽ وڌيڪ مان فائدو وٺڻ لاءِ 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>
معذور فارم
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
مواد، جيڪو غائب ٿي ويندو آهي هڪ ڀيرو فارم فيلڊ ۾ مواد هوندو آهي) مددگار ٽيڪنالاجي استعمال ڪندڙن کي فائدو ڏيندو، ليبل جي ظاهري متن جي کوٽ اڃا به ڪجهه صارفين لاءِ مسئلو ٿي سگهي ٿي. ڏسڻ واري ليبل جي ڪجهه شڪل عام طور تي بهترين طريقو آهي، ٻنهي جي رسائي ۽ استعمال لاء.
ساس
ڪيترائي فارم متغير هڪ عام سطح تي مقرر ڪيا ويا آهن ٻيهر استعمال ڪرڻ ۽ انفرادي فارم جي اجزاء طرفان وڌايو وڃي. توهان ڏسندا اهي اڪثر اڪثر $btn-input-*
۽ $input-*
variables.
متغير
$btn-input-*
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;