Source

فورمې

د فارم کنټرول سټایلونو، ترتیب اختیارونو، او د مختلفو بڼو د جوړولو لپاره دودیز اجزاوو لپاره مثالونه او د کارولو لارښوونې.

کتنه

د بوټسټریپ فارم کنټرولونه زموږ د ریبوټ شوي فارم سټایلونو کې د ټولګیو سره پراخیږي. د دې ټولګیو څخه کار واخلئ ترڅو په براوزرونو او وسیلو کې د لا دوامداره رینډرینګ لپاره د دوی دودیز ډیزاینونو غوره کولو لپاره وکاروئ.

ډاډ ترلاسه کړئ چې typeپه ټولو داخلونو کې یو مناسب خاصیت وکاروئ (د بیلګې په توګه emailد بریښنالیک آدرس یا numberشمیري معلوماتو لپاره) ترڅو د نوي ان پټ کنټرولونو څخه ګټه پورته کړئ لکه د بریښنالیک تصدیق ، شمیره انتخاب او نور.

دلته د بوټسټریپ فارم سټایلونو ښودلو لپاره یو ګړندی مثال دی. د اړینو ټولګیو، فورمې ترتیب، او نور په اړه د اسنادو لوستلو ته دوام ورکړئ.

موږ به هیڅکله ستاسو بریښنالیک له بل چا سره شریک نه کړو.
<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-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" 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-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 عناصرو ترتیب او چلند ښه کوي . چک بکسونه په لیست کې د یو یا څو انتخابونو غوره کولو لپاره دي، پداسې حال کې چې راډیوګانې د ډیری څخه د یو انتخاب غوره کولو لپاره دي.

معیوب شوي چیک باکسونه او راډیوګانې ملاتړ کیږي، مګر not-allowedد مور او پلار په هور کې د کرسر چمتو کولو لپاره <label>، تاسو اړتیا لرئ چې disabledځانګړتیا ته اضافه کړئ .form-check-input. معیوب شوي خاصیت به یو روښانه رنګ پلي کړي ترڅو د ان پټ حالت په ګوته کولو کې مرسته وکړي.

د چک بکسونه او راډیوګانې کارول د HTML پر بنسټ د فورمې اعتبار ملاتړ کولو لپاره جوړ شوي او لنډ، د لاسرسي وړ لیبل چمتو کوي. په دې توګه، زموږ <input>s او <label>s د وروڼو عناصر دي لکه څنګه چې د <input>دننه دننه مخالف دي <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>دا د s، <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>په s کې هم اضافه کړئ نو دوی په عمودي ډول د دوی اړوند فارم کنټرولونو سره متمرکز وي.

ځینې ​​​​وختونه، تاسو ممکن د حاشیې یا پیډینګ اسانتیاو کارولو ته اړتیا ولرئ ترڅو هغه مناسب سمون رامینځته کړئ چې تاسو ورته اړتیا لرئ. د مثال په توګه، موږ 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>
د افقی شکل لیبل اندازه کول

ډاډ ترلاسه کړئ چې .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. دوی به د دوی تر مینځ په مساوي ډول موجود عرض تقسیم کړي. تاسو کولی شئ د خپلو کالمونو یوه فرعي سیټ هم غوره کړئ ترڅو ډیر یا لږ ځای ونیسي، پداسې حال کې چې پاتې نور .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په یوه افقی قطار کې د لیبلونو، فورمو کنټرولونو، او بټونو لړۍ ښودلو لپاره ټولګي وکاروئ . په انلاین فارمونو کې د فارم کنټرولونه د دوی له اصلي حالتونو څخه یو څه توپیر لري.

  • کنټرولونه دي ، د هر ډول HTML سپین ځای سقوط کوي او تاسو ته اجازه درکوي چې د فاصلې او فلیکس بکس اسانتیاو display: flexسره د سمون کنټرول چمتو کړئ .
  • کنټرول او ان پټ ګروپونه 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د نورو لیبل کولو میتودونو لپاره د بدیل په توګه کارول سپارښتنه نه کیږي.

د مرستې متن

په فورمو کې د بلاک کچې مرستې متن په کارولو سره رامینځته کیدی شي .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-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 کې په بشپړ ډول ملاتړ شوی نه دی، او د کیبورډ کاروونکو مخه نه نیسي. د دې لینکونو تمرکز یا فعالولو توان لري. نو د خوندي کیدو لپاره ، د داسې لینکونو غیر فعالولو لپاره دودیز جاواسکریپټ وکاروئ.

د کراس براوزر مطابقت

پداسې حال کې چې بوټسټریپ به دا سټایلونه په ټولو براوزرونو کې پلي کړي ، د انټرنیټ اکسپلورر 11 او لاندې په بشپړ ډول د disabledځانګړتیا ملاتړ نه کوي <fieldset>. په دې براوزرونو کې د ساحې سیټ غیر فعالولو لپاره دودیز جاوا سکریپټ وکاروئ.

اعتبار

د HTML5 فارم تصدیق سره خپلو کاروونکو ته ارزښتناکه، د عمل وړ فیډبیک چمتو کړئ- زموږ په ټولو ملاتړ شوي براوزرونو کې شتون لري . د براوزر ډیفالټ تایید فیډبیک څخه غوره کړئ ، یا زموږ د جوړ شوي ټولګیو او سټارټر جاوا سکریپټ سره دودیز پیغامونه پلي کړئ.

موږ اوس مهال د دودیز تایید سټایلونو کارولو وړاندیز کوو ، ځکه چې د اصلي براوزر ډیفالټ تایید پیغامونه په دوامداره توګه په ټولو براوزرونو کې مرستندویه ټیکنالوژیو ته نه خپریږي (په ځانګړي توګه په ډیسټاپ او ګرځنده کې کروم).

څنګه کار کوي

دلته د بوټسټریپ سره د فورمې اعتبار څنګه کار کوي:

  • د HTML فورمه تایید د CSS د دوه pseudo- ټولګیو له لارې پلي کیږي، :invalidاو :valid. <input>دا په , <select>او <textarea>عناصرو باندې تطبیق کیږي .
  • بوټسټریپ د مورني ټولګي لپاره سټایلونه :invalidاو سټایلونه ټاکي، معمولا په . که نه نو، د ارزښت پرته هر اړین ساحه د پاڼې په بار کې د غلط په توګه ښکاره کیږي. په دې توګه، تاسو کولی شئ غوره کړئ کله چې دوی فعال کړئ (په عموم ډول د فورمې سپارلو هڅه کیږي).:valid.was-validated<form>
  • د فورمې بڼه بیا تنظیمولو لپاره (د مثال په توګه، د AJAX په کارولو سره د متحرک فورمو سپارلو په صورت کې)، د سپارلو وروسته بیا .was-validatedټولګي څخه لیرې کړئ.<form>
  • د فال بیک په توګه، .is-invalidاو .is-validټولګي ممکن د سیډو-کلاسونو پرځای د سرور اړخ اعتبار لپاره وکارول شي . .was-validatedدوی د والدین ټولګي ته اړتیا نلري .
  • د سی ایس ایس د کار کولو په څرنګوالي کې د خنډونو له امله، موږ نشو کولی (اوس مهال) داسې سټایلونه پلي کړو <label>چې د دودیز جاوا سکریپټ مرستې پرته په DOM کې د فارم کنټرول دمخه راځي.
  • ټول عصري براوزرونه د محدودیت تایید API ملاتړ کوي ، د فارم کنټرولونو اعتبار کولو لپاره د جاواسکریپټ میتودونو لړۍ.
  • د فیډبیک پیغامونه ممکن د براوزر ډیفالټ (د هر براوزر لپاره مختلف وي ، او د CSS له لارې غیر فعال وي) یا زموږ د دودیز فیډبیک سټایلونه د اضافي HTML او CSS سره وکاروي.
  • setCustomValidityتاسو ممکن په جاواسکریپټ کې د دودیز اعتبار پیغامونه چمتو کړئ .

د دې په پام کې نیولو سره، زموږ د دودیز فارم تصدیق کولو سټایلونو، اختیاري سرور اړخ ټولګیو، او د براوزر ډیفالټ لپاره لاندې ډیمو په پام کې ونیسئ.

دودیز سټایلونه

د دودیز بوټسټریپ فارم تصدیق کولو پیغامونو لپاره ، تاسو اړتیا لرئ په خپل کې د novalidateبولین خاصیت اضافه کړئ <form>. دا د براوزر ډیفالټ فیډبیک وسیلې لارښوونې غیر فعالوي ، مګر لاهم په جاواسکریپټ کې د فارم تصدیق APIs ته لاسرسی چمتو کوي. هڅه وکړئ لاندې فورمه وسپاري؛ زموږ جاواسکریپټ به د سپارلو تڼۍ ودروي او تاسو ته به فیډبیک وړاندې کړي. کله چې د سپارلو هڅه کوئ، تاسو به وګورئ چې ستاسو د فارم کنټرولونو کې پلي شوي سټایلونه :invalidاو سټایلونه.:valid

د دودیز فیډبیک سټایلونه دودیز رنګونه ، سرحدونه ، د تمرکز سټایلونه او د شالید عکسونه پلي کوي ترڅو د فیډبیک ښه اړیکه ونیسي. د s لپاره د شالید <select>عکسونه یوازې د سره شتون لري .custom-select، او نه .form-control.

ښه ښکاري!
ښه ښکاري!
@
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 سره سټایل نشي کیدی ، تاسو لاهم کولی شئ د جاواسکریپټ له لارې د فیډبیک متن دودیز کړئ.

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

ملاتړ شوي عناصر

زموږ د مثال فورمې پورته اصلي متن s ښیي ، مګر د فارم تصدیق کولو سټایلونه د s او دودیز فارم کنټرولونو <input>لپاره هم شتون لري .<textarea>

مهرباني وکړئ په متن کې یو پیغام دننه کړئ.
د ناسم فیډبیک متن بیلګه
نور مثال د غلط فیډبیک متن
د غلط دودیز انتخاب فیډبیک مثال
د ناسم دودیز فایل فیډبیک مثال
<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="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>

دودیز بڼې

د حتی نور تخصیص او کراس براوزر تسلسل لپاره ، زموږ د بشپړ دودیز فارم عناصر وکاروئ د براوزر ډیفالټ بدلولو لپاره. دوی د سیمانټیک او د لاسرسي وړ مارک اپ په سر کې جوړ شوي ، نو دا د هرډول ډیفالټ فارم کنټرول لپاره قوي بدیل دي.

چک بکسونه او راډیوګانې

هر چک بکس او راډیو <input>او جوړه زموږ د دودیز کنټرول رامینځته کولو لپاره <label>په یوه کې پوښل شوې . <div>په ساختماني توګه، دا زموږ د ډیفالټ په څیر ورته طریقه ده .form-check.

~موږ د خپلو ټولو <input>ایالتونو لپاره د وروڼه انتخاب کونکی ( ) کاروو — لکه :checked— زموږ د دودیز فارم شاخص په سمه توګه سټایل کولو لپاره. کله چې د .custom-control-labelټولګي سره یوځای شي، موږ کولی شو د هر توکي لپاره متن د حالت پر بنسټ سټایل کړو <input>.

موږ د ډیفالټ <input>سره پټوو او د نوي دودیز فارم شاخص جوړولو لپاره یې په خپل ځای کې او سره opacityکاروو . له بده مرغه موږ نشو کولی یوازې له دې څخه دودیز جوړ کړو ځکه چې CSS په دې عنصر کار نه کوي..custom-control-label::before::after<input>content

په چک شوي ایالتونو کې، موږ د Open Iconic څخه د بیس64 ایمبیډ شوي 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="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>

معلول

دودیز چیک باکسونه او راډیوګانې هم غیر فعال کیدی شي. 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د دودیز سټایلونو محرک کولو لپاره. دودیز سټایلونه <select>د لومړني ظهور پورې محدود دي او نشي کولی <option>د براوزر محدودیتونو له امله s بدل کړي.

<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 او فایرفوکس د ګوتو له ښي یا ښي اړخ څخه د دوی ټریک "ډکولو" ملاتړ کوي د لید په توګه د پرمختګ څرګندولو لپاره ، موږ اوس مهال دا ملاتړ نه کوو.

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

minد سلسلې آخذې په ترتیب سره د - او max- 0لپاره ضمني ارزښتونه 100لري. تاسو ممکن د هغو کسانو لپاره نوي ارزښتونه مشخص کړئ چې دا minاو maxځانګړتیاوې کاروي.

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

د ډیفالټ په واسطه، رینج آخذه د عدد ارزښتونو ته "snap" ورکوي. د دې بدلولو لپاره، تاسو کولی شئ یو 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 ، دا هغه څه دي چې موږ یې اوس دلته زموږ په اسنادو کې کاروو.

د دوتنې ان پټ د ډنډ څخه خورا لوی دی او اضافي جاوا سکریپټ ته اړتیا لري که تاسو غواړئ دوی د فعال انتخاب فایل سره وصل کړئ… او د فایل نوم متن غوره کړئ.

<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()pseudo-class د دې لپاره کارول کیږي چې نورو ژبو ته د "براؤز" متن ژباړلو اجازه ورکړي. د اړونده ژبې ټاګ او ځایی شوي تارونو $custom-file-textسره د Sass متغیر ته ننوتل یا اضافه کړئ . د انګلیسي تارونه په ورته ډول تنظیم کیدی شي. د مثال په توګه، دلته دا دی چې څنګه یو څوک کولی شي هسپانوي ژباړه اضافه کړي (د هسپانوي ژبې کوډ دی ):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 سره د تارونو ژباړل یا دودول

بوټسټریپ په 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>