Source

فارم

مثال ۽ استعمال جون هدايتون فارم ڪنٽرول اسلوب لاءِ، ترتيب جا اختيار، ۽ مختلف قسم جا فارم ٺاهڻ لاءِ ڪسٽم اجزاء.

اوسر

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

نئين ان پٽ ڪنٽرولن جهڙوڪ اي ميل جي تصديق، نمبر جي چونڊ، ۽ وڌيڪ مان فائدو وٺڻ لاءِ typeسڀني انپٽس تي (مثال طور، emailاي ميل پتي يا عددي معلومات لاءِ) مناسب وصف استعمال ڪرڻ جي پڪ ڪريو .number

هتي هڪ تڪڙو مثال آهي Bootstrap جي فارم جي طرز کي ظاهر ڪرڻ لاء. گھربل طبقن، فارم جي ترتيب، ۽ وڌيڪ تي دستاويز لاء پڙھندا رھو.

اسان ڪڏهن به توهان جي اي ميل کي ڪنهن ٻئي سان حصيداري نه ڪنداسين.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </div>
  <div class="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، ۽ <textarea>s- .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" placeholder="Password">
    </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-check، ھڪڙي ھڪڙي طبقي لاءِ ٻنهي ان پٽ قسمن لاءِ جيڪي انھن جي HTML عناصر جي ترتيب ۽ رويي کي بھتر ڪري ٿو . چيڪ بڪس هڪ فهرست ۾ هڪ يا ڪيترن ئي اختيارن کي چونڊڻ لاءِ آهن، جڏهن ته ريڊيو ڪيترن ئي مان هڪ اختيار چونڊڻ لاءِ آهن.

غير فعال چيڪ بڪس ۽ ريڊيوز سپورٽ آهن، پر not-allowedوالدين جي هور تي ڪرسر مهيا ڪرڻ لاءِ <label>، توهان کي disabledخاصيت شامل ڪرڻ جي ضرورت پوندي .form-check-input. ان پٽ جي حالت کي ظاھر ڪرڻ ۾ مدد لاءِ معذور وصف ھلڪو رنگ لاڳو ڪندو.

چيڪ بڪسس ۽ ريڊيوز استعمال ڪيا ويا آھن HTML جي بنياد تي فارم جي تصديق کي سپورٽ ڪرڻ ۽ جامع، رسائي لائق ليبل مهيا ڪرڻ لاءِ. جيئن ته، اسان جا <input>s ۽ s ڀائر عنصر آهن جيئن هڪ جي اندر جي <label>مخالفت . اهو ٿورڙو وڌيڪ لفظي آهي جيئن توهان کي وضاحت ڪرڻ گهرجي ۽ خاصيتن سان لاڳاپيل ۽ .<input><label>idfor<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 disabled">
  <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>

ترتيب

جيئن ته Bootstrap لاڳو ٿئي ٿو 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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ته توهان <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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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>
افقي فارم ليبل sizing

استعمال ڪرڻ جي پڪ ڪريو .col-form-label-smيا .col-form-label-lgتوهان <label>جي s يا <legend>s کي صحيح طريقي سان .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>

ڪالمن جي ماپ

جيئن اڳئين مثالن ۾ ڏيکاريو ويو آهي، اسان جو گرڊ سسٽم توهان کي اجازت ڏئي ٿو ته ڪنهن به نمبر کي .cols جي اندر a .rowيا .form-row. اهي انهن جي وچ ۾ موجود ويڪر برابر برابر تقسيم ڪندا. توھان شايد پنھنجي ڪالمن جو ھڪڙو ذيلي سيٽ پڻ چونڊي سگھوٿا وڌيڪ يا گھٽ جاءِ وٺڻ لاءِ، جڏھن ته باقي .cols برابر ورهايو باقي، مخصوص ڪالمن جي ڪلاسن سان .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>

خودڪار ماپڻ

هيٺ ڏنل مثال هڪ flexbox يوٽيليٽي استعمال ڪري ٿو عمودي طور تي مواد ۽ تبديلين .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" 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: autoBootstrap ڊفالٽ کي ختم ڪرڻ لاءِ ڪنٽرول ۽ ان پٽ گروپ وصول ڪندا آهن 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ٻين ليبلنگ طريقن جي متبادل طور استعمال ڪرڻ جي صلاح نه ڏني وئي آهي.

مدد متن

بلاڪ-سطح جي مدد واري ٽيڪسٽ فارمن ۾ استعمال ڪندي ٺاهي سگھجن ٿيون .form-text(اڳ ۾ ڄاڻايل طور .help-blockتي v3 ۾). ان لائن مدد واري ٽيڪسٽ کي لچڪدار طريقي سان لاڳو ڪري سگھجي ٿو ڪنهن به ان لائن HTML عنصر ۽ يوٽيلٽي ڪلاسز جهڙوڪ .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>
    <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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </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 ملڪيت اڃا تائين معياري نه آهي ۽ اوپيرا 18 ۽ هيٺ ڏنل، يا انٽرنيٽ ايڪسپلورر 10 ۾ مڪمل طور تي سپورٽ نه ڪئي وئي آهي، ۽ حاصل ڪئي وئي ڪيبورڊ استعمال ڪندڙن کي انهن لنڪن کي ڌيان ڏيڻ يا چالو ڪرڻ کان روڪيو. سو محفوظ ٿيڻ لاءِ، استعمال ڪريو ڪسٽم جاوا اسڪرپٽ اهڙن لنڪن کي بند ڪرڻ لاءِ.

ڪراس برائوزر مطابقت

جڏهن ته بوٽ اسٽريپ انهن اسلوب کي سڀني برائوزرن ۾ لاڳو ڪندو، انٽرنيٽ ايڪسپلورر 11 ۽ هيٺيون disabledهڪ <fieldset>. انهن برائوزرن ۾ فيلڊ سيٽ کي غير فعال ڪرڻ لاءِ ڪسٽم جاوا اسڪرپٽ استعمال ڪريو.

تصديق

HTML5 فارم جي تصديق سان توهان جي استعمال ڪندڙن کي قيمتي، قابل عمل موٽ ڏيو- اسان جي سڀني سپورٽ ٿيل برائوزرن ۾ موجود آهي . برائوزر جي ڊفالٽ تصديق واري راءِ مان چونڊيو، يا اسان جي بلٽ ان ڪلاسز ۽ اسٽارٽر JavaScript سان ڪسٽم پيغامن کي لاڳو ڪريو.

اسان انتهائي سفارش ڪريون ٿا ڪسٽم جي تصديق واري انداز جي جيئن ڏيهي برائوزر ڊفالٽ جو اعلان نه ڪيو ويو آهي اسڪرين پڙهندڙن لاءِ.

اهو ڪيئن ڪم ڪري ٿو

ھتي آھي ڪيئن فارم جي تصديق Bootstrap سان ڪم ڪري ٿي:

  • HTML فارم جي تصديق CSS جي ٻن pseudo-ڪلاسن ذريعي لاڳو ٿئي ٿي، :invalid۽ :valid. اهو لاڳو ٿئي ٿو <input>، <select>۽ <textarea>عناصر.
  • بوٽ اسٽريپ اسڪوپ :invalid۽ :validاسلوب کي پيرن .was-validatedڪلاس تائين پهچائيندو آهي، عام طور تي <form>. ٻي صورت ۾، ڪنهن به گهربل فيلڊ کي قيمت جي بغير ڏيکاري ٿو جيئن صفحي جي لوڊ تي غلط. اهو طريقو، توهان چونڊي سگهو ٿا جڏهن انهن کي چالو ڪيو وڃي (عام طور تي فارم جمع ڪرڻ جي ڪوشش ڪئي وئي آهي).
  • فال بڪ جي طور تي، .is-invalid۽ .is-validڪلاس استعمال ڪري سگھجن ٿا pseudo-classes جي بدران سرور طرف جي تصديق لاءِ . .was-validatedانهن کي والدين طبقي جي ضرورت ناهي .
  • سي ايس ايس جي ڪم ۾ رڪاوٽن جي ڪري، اسان (في الحال) طرزن کي لاڳو نٿا ڪري سگھون <label>جيڪي DOM ۾ فارم ڪنٽرول کان اڳ اچي وڃن بغير ڪسٽم جاوا اسڪرپٽ جي مدد کان.
  • سڀ جديد برائوزرس ڪنٽرينٽ validation API جي حمايت ڪن ٿا ، جاوا اسڪرپٽ طريقن جو هڪ سلسلو فارم ڪنٽرول جي تصديق ڪرڻ لاءِ.
  • تاثرات جا پيغام شايد برائوزر ڊفالٽ استعمال ڪري سگھن ٿا (هر برائوزر لاءِ مختلف، ۽ CSS ذريعي اڻ سڌريل) يا اضافي HTML ۽ CSS سان گڏ اسان جي حسب ضرورت موٽ واري انداز کي.
  • توھان جاوا اسڪرپٽ ۾ حسب ضرورت صحيح پيغام مهيا ڪري سگھو ٿا setCustomValidity.

انهي کي ذهن ۾ رکڻ سان، اسان جي ڪسٽم فارم جي تصديق واري انداز، اختياري سرور سائڊ ڪلاس، ۽ برائوزر ڊفالٽ لاء هيٺ ڏنل ڊيمن تي غور ڪريو.

ڪسٽم اسلوب

ڪسٽم بوٽ اسٽريپ فارم جي تصديق واري پيغامن لاءِ، توهان novalidateکي پنهنجي <form>. هي برائوزر ڊفالٽ موٽڻ واري ٽول ٽائپس کي غير فعال ڪري ٿو، پر اڃا به JavaScript ۾ فارم جي تصديق APIs تائين رسائي فراهم ڪري ٿو. ھيٺ ڏنل فارم جمع ڪرڻ جي ڪوشش ڪريو؛ اسان جو جاوا اسڪرپٽ جمع ڪرائڻ واري بٽڻ کي روڪيندو ۽ راءِ ڏينداسين.

جڏهن جمع ڪرڻ جي ڪوشش ڪئي ويندي، توهان ڏسندا :invalid۽ :validطرزون توهان جي فارم ڪنٽرولن تي لاڳو ٿينديون.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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انهن طبقن سان پڻ سهڪار آهي.

سٺو لڳندو آهي!
سٺو لڳندو آهي!
@
مھرباني ڪري ھڪڙو صارف نالو چونڊيو.
مھرباني ڪري صحيح شھر ڏيو.
مھرباني ڪري صحيح حالت ڏيو.
مھرباني ڪري ھڪ صحيح زپ ڏيو.
توهان کي جمع ڪرڻ کان پهريان متفق ٿيڻ گهرجي.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

معاون عناصر

اسان جا مثال جا فارم اصل متن <input>جي مٿي ڏيکارين ٿا، پر فارم جي تصديق جا انداز اسان جي ڪسٽم فارم ڪنٽرول لاءِ پڻ موجود آهن.

مثال غلط راءِ جو متن
وڌيڪ مثال غلط راءِ جو متن
مثال غلط ڪسٽم منتخب راءِ
مثال غلط ڪسٽم فائل موٽ
<form class="was-validated">
  <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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</form>

ٽول ٽِپ

جيڪڏهن توهان جي فارم جي ترتيب ان جي اجازت ڏئي ٿي، توهان هڪ اسٽائل ٿيل ٽول ٽائپ ۾ تصديق جي راءِ ڏيکارڻ لاءِ ڪلاسن .{valid|invalid}-feedbackلاءِ ڪلاسن کي تبديل ڪري سگهو ٿا. ٽول ٽائپ پوزيشننگ لاءِ ان تي .{valid|invalid}-tooltipوالدين سان گڏ هجڻ جي پڪ ڪريو . position: relativeهيٺ ڏنل مثال ۾، اسان جي ڪالمن جي طبقن ۾ اهو اڳ ۾ ئي آهي، پر توهان جي منصوبي کي متبادل سيٽ اپ جي ضرورت هجي.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

اڃا به وڌيڪ ڪسٽمائيزيشن ۽ ڪراس برائوزر مستقل مزاجي لاءِ، برائوزر ڊفالٽ کي مٽائڻ لاءِ اسان جي مڪمل طور تي ڪسٽم فارم عناصر استعمال ڪريو. اهي سيمينٽڪ ۽ قابل رسائي مارڪ اپ جي چوٽي تي ٺهيل آهن، تنهنڪري اهي ڪنهن به ڊفالٽ فارم ڪنٽرول لاءِ مضبوط متبادل آهن.

چيڪ بڪس ۽ ريڊيو

هر چيڪ بڪس ۽ ريڊيو اسان جي ڪسٽم ڪنٽرول ٺاهڻ لاءِ <div>هڪ ڀاءُ سان گڏ ٿيل آهي ۽ هڪ سان گڏ متن لاءِ. ساخت جي لحاظ کان، اهو ساڳيو طريقو آهي جيڪو اسان جي ڊفالٽ آهي .<span><label>.form-check

اسان استعمال ڪندا آهيون sibling Selector ( ~) اسان جي سڀني <input>رياستن لاءِ-جهڙوڪ- :checkedپنهنجي ڪسٽم فارم اشاري کي صحيح انداز ۾ انداز ڪرڻ لاءِ. جڏهن ڪلاس سان گڏ .custom-control-label، اسان پڻ هر شئي لاء متن کي انداز ڪري سگهون ٿا <input>' حالت جي بنياد تي.

<input>اسان ڊفالٽ کي لڪايو ٿا opacity۽ استعمال ڪريو .custom-control-labelنئين ڪسٽم فارم اشاري ٺاهڻ لاءِ ان جي جاءِ تي ::before۽ ::after. بدقسمتي سان اسان صرف ان مان هڪ ڪسٽم ٺاهي نٿا سگهون <input>ڇاڪاڻ ته CSS contentان عنصر تي ڪم نٿو ڪري.

چيڪ ٿيل رياستن ۾، اسان استعمال ڪريون ٿا base64 ايمبيڊڊ SVG آئڪن مان Open Iconic . هي اسان کي براؤزرز ۽ ڊوائيسز تي اسٽائل ۽ پوزيشن لاء بهترين ڪنٽرول مهيا ڪري ٿو.

چيڪ بڪس

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

ڪسٽم چيڪ بڪس پڻ استعمال ڪري سگھن ٿا :indeterminatepseudo ڪلاس جڏهن دستي طور تي جاوا اسڪرپٽ ذريعي سيٽ ڪيو وڃي (ان جي وضاحت ڪرڻ لاءِ ڪو به موجود 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="customRadioInline1" 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="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

معذور

ڪسٽم چيڪ بڪس ۽ ريڊيو پڻ غير فعال ٿي سگھن ٿا. disabledboolean وصف شامل ڪريو ۾ <input>۽ ڪسٽم اشارو ۽ ليبل جي وضاحت خودڪار طريقي سان انداز ٿي ويندي.

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

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

مينيو چونڊيو

ڪسٽم <select>مينيو کي صرف هڪ ڪسٽم ڪلاس جي ضرورت آ��ي .custom-select، ڪسٽم اسلوب کي متحرڪ ڪرڻ لاء.

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

فائل برائوزر

فائل انپٽ سڀ کان وڌيڪ گڻ وارو آھي ۽ اضافي جاوا اسڪرپٽ جي ضرورت آھي جيڪڏھن توھان چاھيو ٿا انھن کي ڳنڍڻ سان گڏ فنڪشنل چونڊيو فائل… ۽ منتخب ٿيل فائل جو نالو.

<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 the <input>مناسب فاصلي لاءِ ڀرپاسي واري مواد لاءِ.

ترجمي ڪرڻ يا ترتيب ڏيڻ سٽون

:lang()pseudo-class استعمال ڪيو ويندو آهي "برائوز" متن جي ٻين ٻولين ۾ ترجمو ڪرڻ جي اجازت ڏيڻ لاء . لاڳاپيل ٻولي جي ٽيگ ۽ لوڪلائزڊ اسٽرنگ $custom-file-textسان ساس متغير ۾ شامل ڪريو يا شامل ڪريو . انگريزي strings ساڳي طرح ترتيب ڏئي سگهجي ٿو. مثال طور، هتي اهو آهي ته ڪيئن هڪ اسپيني ترجمي کي شامل ڪري سگهي ٿو (اسپين جي ٻولي ڪوڊ آهي ):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>

توهان کي پنهنجي دستاويز جي ٻولي (يا ان جي ذيلي وڻ) کي صحيح طور تي ترتيب ڏيڻ جي ضرورت پوندي ته جيئن صحيح متن ڏيکاري وڃي. اهو استعمال ڪريlang سگهجي ٿو <html>عنصر تي صفت يا Content-LanguageHTTP هيڊر ، ٻين طريقن جي وچ ۾.