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-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>с и <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-check елемената . Поља за потврду служе за бирање једне или више опција на листи, док су радио уређаји за избор једне опције из више.

Подржани су онемогућени оквири за потврду и радио станице, али да бисте обезбедили not-allowedкурсор на надређеном <label>, мораћете да додате disabledатрибут у .form-check-input. Дисаблед атрибут ће применити светлију боју како би помогао да се укаже на стање уноса.

Поље за потврду и коришћење радио уређаја су направљени да подржавају валидацију обрасца засновану на ХТМЛ-у и пружају сажете, приступачне ознаке. Као такви, наши <input>с и <label>с су сродни елементи за разлику од <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 disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

У реду

Групирајте поља за потврду или радио станице у истом хоризонталном реду додавањем .form-check-inlineу било који .form-check.

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

Без етикета

Додај .position-staticу уносе .form-checkкоји немају текст ознаке. Не заборавите да и даље обезбедите неки облик ознаке за помоћне технологије (на пример, коришћење aria-label).

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

Лаиоут

Пошто се Боотстрап примењује display: blockи width: 100%на скоро све наше контроле обрасца, обрасци ће се подразумевано слагати вертикално. Додатне класе се могу користити за варирање овог распореда на основу облика.

Формирајте групе

Класа .form-groupје најлакши начин за додавање структуре обрасцима. Пружа флексибилну класу која подстиче правилно груписање ознака, контрола, опционог текста помоћи и порука о валидацији образаца. Подразумевано се примењује само margin-bottom, али .form-inlineпо потреби преузима додатне стилове. Користите га са <fieldset>с, <div>с или скоро било којим другим елементом.

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

Мрежа образаца

Сложеније форме се могу изградити помоћу наших мрежних класа. Користите их за изгледе образаца који захтевају више колона, различите ширине и додатне опције поравнања.

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

Ред форме

Такође можете заменити .rowза .form-row, варијацију нашег стандардног реда мреже која замењује подразумеване олуке колона за чвршће и компактније распореде.

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

Сложенији распореди се такође могу креирати помоћу система мреже.

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

Хоризонтална форма

Креирајте хоризонталне форме помоћу мреже додавањем .rowкласе у групе образаца и коришћењем .col-*-*класа да одредите ширину ваших ознака и контрола. Обавезно додајте .col-form-labelи своје <label>с тако да буду вертикално центрирани са припадајућим контролама обрасца.

Понекад ћете можда морати да користите помоћне програме за маргине или паддинг да бисте направили савршено поравнање које вам је потребно. На пример, уклонили смо padding-topознаку на нашим наслаганим радио улазима да бисмо боље поравнали основну линију текста.

Радио
Поље за потврду 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Хоризонтална величина етикете обрасца

Обавезно користите .col-form-label-smили .col-form-label-lgза своје <label>с или <legend>с да бисте правилно пратили величину .form-control-lgи .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Димензионисање колоне

Као што је приказано у претходним примерима, наш систем мреже вам омогућава да поставите било који број .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>

Ауто-димензионирање

Пример у наставку користи услужни програм флекбок да вертикално центрира садржај и мења .colсе .col-autoтако да ваше колоне заузимају само онолико простора колико је потребно. Другим речима, колона се сама одређује на основу садржаја.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Затим можете то још једном ремиксовати са класама колона специфичних за величину.

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

И наравно , подржане су прилагођене контроле обрасца .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Инлине форме

Користите .form-inlineкласу да прикажете низ ознака, контрола обрасца и дугмади у једном хоризонталном реду. Контроле обрасца унутар уметнутих образаца незнатно се разликују од подразумеваних стања.

  • Контроле су display: flex, сажимају било који ХТМЛ бели простор и омогућавају вам да обезбедите контролу поравнања помоћу услужних програма за размак и флексбокс .
  • Контроле и улазне групе добијају width: autoда замене Боотстрап подразумевану вредност 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у в3). Уграђени текст помоћи може се флексибилно имплементирати коришћењем било ког уграђеног ХТМЛ елемента и услужних класа као што је .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>

Уметнути текст може да користи било који типичан инлине ХТМЛ елемент (било да се ради о <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атрибут у а <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>и тастатуре и миша на њима. Међутим, ако ваш образац такође укључује елементе, њима ће бити дат само стил . Као што је наведено у одељку о онемогућеном стању за дугмад (а посебно у пододељку за елементе сидра), ово ЦСС својство још увек није стандардизовано и није у потпуности подржано у Опера 18 и старијим верзијама, или у Интернет Екплорер-у 10, и победило је не спречава кориснике тастатуре да се фокусирају или активирају ове везе. Да бисте били сигурни, користите прилагођени ЈаваСцрипт да бисте онемогућили такве везе.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Компатибилност са више претраживача

Док ће Боотстрап применити ове стилове у свим прегледачима, Интернет Екплорер 11 и старији не подржавају у потпуности disabledатрибут на <fieldset>. Користите прилагођени ЈаваСцрипт да бисте онемогућили скуп поља у овим прегледачима.

Валидација

Обезбедите вредне повратне информације својим корисницима уз ХТМЛ5 валидацију обрасца – доступну у свим подржаним прегледачима . Изаберите неку од подразумеваних повратних информација о валидацији прегледача или примените прилагођене поруке помоћу наших уграђених класа и почетничког ЈаваСцрипт-а.

Топло препоручујемо прилагођене стилове провере пошто се подразумеване поставке претраживача не објављују читачима екрана.

Како то ради

Ево како функционише валидација обрасца са Боотстрапом:

  • Валидација ХТМЛ форме се примењује преко ЦСС две псеудокласе :invalidи :valid. Односи се на <input>, <select>и <textarea>елементе.
  • Боотстрап обухвата :invalidи :validстилове на родитељску .was-validatedкласу, обично се примењује на <form>. У супротном, свако обавезно поље без вредности приказује се као неважеће при учитавању странице. На овај начин можете изабрати када да их активирате (обично након покушаја подношења обрасца).
  • Као резервни, .is-invalidи .is-validкласе се могу користити уместо псеудо-класа за валидацију на страни сервера . Не захтевају .was-validatedродитељску класу.
  • Због ограничења у начину на који ЦСС функционише, не можемо (тренутно) да применимо стилове на а <label>који се налази испред контроле обрасца у ДОМ-у без помоћи прилагођеног ЈаваСцрипт-а.
  • Сви савремени претраживачи подржавају АПИ за валидацију ограничења , серију ЈаваСцрипт метода за проверу контроле обрасца.
  • Поруке са повратним информацијама могу да користе подразумеване поставке претраживача (различите за сваки прегледач и нестилизиране преко ЦСС-а) или наше прилагођене стилове повратних информација са додатним ХТМЛ-ом и ЦСС-ом.
  • Можете да обезбедите прилагођене поруке о валидности са setCustomValidityу ЈаваСцрипт-у.

Имајући то на уму, размотрите следеће демонстрације за наше прилагођене стилове валидације обрасца, опционе класе на страни сервера и подразумеване вредности претраживача.

Прилагођени стилови

За поруке о валидацији прилагођеног Боотстрап обрасца, мораћете да додате novalidateлогички атрибут у свој <form>. Ово онемогућава подразумеване савете прегледача за повратне информације, али и даље пружа приступ АПИ-јима за валидацију обрасца у ЈаваСцрипт-у. Покушајте да пошаљете образац испод; наш ЈаваСцрипт ће пресрести дугме за слање и пренети вам повратне информације.

Када покушате да пошаљете, видећете стилове :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>

Подразумеване поставке претраживача

Нисте заинтересовани за прилагођене повратне информације о валидацији или писање ЈаваСцрипт-а да бисте променили понашање обрасца? Све у реду, можете користити подразумеване поставке претраживача. Покушајте да пошаљете образац испод. У зависности од вашег претраживача и ОС-а, видећете мало другачији стил повратних информација.

Иако се ови стилови повратних информација не могу стилизовати помоћу ЦСС-а, и даље можете да прилагодите текст повратних информација путем ЈаваСцрипт-а.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Сервер сиде

Препоручујемо да користите проверу ваљаности на страни клијента, али у случају да вам је потребна страна сервера, можете навести неважећа и важећа поља обрасца са .is-invalidи .is-valid. Имајте на уму да .invalid-feedbackје такође подржано са овим класама.

Изгледа добро!
Изгледа добро!
@
Молимо одаберите корисничко име.
Наведите важећи град.
Наведите важеће стање.
Наведите важећи поштански број.
Морате се сложити пре подношења. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Подржани елементи

Наши примери образаца приказују изворне текстуалне слова <input>изнад, али стилови валидације обрасца су доступни и за наше прилагођене контроле обрасца.

Пример неважећег текста повратне информације
Још примера неважећих повратних информација
Пример неважећих повратних информација о прилагође��ом избору
Пример неважећих повратних информација о прилагођеној датотеци 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

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

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

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

Описи алатки

Ако ваш изглед обрасца то дозвољава, можете заменити .{valid|invalid}-feedbackкласе за .{valid|invalid}-tooltipкласе да бисте приказали повратне информације о валидацији у стилизованом опису алата. Обавезно имате родитеља са position: relativeњим за позиционирање у опису алатке. У примеру испод, наше класе колона то већ имају, али ваш пројекат може захтевати алтернативно подешавање.

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

Прилагођени обрасци

За још више прилагођавања и конзистентност више прегледача, користите наше потпуно прилагођене елементе обрасца да замените подразумеване вредности прегледача. Изграђени су на врху семантичке и приступачне ознаке, тако да су солидна замена за сваку подразумевану контролу обрасца.

Поља за потврду и радио

Свако поље за потврду и радио су умотани у а <div>са братом или сестром <span>да би се креирала наша прилагођена контрола и а <label>за пратећи текст. Структурно, ово је исти приступ као и наш подразумевани .form-check.

Користимо селектор брата и сестра ( ~) за сва наша <input>стања — на пример — да бисмо :checkedправилно стилизовали наш прилагођени индикатор обрасца. Када се комбинује са .custom-control-labelкласом, можемо такође да стилизујемо текст за сваку ставку на основу стања <input>'.

Сакривамо подразумевану вредност <input>помоћу opacityи користимо .custom-control-labelза изградњу новог прилагођеног индикатора обрасца уместо њега помоћу ::beforeи ::after. Нажалост, не можемо да направимо прилагођени само из <input>јер ЦСС contentне ради на том елементу.

У провереним стањима користимо басе64 уграђене СВГ иконе из Опен Ицониц . Ово нам пружа најбољу контролу за стилизовање и позиционирање у прегледачима и уређајима.

Поља за потврду

<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псеудо класу када се ручно подесе преко ЈаваСцрипт-а (нема доступног ХТМЛ атрибута за његово навођење).

Ако користите јКуери, нешто попут овога би требало да буде довољно:

$('.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 class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Такође можете бирати између малих и великих прилагођених одабира који одговарају нашим уносима текста сличне величине.

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

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

Атрибут multipleје такође подржан:

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

Као што је sizeатрибут:

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

Прегледач датотека

Унос датотеке је најгрубљи од гомиле и захтева додатни ЈаваСцрипт ако желите да их повежете са функционалним Изаберите датотеку... и текстом имена изабраног фајла.

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

Сакривамо подразумевану датотеку <input>преко opacityи уместо тога стилизујемо <label>. Дугме се генерише и позиционира са ::after. На крају, проглашавамо а widthи heightон <input>за правилан размак за околни садржај.

Превођење или прилагођавање низова

:lang()Псеудо-класа се користи да омогући превод текста „Прегледај“ на друге језике. Замените или додајте уносе у $custom-file-textСасс променљиву са релевантном језичком ознаком и локализованим стринговима. Енглеске жице се могу прилагодити на исти начин. На пример, ево како се може додати шпански превод (шифра шпанског језика је es):

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

Ево lang(es)у акцији на прилагођеном уносу датотеке за шпански превод:

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

Мораћете да правилно подесите језик свог документа (или његовог подстабла) да би се приказао исправан текст. Ово се може урадити помоћу атрибутаlang на <html>елементу или Content-LanguageХТТП заглавља , између осталих метода.