in English

فارمز

فارم کنٹرول کے انداز، ترتیب کے اختیارات، اور فارم کی وسیع اقسام بنانے کے لیے حسب ضرورت اجزاء کے لیے مثالیں اور استعمال کے رہنما خطوط۔

جائزہ

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

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

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

ہم کبھی بھی آپ کی ای میل کو کسی اور کے ساتھ شیئر نہیں کریں گے۔
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

فارم کنٹرولز

متنی شکل کے کنٹرول جیسے کہ <input><select>s، اور s — کلاس <textarea>کے ساتھ اسٹائل کیے گئے ہیں ۔ .form-controlعام ظاہری شکل، فوکس سٹیٹ، سائزنگ اور مزید کے لیے طرزیں شامل ہیں۔

مزید اسٹائل کے لیے ہمارے حسب ضرورت فارمز کو ضرور دریافت کریں <select>۔

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

فائل ان پٹ کے لیے، کے لیے تبدیل .form-controlکریں .form-control-file۔

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

سائز کرنا

.form-control-lgاور جیسے کلاسز کا استعمال کرتے ہوئے اونچائیاں سیٹ کریں .form-control-sm۔

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

صرف پڑھو

readonlyان پٹ کی قدر میں ترمیم کو روکنے کے لیے ان پٹ پر بولین وصف شامل کریں ۔ صرف پڑھنے کے ان پٹ ہلکے دکھائی دیتے ہیں (بالکل غیر فعال ان پٹس کی طرح)، لیکن معیاری کرسر کو برقرار رکھتے ہیں۔

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

صرف پڑھنے والا سادہ متن

اگر آپ <input readonly>اپنے فارم میں عناصر کو سادہ متن کے طور پر اسٹائل کرنا چاہتے ہیں، .form-control-plaintextتو پہلے سے طے شدہ فارم فیلڈ اسٹائل کو ہٹانے اور درست مارجن اور پیڈنگ کو محفوظ کرنے کے لیے کلاس کا استعمال کریں۔

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

رینج ان پٹس

افقی طور پر اسکرول ایبل رینج ان پٹ کو استعمال کرکے سیٹ کریں .form-control-range۔

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

چیک باکس اور ریڈیو

پہلے سے طے شدہ چیک باکسز اور ریڈیوز کی مدد سے بہتر کیے جاتے ہیں .form-check، دونوں قسم کے ان پٹ کے لیے ایک کلاس جو ان کے HTML عناصر کی ترتیب اور رویے کو بہتر بناتی ہے ۔ چیک باکسز ایک فہرست میں سے ایک یا کئی اختیارات کو منتخب کرنے کے لیے ہیں، جبکہ ریڈیو بہت سے اختیارات میں سے ایک اختیار کو منتخب کرنے کے لیے ہیں۔

غیر فعال چیک باکسز اور ریڈیو تعاون یافتہ ہیں۔ ان disabledپٹ کی حالت کو ظاہر کرنے میں مدد کے لیے وصف ہلکے رنگ کا اطلاق کرے گا۔

چیک باکسز اور ریڈیو بٹن HTML پر مبنی فارم کی توثیق کی حمایت کرتے ہیں اور مختصر، قابل رسائی لیبل فراہم کرتے ہیں۔ اس طرح، ہمارے <input>s اور <label>s بہن بھائی عناصر ہیں جیسا کہ <input>a کے اندر موجود ہے <label>۔ یہ قدرے زیادہ لفظی ہے کیونکہ آپ کو اور سے متعلق ہونے کے لیے انتساب idاور خصوصیات کی وضاحت کرنی ہوگی ۔for<input><label>

ڈیفالٹ (اسٹیکڈ)

پہلے سے طے شدہ طور پر، کسی بھی تعداد میں چیک باکسز اور ریڈیو جو فوری طور پر بہن بھائی ہیں عمودی طور پر اسٹیک کیے جائیں گے اور مناسب طور پر اس کے ساتھ فاصلہ رکھیں .form-checkگے۔

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

لائن میں

.form-check-inlineکسی بھی میں شامل کرکے ایک ہی افقی قطار میں چیک باکسز یا ریڈیوز کو گروپ کریں .form-check۔

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

لیبل کے بغیر

.position-staticان پٹس میں شامل کریں .form-checkجس میں کوئی لیبل ٹیکسٹ نہیں ہے۔ aria-labelمعاون ٹیکنالوجیز (مثال کے طور پر، استعمال کرتے ہوئے ) کے لیے قابل رسائی نام کی کچھ شکل فراہم کرنا یاد رکھیں ۔

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

ترتیب

چونکہ بوٹسٹریپ لاگو ہوتا ہے display: blockاور width: 100%ہمارے تقریباً تمام فارم کنٹرولز پر، فارمز بطور ڈیفالٹ عمودی طور پر اسٹیک ہوں گے۔ فی فارم کی بنیاد پر اس ترتیب کو تبدیل کرنے کے لیے اضافی کلاسز کا استعمال کیا جا سکتا ہے۔

گروپس بنائیں

.form-groupکلاس فارم میں کچھ ڈھانچہ شامل کرنے کا سب سے آسان طریقہ ہے ۔ یہ ایک لچکدار کلاس فراہم کرتا ہے جو لیبلز، کنٹرولز، اختیاری مدد کے متن، اور فارم کی توثیق کے پیغامات کی مناسب گروپ بندی کی حوصلہ افزائی کرتا ہے۔ پہلے سے طے شدہ طور پر یہ صرف لاگو ہوتا ہے margin-bottom، لیکن یہ ضرورت کے مطابق اضافی شیلیوں کو چنتا .form-inlineہے۔ اسے <fieldset><div>s، یا تقریباً کسی دوسرے عنصر کے ساتھ استعمال کریں۔

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

فارم گرڈ

ہماری گرڈ کلاسز کا استعمال کرتے ہوئے مزید پیچیدہ فارم بنائے جا سکتے ہیں۔ ان فارم لے آؤٹس کے لیے استعمال کریں جن کے لیے متعدد کالم، مختلف چوڑائی اور اضافی سیدھ کے اختیارات درکار ہیں۔

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

فارم قطار

.rowآپ ہماری معیاری گرڈ قطار کی ایک ایسی تبدیلی کے لیے بھی تبادلہ کر سکتے ہیں .form-rowجو سخت اور زیادہ کمپیکٹ لے آؤٹ کے لیے پہلے سے طے شدہ کالم گٹر کو اوور رائیڈ کرتی ہے۔

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

گرڈ سسٹم کے ساتھ مزید پیچیدہ لے آؤٹ بھی بنائے جا سکتے ہیں۔

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

افقی شکل

.rowگروپس بنانے کے لیے کلاس کو شامل کرکے اور .col-*-*اپنے لیبلز اور کنٹرولز کی چوڑائی بتانے کے لیے کلاسز کا استعمال کرکے گرڈ کے ساتھ افقی شکلیں بنائیں ۔ .col-form-labelاپنے s میں بھی شامل کرنا یقینی بنائیں <label>تاکہ وہ اپنے متعلقہ فارم کنٹرولز کے ساتھ عمودی طور پر مرکز میں ہوں۔

بعض اوقات، آپ کو مطلوبہ کامل سیدھ بنانے کے لیے مارجن یا پیڈنگ یوٹیلیٹیز استعمال کرنے کی ضرورت پڑ سکتی ہے۔ مثال کے طور پر، ہم نے padding-topٹیکسٹ بیس لائن کو بہتر طریقے سے سیدھ میں کرنے کے لیے اپنے اسٹیک شدہ ریڈیو ان پٹس کے لیبل کو ہٹا دیا ہے۔

ریڈیوز
<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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="form-group row">
    <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>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
افقی فارم لیبل سائزنگ

اور کے سائز کو درست طریقے سے فالو کرنے کے لیے یا اپنے s یا s .col-form-label-smکو .col-form-label-lgاستعمال <label>کرنا یقینی بنائیں ۔<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group 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>
</form>

کالم کا سائز

جیسا کہ پچھلی مثالوں میں دکھایا گیا ہے، ہمارا گرڈ سسٹم آپ کو a یا .colکے اندر s کی کوئی بھی تعداد رکھنے کی اجازت دیتا ہے ۔ وہ دستیاب چوڑائی کو ان کے درمیان برابر تقسیم کریں گے۔ آپ کم یا زیادہ جگہ لینے کے لیے اپنے کالموں کا ایک ذیلی سیٹ بھی چن سکتے ہیں، جب کہ بقیہ کو مخصوص کالم کی کلاسوں کے ساتھ یکساں طور پر تقسیم کیا جاتا ہے ۔.row.form-row.col.col-7

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

خودکار سائز کرنا

.colذیل کی مثال عمودی طور پر مواد کو مرکز کرنے اور اس میں تبدیلی کرنے کے لیے فلیکس باکس یوٹیلیٹی کا استعمال کرتی ہے .col-autoتاکہ آپ کے کالم صرف ضرورت کے مطابق زیادہ جگہ لے سکیں۔ دوسرے طریقے سے دیکھیں، کالم کا سائز خود مواد کی بنیاد پر ہوتا ہے۔

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <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 mb-2">Submit</button>
    </div>
  </div>
</form>

اس کے بعد آپ اسے ایک بار پھر سائز کے ساتھ مخصوص کالم کلاسز کے ساتھ ریمکس کر سکتے ہیں۔

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <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 my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

اور بلاشبہ کسٹم فارم کنٹرولز کی حمایت کی جاتی ہے۔

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <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 my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

ان لائن فارم

.form-inlineایک ہی افقی قطار پر لیبلز، فارم کنٹرولز، اور بٹنوں کی سیریز کو ظاہر کرنے کے لیے کلاس کا استعمال کریں ۔ ان لائن فارمز کے اندر فارم کنٹرولز ان کی ڈیفالٹ حالتوں سے قدرے مختلف ہوتے ہیں۔

  • کنٹرولز ہیں display: flex، کسی بھی HTML وائٹ اسپیس کو ختم کرنا اور آپ کو اسپیسنگ اور فلیکس باکس یوٹیلیٹیز کے ساتھ الائنمنٹ کنٹرول فراہم کرنے کی اجازت دیتے ہیں ۔
  • width: autoبوٹسٹریپ ڈیفالٹ کو اوور رائیڈ کرنے کے لیے کنٹرولز اور ان پٹ گروپس موصول ہوتے ہیں width: 100%۔
  • کنٹرول صرف ان ویو پورٹس میں ظاہر ہوتے ہیں جو موبائل آلات پر تنگ ویو پورٹ کے حساب سے کم از کم 576px چوڑے ہوتے ہیں ۔

آپ کو دستی طور پر اسپیسنگ یوٹیلیٹیز (جیسا کہ نیچے دکھایا گیا ہے) کے ساتھ انفرادی فارم کنٹرولز کی چوڑائی اور سیدھ میں کرنے کی ضرورت پڑسکتی ہے۔ آخر میں، ہر فارم کنٹرول کے ساتھ ہمیشہ ایک کو شامل کرنا یقینی بنائیں <label>، یہاں تک کہ اگر آپ کو اسے غیر اسکرین ریڈر دیکھنے والوں سے چھپانے کی ضرورت ہو .sr-only۔

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

حسب ضرورت فارم کنٹرولز اور سلیکٹس بھی معاون ہیں۔

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
پوشیدہ لیبلز کے متبادل

اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو معاون ٹیکنالوجیز جیسے کہ اسکرین ریڈرز کو آپ کے فارمز میں پریشانی کا سامنا کرنا پڑے گا۔ ان ان لائن فارمز کے لیے، آپ .sr-onlyکلاس کا استعمال کرتے ہوئے لیبلز کو چھپا سکتے ہیں۔ معاون ٹیکنالوجیز کے لیے لیبل فراہم کرنے کے مزید متبادل طریقے ہیں، جیسے کہ aria-label، aria-labelledbyیا titleوصف۔ اگر ان میں سے کوئی بھی موجود نہیں ہے، تو معاون ٹیکنالوجیز اس placeholderوصف کو استعمال کرنے کا سہارا لے سکتی ہیں، اگر موجود ہوں، لیکن یاد رکھیں کہ placeholderلیبلنگ کے دیگر طریقوں کے متبادل کے طور پر استعمال کی سفارش نہیں کی جاتی ہے۔

مدد کا متن

فارمز میں بلاک لیول ہیلپ ٹیکسٹ (پہلے v3 .form-textکے نام ��ے جانا جاتا تھا) کا استعمال کرتے ہوئے بنایا جا سکتا ہے۔ .help-blockان لائن ہیلپ ٹیکسٹ کو کسی بھی ان لائن ایچ ٹی ایم ایل ایلیمنٹ اور یوٹیلیٹی کلاسز جیسے استعمال کرتے ہوئے لچکدار طریقے سے لاگو کیا جا سکتا ہے .text-muted۔

مدد کے متن کو فارم کنٹرولز کے ساتھ منسلک کرنا

مدد کا متن واضح طور پر اس فارم کنٹرول کے ساتھ منسلک ہونا چاہیے جس کا تعلق aria-describedbyانتساب کے استعمال سے ہے۔ یہ اس بات کو یقینی بنائے گا کہ معاون ٹیکنالوجیز — جیسے کہ اسکرین ریڈرز — اس مدد کے متن کا اعلان کریں گے جب صارف توجہ مرکوز کرے گا یا کنٹرول میں داخل ہوگا۔

مدد کے متن کے نیچے ان پٹ کو کے ساتھ اسٹائل کیا جاسکتا ہے .form-text۔ اس کلاس میں display: blockمندرجہ بالا ان پٹس سے آسان وقفہ کاری کے لیے کچھ ٹاپ مارجن شامل اور شامل کیا جاتا ہے۔

آپ کا پاس ورڈ 8-20 حروف لمبا ہونا چاہیے، حروف اور اعداد پر مشتمل ہونا چاہیے، اور اس میں خالی جگہیں، خصوصی حروف یا ایموجی شامل نہیں ہونا چاہیے۔
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

ان لائن ٹیکسٹ کسی بھی عام ان لائن HTML عنصر کو استعمال کر سکتا ہے (خواہ وہ ایک <small>, <span>یا کچھ اور ہو) جس میں یوٹیلیٹی کلاس سے زیادہ کچھ نہیں ہے۔

8-20 حروف کا ہونا ضروری ہے۔
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

غیر فعال فارم

شامل کریں۔disabledصارف کے تعاملات کو روکنے اور اسے ہلکا دکھانے کے لیے ان پٹ پر بولین وصف

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

تمام کنٹرولز کو غیر فعال disabledکرنے کے لیے a میں وصف شامل کریں ۔<fieldset>

غیر فعال فیلڈ سیٹ کی مثال
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
اینکرز کے ساتھ انتباہ

براؤزرز تمام مقامی فارم کنٹرولز ( <input>, <select>اور <button>عناصر) کو ایک کے اندر <fieldset disabled>غیر فعال سمجھتے ہیں، ان پر کی بورڈ اور ماؤس کے تعامل کو روکتے ہیں۔

تاہم، اگر آپ کے فارم میں حسب ضرورت بٹن نما عناصر بھی شامل ہیں جیسے کہ <a ... class="btn btn-*">، ان کو صرف کا ایک انداز دیا جائے گا pointer-events: none۔ جیسا کہ بٹنوں کے لیے غیر فعال حالت کے بارے میں سیکشن میں بتایا گیا ہے (اور خاص طور پر اینکر عناصر کے لیے ذیلی سیکشن میں)، یہ CSS پراپرٹی ابھی تک معیاری نہیں ہے اور انٹرنیٹ ایکسپلورر 10 میں مکمل طور پر تعاون یافتہ نہیں ہے۔ اینکر پر مبنی کنٹرولز اب بھی ہوں گے۔ کی بورڈ کا استعمال کرتے ہوئے توجہ مرکوز کرنے کے قابل اور قابل عمل۔ آپ کو ان کنٹرولز کو tabindex="-1"فوکس حاصل کرنے سے روکنے اور aria-disabled="disabled"ان کی حالت کو معاون ٹیکنالوجیز کی طرف اشارہ کرنے کے لیے شامل کر کے دستی طور پر ان میں ترمیم کرنی چاہیے۔

کراس براؤزر مطابقت

جبکہ بوٹسٹریپ ان اسٹائلز کو تمام براؤزرز میں لاگو کرے گا، انٹرنیٹ ایکسپلورر 11 اور اس سے نیچے والے disabledانتساب کو مکمل طور پر سپورٹ نہیں کرتے <fieldset>۔ ان براؤزرز میں فیلڈ سیٹ کو غیر فعال کرنے کے لیے حسب ضرورت جاوا اسکرپٹ استعمال کریں۔

توثیق

HTML5 فارم کی توثیق کے ساتھ اپنے صارفین کو قابل قدر، قابل عمل تاثرات فراہم کریں- ہمارے تمام تعاون یافتہ براؤزرز میں دستیاب ہے ۔ براؤزر کے پہلے سے طے شدہ توثیق کے تاثرات میں سے انتخاب کریں، یا ہماری بلٹ ان کلاسز اور سٹارٹر JavaScript کے ساتھ حسب ضرورت پیغامات کو نافذ کریں۔

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

یہ کیسے کام کرتا ہے

یہاں یہ ہے کہ بوٹسٹریپ کے ساتھ فارم کی توثیق کیسے کام کرتی ہے:

  • HTML فارم کی توثیق کا اطلاق CSS کی دو سیڈو کلاسز، :invalidاور :valid. یہ , اور عناصر پر لاگو <input>ہوتا <select>ہے <textarea>۔
  • بوٹسٹریپ اسکوپ :invalidاور :validاسٹائل کو پیرنٹ .was-validatedکلاس میں دیتا ہے، جو عام طور پر پر لاگو ہوتا ہے <form>۔ بصورت دیگر، کوئی بھی مطلوبہ فیلڈ بغیر کسی قدر کے صفحہ لوڈ پر غلط ظاہر ہوتا ہے۔ اس طرح، آپ انتخاب کر سکتے ہیں کہ انہیں کب چالو کرنا ہے (عام طور پر فارم جمع کرانے کی کوشش کے بعد)۔
  • فارم کی ظاہری شکل کو دوبارہ ترتیب دینے کے لیے (مثال کے طور پر، AJAX کا استعمال کرتے ہوئے متحرک فارم جمع کرانے کی صورت میں)، جمع کرانے کے بعد دوبارہ .was-validatedسے کلاس کو ہٹا دیں۔<form>
  • فال بیک کے طور پر، .is-invalidاور سرور سائڈ کی توثیق.is-valid کے لیے سیوڈو کلاسز کے بجائے کلاسز کا استعمال کیا جا سکتا ہے ۔ انہیں والدین کی کلاس کی ضرورت نہیں ہے ۔.was-validated
  • CSS کے کام کرنے کے طریقے میں رکاوٹوں کی وجہ سے، ہم (فی الحال) <label>اپنی مرضی کے مطابق JavaScript کی مدد کے بغیر DOM میں فارم کنٹرول سے پہلے آنے والے اسٹائلز کو لاگو نہیں کر سکتے۔
  • تمام جدید براؤزرز Constraint validation API کی حمایت کرتے ہیں ، فارم کنٹرولز کی توثیق کرنے کے لیے JavaScript طریقوں کی ایک سیریز۔
  • تاثرات کے پیغامات براؤزر ڈیفالٹس (ہر براؤزر کے لیے مختلف، اور CSS کے ذریعے غیر اسٹائلبل) یا اضافی HTML اور CSS کے ساتھ ہماری حسب ضرورت فیڈ بیک اسٹائلز کا استعمال کر سکتے ہیں۔
  • setCustomValidityآپ JavaScript میں اپنی مرضی کے مطابق درست پیغامات فراہم کر سکتے ہیں ۔

اس کو ذہن میں رکھتے ہوئے، ہمارے حسب ضرورت فارم کی توثیق کے انداز، اختیاری سرور سائڈ کلاسز، اور براؤزر ڈیفالٹس کے لیے درج ذیل ڈیمو پر غور کریں۔

اپنی مرضی کے انداز

حسب ضرورت بوٹسٹریپ فارم کی توثیق کے پیغامات کے لیے، آپ novalidateکو اپنے میں بولین وصف شامل کرنے کی ضرورت ہوگی <form>۔ یہ براؤزر کے ڈیفالٹ فیڈ بیک ٹول ٹپس کو غیر فعال کر دیتا ہے، لیکن پھر بھی JavaScript میں فارم کی توثیق APIs تک رسائی فراہم کرتا ہے۔ ذیل میں فارم جمع کرانے کی کوشش کریں؛ ہمارا JavaScript جمع کرانے کے بٹن کو روکے گا اور آپ کو تاثرات فراہم کرے گا۔ جمع کرانے کی کوشش کرتے وقت، آپ اپنے فارم کنٹرولز پر لاگو کردہ :invalidاور طرزیں دیکھیں گے۔:valid

حسب ضرورت فیڈ بیک اسٹائلز حسب ضرورت رنگ، بارڈرز، فوکس اسٹائلز، اور بیک گراؤنڈ آئیکنز کو تاثرات کو بہتر طریقے سے پہنچانے کے لیے لاگو کرتے ہیں۔ s کے لیے پس منظر کی شبیہیں <select>صرف کے ساتھ دستیاب ہیں .custom-select، اور نہیں .form-control۔

اچھا لگ رہا ہے!
اچھا لگ رہا ہے!
براہ کرم ایک درست شہر فراہم کریں۔
براہ کرم ایک درست ریاست منتخب کریں۔
براہ کرم ایک درست زپ فراہم کریں۔
جمع کرانے سے پہلے آپ کو متفق ہونا ضروری ہے۔
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

براؤزر ڈیفالٹس

اپنی مرضی کے مطابق توثیق کے تاثرات کے پیغامات یا فارم کے طرز عمل کو تبدیل کرنے کے لیے جاوا اسکرپٹ لکھنے میں دلچسپی نہیں ہے؟ سب اچھا ہے، آپ براؤزر ڈیفالٹس استعمال کر سکتے ہیں۔ ذیل میں فارم جمع کرانے کی کوشش کریں۔ آپ کے براؤزر اور OS پر منحصر ہے، آپ کو تاثرات کا تھوڑا سا مختلف انداز نظر آئے گا۔

اگرچہ ان فیڈ بیک اسٹائلز کو CSS کے ساتھ اسٹائل نہیں کیا جا سکتا، پھر بھی آپ JavaScript کے ذریعے فیڈ بیک ٹیکسٹ کو اپنی مرضی کے مطابق بنا سکتے ہیں۔

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

سرور سائیڈ

ہم کلائنٹ سائیڈ کی توثیق کا استعمال کرنے کی تجویز کرتے ہیں، لیکن اگر آپ کو سرور سائیڈ کی توثیق کی ضرورت ہو تو، آپ اور کے ساتھ غلط اور درست فارم فیلڈز کی نشاندہی کر سکتے .is-invalidہیں .is-valid۔ نوٹ کریں کہ .invalid-feedbackان کلاسوں کے ساتھ بھی تعاون کیا جاتا ہے۔

غلط فیلڈز کے لیے، اس بات کو یقینی بنائیں کہ غلط فیڈ بیک/غلطی کا پیغام متعلقہ فارم فیلڈ سے منسلک ہے aria-describedby۔ یہ وصف ایک سے زیادہ idحوالہ دینے کی اجازت دیتا ہے، اگر فیلڈ پہلے سے ہی اضافی فارم ٹیکسٹ کی طرف اشارہ کرتا ہے۔

اچھا لگ رہا ہے!
اچھا لگ رہا ہے!
براہ کرم ایک درست شہر فراہم کریں۔
براہ کرم ایک درست ریاست منتخب کریں۔
براہ کرم ایک درست زپ فراہم کریں۔
جمع کرانے سے پہلے آپ کو متفق ہونا ضروری ہے۔
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

معاون عناصر

درج ذیل فارم کنٹرولز اور اجزاء کے لیے توثیق کی طرزیں دستیاب ہیں:

  • <input>s اور <textarea>s کے ساتھ.form-control
  • <select>s کے ساتھ .form-controlیا.custom-select
  • .form-checks
  • .custom-checkboxs اور .custom-radios
  • .custom-file
براہ کرم ٹیکسٹیریا میں ایک پیغام درج کریں۔
غلط فیڈ بیک ٹیکسٹ کی مثال
مزید مثال غلط تاثرات کا متن
مثال کے طور پر غلط حسب ضرورت منتخب تاثرات
مثال کے طور پر غلط حسب ضرورت فائل فیڈ بیک
@
مثال کے طور پر غلط ان پٹ گروپ فیڈ بیک
مثال کے طور پر غلط ان پٹ گروپ فیڈ بیک
مثال کے طور پر غلط ان پٹ گروپ فیڈ بیک
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

ٹول ٹپس

اگر آپ کا فارم لے آؤٹ اس کی اجازت دیتا ہے، تو آپ ایک اسٹائل شدہ ٹول ٹپ میں توثیق کے تاثرات ظاہر کرنے .{valid|invalid}-feedbackکے لیے کلاسوں کے لیے کلاسز کو تبدیل کر سکتے ہیں۔ ٹول ٹپ پوزیشننگ کے لیے اس کے .{valid|invalid}-tooltipساتھ والدین کا ہونا یقینی بنائیں ۔ position: relativeذیل کی مثال میں، ہماری کالم کلاسوں میں یہ پہلے سے موجود ہے، لیکن آپ کے پروجیکٹ کو متبادل سیٹ اپ کی ضرورت پڑ سکتی ہے۔

اچھا لگ رہا ہے!
اچھا لگ رہا ہے!
براہ کرم ایک درست شہر فراہم کریں۔
براہ کرم ایک درست ریاست منتخب کریں۔
براہ کرم ایک درست زپ فراہم کریں۔
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

تخصیص کرنا

$form-validation-statesتوثیق ریاستوں کو نقشہ کے ساتھ ساس کے ذریعے اپنی مرضی کے مطابق بنایا جا سکتا ہے ۔ ہماری _variables.scssفائل میں موجود، یہ ساس نقشہ ڈیفالٹ valid/ invalidتوثیق کی حالتوں کو بنانے کے لیے لوپ کر دیا گیا ہے۔ ہر ریاست کے رنگ اور آئیکن کو اپنی مرضی کے مطابق بنانے کے لیے ایک نیسٹڈ نقشہ شامل ہے۔ اگرچہ کوئی دوسری ریاستیں براؤزرز کے ذریعے سپورٹ نہیں کرتی ہیں، لیکن وہ لوگ جو حسب ضرورت اسٹائلز استعمال کرتے ہیں وہ آسانی سے زیادہ پیچیدہ فارم فیڈ بیک شامل کر سکتے ہیں۔

براہ کرم نوٹ کریں کہ ہم form-validation-stateمکسین میں ترمیم کیے بغیر ان اقدار کو حسب ضرورت بنانے کی سفارش نہیں کرتے ہیں۔

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

ان پٹ گروپ کی توثیق

توثیق کے ساتھ ان پٹ گروپ کے اندر کن عناصر کو گول کونوں کی ضرورت ہے اس کا پتہ لگانے کے لیے، ایک ان پٹ گروپ کو ایک اضافی .has-validationکلاس کی ضرورت ہوتی ہے۔

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
براہ کرم ایک صارف نام منتخب کریں۔

حسب ضرورت فارم

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

چیک باکس اور ریڈیو

ہمارا حسب ضرورت کنٹرول بنانے کے لیے ہر چیک باکس اور ریڈیو <input>اور <label>جوڑی کو ایک میں لپیٹا جاتا ہے ۔ <div>ساختی طور پر، یہ وہی طریقہ ہے جو ہمارے پہلے سے طے شدہ .form-checkہے۔

ہم اپنی تمام ریاستوں کے لیے سِبلنگ سلیکٹر ( ~) کا استعمال کرتے ہیں — جیسے — اپنے حسب ضرورت فارم اشارے کو صحیح طریقے سے اسٹائل کرنے کے لیے۔ جب کلاس کے ساتھ ملایا جاتا ہے، تو ہم ہر آئٹم کی حالت کی بنیاد پر متن کو اسٹائل بھی کر سکتے ہیں ۔<input>:checked.custom-control-label<input>

ہم پہلے سے طے شدہ کو چھپاتے ہیں اور اس کے <input>ساتھ اس کی جگہ پر ایک نیا کسٹم فارم انڈیکیٹر بنانے opacityکے لیے استعمال کرتے ہیں ۔ بدقسمتی سے ہم صرف اس وجہ سے اپنی مرضی کے مطابق نہیں بنا سکتے کیونکہ CSS اس عنصر پر کام نہیں کرتا ہے۔.custom-control-label::before::after<input>content

چیک شدہ ریاستوں میں، ہم Open Iconic سے base64 ایمبیڈڈ SVG آئیکنز استعمال کرتے ہیں ۔ یہ ہمیں براؤزرز اور آلات پر اسٹائل اور پوزیشننگ کے لیے بہترین کنٹرول فراہم کرتا ہے۔

چیک باکسز

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

جب جاوا اسکرپٹ کے ذریعے دستی طور پر سیٹ کیا جاتا ہے تو حسب ضرورت چیک باکسز سیوڈو کلاس کو بھی استعمال کر سکتے ہیں :indeterminate(اس کی وضاحت کے لیے کوئی HTML وصف دستیاب نہیں ہے)۔

اگر آپ jQuery استعمال کر رہے ہیں تو، کچھ اس طرح کافی ہونا چاہئے:

$('.your-checkbox').prop('indeterminate', true)

ریڈیوز

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

لائن میں

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

معذور

حسب ضرورت چیک باکسز اور ریڈیوز کو بھی غیر فعال کیا جا سکتا ہے۔ disabledمیں بولین وصف شامل کریں <input>اور حسب ضرورت اشارے اور لیبل کی تفصیل خود بخود اسٹائل ہوجائے گی۔

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

سوئچز

ایک سوئچ میں حسب ضرورت چیک باکس کا مارک اپ ہوتا ہے لیکن .custom-switchٹوگل سوئچ رینڈر کرنے کے لیے کلاس کا استعمال کرتا ہے۔ سوئچ بھی disabledخصوصیت کی حمایت کرتے ہیں۔

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

مینو منتخب کریں۔

اپنی مرضی کے مینو کو اپنی مرضی کے انداز کو متحرک کرنے کے <select>لیے صرف ایک حسب ضرورت کلاس کی ضرورت ہوتی ہے۔ .custom-selectحسب ضرورت طرزیں 'کی ابتدائی ظاہری شکل تک محدود ہیں اور براؤزر کی حدود کی وجہ سے s <select>میں ترمیم نہیں کر سکتیں ۔<option>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

آپ ہمارے اسی سائز کے ٹیکسٹ ان پٹس سے ملنے کے لیے چھوٹے اور بڑے حسب ضرورت انتخاب میں سے بھی انتخاب کر سکتے ہیں۔

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

اس multipleوصف کی بھی حمایت کی جاتی ہے:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

جیسا کہ sizeصفت ہے:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

رینج

کے ساتھ حسب ضرورت <input type="range">کنٹرول بنائیں .custom-range۔ ٹریک (پس منظر) اور انگوٹھا (قدر) دونوں براؤزرز میں ایک جیسے ظاہر ہونے کے لیے اسٹائل کیے گئے ہیں۔ چونکہ صرف IE اور Firefox اپنے ٹریک کو انگوٹھے کے بائیں یا دائیں طرف سے "پُر" کرنے کی حمایت کرتے ہیں تاکہ بصری طور پر پیشرفت کی نشاندہی کی جاسکے، ہم فی الحال اس کی حمایت نہیں کرتے ہیں۔

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

رینج ان پٹ میں بالترتیب minاور max0اور کے لیے مضمر قدریں ہوتی ہیں۔ آپ اور اوصاف 100استعمال کرنے والوں کے لیے نئی قدریں بتا سکتے ہیں ۔minmax

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

پہلے سے طے شدہ طور پر، رینج ان پٹ "اسنیپ" کو عددی قدروں میں لے جاتی ہے۔ اسے تبدیل کرنے کے لیے، آپ ایک stepقدر کی وضاحت کر سکتے ہیں۔ ذیل کی مثال میں، ہم استعمال کرکے اقدامات کی تعداد کو دوگنا کرتے step="0.5"ہیں۔

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

فائل براؤزر

حسب ضرورت فائل ان پٹ کو متحرک کرنے کے لیے تجویز کردہ پلگ ان: bs-custom-file-input ، یہ وہی ہے جسے ہم فی الحال یہاں اپنے دستاویزات میں استعمال کر رہے ہیں۔

فائل کا ان پٹ سب سے زیادہ گہرا ہے اور اس کے لیے اضافی جاوا اسکرپٹ کی ضرورت ہوتی ہے اگر آپ انہیں فنکشنل Choose فائل کے ساتھ جوڑنا چاہتے ہیں… اور فائل کے نام کے متن کو منتخب کریں۔

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>ہم پہلے سے طے شدہ فائل کو چھپاتے ہیں opacityاور اس کے بجائے اسٹائل کرتے ہیں <label>۔ بٹن تیار کیا گیا ہے اور اس کے ساتھ پوزیشن میں ہے ::after۔ آخر میں، ہم ارد گرد کے مواد کے لیے مناسب وقفہ کے لیے a widthاور heighton کا اعلان کرتے ہیں۔<input>

SCSS کے ساتھ تاروں کا ترجمہ یا تخصیص کرنا

:lang()سیوڈو کلاس کا استعمال "براؤز" متن کے دوسری زبانوں میں ترجمہ کرنے کے لیے کیا جاتا ہے۔ متعلقہ لینگویج ٹیگ اور لوکلائزڈ سٹرنگز $custom-file-textکے ساتھ ساس متغیر میں اندراجات کو اوور رائڈ یا شامل کریں ۔ انگریزی تاروں کو اسی طرح اپنی مرضی کے مطابق کیا جا سکتا ہے. مثال کے طور پر، یہاں یہ ہے کہ کوئی ہسپانوی ترجمہ کیسے شامل کر سکتا ہے (ہسپانوی زبان کا کوڈ ہے ):es

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

lang(es)ہسپانوی ترجمے کے لیے حسب ضرورت فائل ان پٹ پر عمل میں یہ ہے :

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

آپ کو اپنے دستاویز کی زبان (یا اس کے ذیلی درخت) کو درست طریقے سے ترتیب دینے کی ضرورت ہوگی تاکہ صحیح متن دکھایا جاسکے۔ یہ عنصر یا HTTP ہیڈر پر موجود langانتساب کا استعمال کرتے ہوئے دوسرے طریقوں کے ساتھ کیا جا سکتا ہے۔<html>Content-Language

HTML کے ساتھ تاروں کا ترجمہ یا تخصیص کرنا

بوٹسٹریپ ایچ ٹی ایم ایل میں "براؤز" ٹیکسٹ کو اس data-browseوصف کے ساتھ ترجمہ کرنے کا ایک طریقہ بھی فراہم کرتا ہے جسے حسب ضرورت ان پٹ لیبل میں شامل کیا جا سکتا ہے (ڈچ میں مثال):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>