Source

Шаклҳо

Намунаҳо ва дастурҳои истифода барои услубҳои идоракунии шакл, имконоти тарҳбандӣ ва ҷузъҳои фармоишӣ барои эҷоди шаклҳои васеи шакл.

Барраси

Назорати формаи Bootstrap дар сабкҳои шакли Rebooted мо бо синфҳо васеъ мешавад. Аз ин синфҳо истифода баред, то ба намоишҳои фармоишии онҳо барои намоиши мувофиқтар дар байни браузерҳо ва дастгоҳҳо дохил шавед.

Боварӣ ҳосил кунед, ки 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-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>s, <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-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>

Тарҳ

Азбаски Bootstrap 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-*-*синфҳо барои муайян кардани паҳнои тамғакоғазҳо ва назорати худ, шаклҳои уфуқӣ бо шабака эҷод кунед . Боварӣ ҳосил кунед, ки ба s-и худ низ илова .col-form-labelкунед <label>, то онҳо амудӣ бо назорати шакли алоқаманди худ мутамарказ шаванд.

Баъзан, ба шумо лозим меояд, ки аз маржа ё утилитаҳои пуркунӣ истифода баред, то он ҳамоҳангсозии комилеро, ки ба шумо лозим аст, эҷод кунед. Масалан, мо padding-topтамғаи вурудоти радиоии stacked-ро хориҷ кардем, то хатти асоси матнро беҳтар мувофиқ созем.

Радиохо
Қуттии қайд 
<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>

Андозаи сутун

Тавре ки дар мисолҳои қаблӣ нишон дода шудааст, системаи шабакаи мо ба шумо имкон медиҳад, .colки дар дохили як .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>

Андозаи худкор

Намунаи дар поён овардашуда як утилитаи 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 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>

Шаклҳои inline

Синфро .form-inlineбарои намоиш додани як қатор тамғакоғазҳо, идоракунии шакл ва тугмаҳо дар як сатри уфуқӣ истифода баред. Назорати форма дар дохили шаклҳо аз ҳолати пешфарзашон каме фарқ мекунад.

  • Назоратҳо инҳоянд display: flex, ки ҳама гуна фазои сафеди HTML-ро вайрон мекунанд ва ба шумо имкон медиҳанд, ки назорати ҳамоҳангиро бо фосила ва утилитаҳои flexbox таъмин кунед .
  • Назоратҳо ва гурӯҳҳои воридотӣ width: autoбарои бекор кардани пешфарзи Bootstrap width: 100%мегиранд.
  • Назоратҳо танҳо дар сатри намоишӣ пайдо мешаванд, ки паҳнои на камтар аз 576 пиксел доранд , то барои намоишгоҳҳои танг дар дастгоҳҳои мобилӣ ҳисоб карда шаванд.

Шояд ба шумо лозим ояд, ки паҳнӣ ва ҳамоҳангсозии идоракунии формаҳои инфиродӣ бо утилитаҳои фосилавӣ (тавре ки дар зер нишон дода шудааст) дастӣ ҳал карда шавад. Ниҳоят, боварӣ ҳосил кунед, ки ҳамеша <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>унсурҳоро) дар дохили a <fieldset disabled>ҳамчун ғайрифаъол ҳисоб мекунанд ва ҳамкории клавиатура ва мушро бо онҳо пешгирӣ мекунанд. Аммо, агар шакли шумо инчунин <a ... class="btn btn-*">унсурҳоро дар бар гирад, ба онҳо танҳо услуби pointer-events: none. Тавре ки дар бахш дар бораи ҳолати ғайрифаъол барои тугмаҳо (ва махсусан дар зербахш барои унсурҳои лангар) қайд карда шуд, ин амволи CSS ҳанӯз стандартизатсия нашудааст ва дар Internet Explorer 10 пурра дастгирӣ намешавад ва ба корбарони клавиатура монеъ намешавад. қодир ба таваҷҷӯҳ ё фаъол кардани ин пайвандҳо. Пас, барои бехатар будан, JavaScript-и фармоиширо барои хомӯш кардани чунин истинодҳо истифода баред.

Мутобиқати кросс-браузер

Гарчанде ки Bootstrap ин услубҳоро дар ҳама браузерҳо татбиқ мекунад, Internet Explorer 11 ва поёнтар ин disabledатрибутро дар <fieldset>. Барои хомӯш кардани маҷмӯи майдонҳо дар ин браузерҳо JavaScript-и фармоиширо истифода баред.

Санҷиш

Бо тасдиқи шакли HTML5 ба корбарони худ фикру мулоҳизаҳои арзишманд ва қобили амал пешниҳод кунед – дар ҳама браузерҳои дастгирӣшавандаи мо дастрас аст. Аз браузери пешфарз фикру мулоҳизаҳои тасдиқи пешфарзро интихоб кунед ё паёмҳои фармоиширо бо синфҳои дарунсохт ва JavaScript оғозкунандаи мо татбиқ кунед.

Мо дар айни замон тавсия медиҳем, ки сабкҳои тасдиқкунии фармоиширо истифода барем, зеро паёмҳои тасдиқи пешфарзии браузери маҳаллӣ пайваста ба технологияҳои ёрирасон дар ҳама браузерҳо дучор намешаванд (аз ҷумла, Chrome дар мизи корӣ ва мобилӣ).

Он чӣ гуна кор мекунад

Ин аст, ки чӣ тавр тасдиқи форма бо Bootstrap кор мекунад:

  • Тасдиқи шакли HTML тавассути ду синфҳои псевдо-синфи CSS :invalidва :valid. Он ба <input>, <select>, ва <textarea>элементҳо дахл дорад.
  • Bootstrap миқёс :invalidва :validуслубҳоро ба синфи волидайн фаро мегирад .was-validated, ки одатан ба <form>. Дар акси ҳол, ҳама гуна майдони ҳатмӣ бидуни арзиш ҳангоми бори саҳифа беэътибор нишон дода мешавад. Бо ин роҳ, шумо метавонед кай фаъол кардани онҳоро интихоб кунед (одатан пас аз кӯшиши пешниҳоди шакл).
  • Барои аз нав барқарор кардани намуди шакл (масалан, дар сурати пешниҳоди шакли динамикӣ бо истифода аз AJAX), баъд аз пешниҳод .was-validatedсинфро аз <form>нав хориҷ кунед.
  • Ҳамчун бозгашт .is-invalidва .is-validсинфҳо метавонанд ба ҷои псевдоклассҳо барои тасдиқи тарафи сервер истифода шаванд . .was-validatedОнҳо синфи волидайнро талаб намекунанд .
  • Аз сабаби маҳдудиятҳо дар тарзи кори CSS, мо наметавонем (ҳозир) сабкҳоро ба a <label>, ки пеш аз назорати форма дар DOM меояд, бе ёрии JavaScript фармоишӣ истифода барем.
  • Ҳама браузерҳои муосир API-и санҷиши маҳдудкуниро , як қатор усулҳои JavaScript-ро барои тасдиқи назорати шакл дастгирӣ мекунанд.
  • Паёмҳои фикру мулоҳизаҳо метавонанд пешфарзҳои браузерро (барои ҳар як браузер гуногун ва аз тариқи CSS номуносиб) ё услубҳои бознигарии фармоишии моро бо HTML ва CSS иловагӣ истифода баранд.
  • Шумо метавонед паёмҳои эътибории фармоиширо бо setCustomValidityJavaScript пешниҳод кунед.

Бо дарназардошти ин, намоишҳои зеринро барои услубҳои тасдиқи формаи мо, синфҳои ихтиёрии сервер ва пешфарзҳои браузер баррасӣ кунед.

Услубҳои фармоишӣ

Барои паёмҳои тасдиқкунии шакли Bootstrap, шумо бояд novalidateатрибути мантиқиро ба <form>. Ин маслиҳатҳои пешфарзии баррасиҳои браузерро ғайрифаъол мекунад, аммо ба ҳар ҳол дастрасӣ ба API-ҳои тасдиқи формаро дар JavaScript таъмин мекунад. Кӯшиш кунед, ки шакли зерро пешниҳод кунед; JavaScript-и мо тугмаи ирсолро пахш мекунад ва фикру мулоҳизаҳоро ба шумо мефиристад.

Ҳангоми кӯшиши фиристодан, шумо :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>

Пешфарзҳои браузер

Оё ба паёмҳои бозгашти фармоишӣ ё навиштани JavaScript барои тағир додани рафтори шакл манфиатдор нестед? Ҳама хуб, шумо метавонед пешфарзҳои браузерро истифода баред. Кӯшиш кунед, ки шакли зерро пешниҳод кунед. Вобаста аз браузер ва 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ки бо ин синфҳо низ дастгирӣ карда мешавад.

Ба назар хуб!
Ба назар хуб!
@
Лутфан номи корбарро интихоб кунед.
Лутфан шаҳри дурустро пешниҳод кунед.
Лутфан ҳолати дурустро пешниҳод кунед.
Лутфан zip-и дурустро пешниҳод кунед.
Шумо бояд пеш аз пешниҳод розӣ шавед. 
<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>то назорати фармоишии мо ва a<label> барои матни ҳамроҳро эҷод кунад. Аз ҷиҳати сохторӣ, ин ҳамон равишест, ки пешфарзи мост .form-check.

Мо селектори бародар ( ~) -ро барои ҳама иёлатҳои худ истифода мебарем, <input>масалан :checked- барои дуруст услуб кардани нишондиҳандаи шакли фармоишии мо. Вақте ки бо .custom-control-labelсинф якҷоя карда мешавад, мо инчунин метавонем матнро барои ҳар як ашё дар асоси<input> ' услубӣ созем.

Мо пешфарзро <input>бо пинҳон мекунем opacityва .custom-control-labelбарои сохтани нишондиҳандаи шакли нави фармоишӣ дар ҷои он бо ::beforeва истифода мебарем ::after. Мутаассифона, мо наметавонем як фармоишгари танҳо аз <input>сабаби CSS сохтанcontent дар ин элемент кор намекунад.

Дар иёлатҳои санҷидашуда мо нишонаҳои SVG-и дарунсохташудаи base64 -ро аз 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>

Қуттиҳои фармоишӣ инчунин метавонанд :indeterminateсинфи псевдоро ҳангоми ба таври дастӣ тавассути JavaScript насб кардан истифода баранд (барои нишон додани он ягон атрибути дастраси 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="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>ва наметавонанд <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 ва Firefox "пур кардани" пайроҳаи худро аз чап ё рости ангушти калон ҳамчун воситаи нишон додани пешрафти визуалӣ дастгирӣ мекунанд, мо ҳоло онро дастгирӣ намекунем.

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

Бо нобаёнӣ, диапазон воридотро ба арзишҳои бутун "часп" мекунад. Барои тағир додани ин, шумо метавонед 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">

Браузери файл

Вуруди файл аз ҳама пурқувваттарин аст ва JavaScript-и иловагиро талаб мекунад, агар шумо хоҳед, ки онҳоро бо функсионалии Интихоби файл… ва матни номи файли интихобшуда пайваст кунед.

<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ва heightдар<input> фосилаи дуруст барои мундариҷаи атроф

Тарҷума ё танзими сатрҳо

Синфи :lang()псевдо-синф барои тарҷумаи матни "Мураттаб" ба забонҳои дигар истифода мешавад. Сабтҳоро ба $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>

Шумо бояд забони ҳуҷҷати худро (ё зердарахти онро) дуруст танзим кунед, то матни дуруст нишон дода шавад. Инро метавон бо истифода аз langатрибут дар <html>элемент ё Content-Languageсарлавҳаи HTTP , дар байни усулҳои дигар анҷом дод.