فارمز

جائزہ

بوٹسٹریپ کے فارم کنٹرول کلاسز کے ساتھ ہمارے ریبوٹ شدہ فارم اسٹائل پر پھیلتے ہیں۔ ان کلاسز کو براؤزرز اور ڈیوائسز پر زیادہ مستقل رینڈرنگ کے لیے ان کے حسب ضرورت ڈسپلے کا انتخاب کرنے کے لیے استعمال کریں۔

نئے ان پٹ کنٹرولز جیسے ای میل کی توثیق، نمبر کا انتخاب، وغیرہ سے فائدہ اٹھانے کے لیے تمام ان پٹس (مثلاً ای میل ایڈریس یا عددی معلومات کے لیے) پر ایک مناسب typeوصف استعمال کرنا یقینی بنائیں۔emailnumber

بوٹسٹریپ کے فارم اسٹائل کو ظاہر کرنے کے لیے یہاں ایک فوری مثال ہے۔ مطلوبہ کلاسز، فارم لے آؤٹ، اور مزید پر دستاویزات کے لیے پڑھتے رہیں۔

<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>اور <button>عناصر) کو ایک کے اندر <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-*متغیرات کے طور پر دیکھیں گے۔

متغیرات

$input-btn-*متغیرات ہمارے بٹنوں اور ہمارے فارم کے اجزاء کے درمیان مشترکہ عالمی متغیر ہیں۔ آپ کو یہ ملیں گے کہ یہ کثرت سے دوسرے اجزاء کے مخصوص متغیرات کے لیے قدروں کے طور پر دوبارہ تفویض کیے گئے ہیں۔

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