Source

Форми

Примери и упатства за употреба за стилови за контрола на форми, опции за распоред и сопствени компоненти за создавање широк спектар на форми.

Преглед

Контролите на формата на Bootstrap се прошируваат на нашите рестартирани стилови на форми со класи. Користете ги овие класи за да се вклучите во нивните приспособени прикази за поконзистентно прикажување низ прелистувачите и уредите.

Погрижете се да користите соодветен typeатрибут на сите влезови (на пр., emailза адреса на е-пошта или numberза нумерички информации) за да ги искористите предностите од поновите контроли за внесување, како што се проверка на е-пошта, избор на број и друго.

Еве брз пример за демонстрација на стиловите на формите на Bootstrap. Продолжете да читате за документација за потребните часови, распоред на формулари и многу повеќе.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Контроли на формулари

Контролите на текстуалната форма - како <input>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-check, единечна класа за двата типа на влез што го подобрува распоредот и однесувањето на нивните HTML елементи . Полето за избор се за избор на една или неколку опции во списокот, додека радијата се за избор на една опција од многу.

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

Полето за избор и употребата на радија се создадени за да поддржуваат валидација на формулари базирана на HTML и да обезбедат концизни, достапни етикети. Како такви, нашите <input>s и <label>s се братски елементи за разлика од <input>a во рамките на <label>. Ова е малку пообемно бидејќи мора да наведете idи forатрибути за да ги поврзете <input>и <label>.

Стандардно (наредени)

Стандардно, секој број полиња за избор и радија кои се блиски сестри ќе бидат вертикално наредени и соодветно распоредени со .form-check.

Стандардно поле за избор

Оневозможено поле за избор

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Стандардно радио

Второ стандардно радио

Оневозможено радио

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check 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.

3 (оневозможено)

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

3 (оневозможено)

<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-*-*класите за да ја одредите ширината на вашите етикети и контроли. Погрижете се да додадете .col-form-labelи во вашите <label>s, така што тие се вертикално центрирани со нивните поврзани контроли за форма.

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

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Хоризонтална форма на големината на етикетата

Уверете се дека користите .col-form-label-smили .col-form-label-lgна вашите <label>s или <legend>s за правилно следење на големината на .form-control-lgи .form-control-sm.

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

Димензионирање на колоната

Како што е прикажано во претходните примери, нашиот мрежен систем ви овозможува да поставите кој било број на .cols во a .rowили .form-row. Тие ќе ја поделат достапната ширина подеднакво меѓу нив. Можете исто така да изберете подмножество од вашите колони за да заземаат повеќе или помалку простор, додека останатите .colподеднакво го делат остатокот, со специфични класи на колони како .col-7.

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

Автоматско димензионирање

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

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

Потоа можете да го ремиксирате тоа уште еднаш со класи на колони специфични за големината.

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

И, се разбира , се поддржани сопствени контроли за формулари .

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

Вградени форми

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

Контролите се display: flex, го рушат секој HTML бел простор и ви овозможуваат да обезбедите контрола на порамнувањето со алатките за проред и 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>, или нешто друго) со ништо повеќе од услужна класа.

<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атрибутот boolean на влез за да спречите интеракции со корисникот и да изгледате полесни.

<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 својство сè уште не е стандардизиран и не е целосно поддржан во Opera 18 и подолу, или во Internet Explorer 10, и победи Не ги спречувајте корисниците на тастатурата да можат да ги фокусираат или активираат овие врски. Затоа, за да бидете безбедни, користете прилагодено JavaScript за да ги оневозможите таквите врски.

Компатибилност со вкрстени прелистувачи

Додека Bootstrap ќе ги примени овие стилови во сите прелистувачи, Internet Explorer 11 и подолу не го поддржуваат целосно disabledатрибутот на <fieldset>. Користете приспособен JavaScript за да го оневозможите множеството полиња во овие прелистувачи.

Валидација

Обезбедете вредни, повратни информации за вашите корисници со валидација на формуларот HTML5 – достапна во сите наши поддржани прелистувачи . Изберете од стандардните повратни информации за валидација на прелистувачот или имплементирајте сопствени пораки со нашите вградени класи и стартер JavaScript.

Силно препорачуваме сопствени стилови за валидација бидејќи стандардните стандардни прелистувачи не се објавуваат на читателите на екранот.

Како работи

Еве како функционира валидацијата на формата со Bootstrap:

Потврдата на HTML формата се применува преку двете псевдо-класи на CSS :invalidи :valid. Тоа се однесува на <input>, <select>, и <textarea>елементи.
Bootstrap ги опфати :invalidи :validстиловите на родителската .was-validatedкласа, обично се применуваат на <form>. Во спротивно, секое задолжително поле без вредност се прикажува како неважечко при вчитувањето на страницата. На овој начин, можете да изберете кога да ги активирате (обично по обидот за поднесување формулар).
Како резерва, .is-invalidи .is-validкласите може да се користат наместо псевдо-класите за валидација од страна на серверот . Тие не бараат .was-validatedродителска класа.
Поради ограничувањата за тоа како функционира CSS, не можеме (во моментов) да примениме стилови на <label>она што доаѓа пред контролата на формуларот во DOM без помош на прилагоден JavaScript.
Сите модерни прелистувачи го поддржуваат API за валидација на ограничувања , серија на JavaScript методи за валидација на контролите на формуларот.
Пораките за повратни информации може да ги користат стандардните поставки на прелистувачот (различни за секој прелистувач и нестилирани преку CSS) или нашите сопствени стилови на повратни информации со дополнителен HTML и CSS.
Може да обезбедите прилагодени пораки за валидност setCustomValidityво JavaScript.

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

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

За пораките за валидација на формулари за приспособени 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 за да го промените однесувањето на формата? Сè е добро, можете да ги користите стандардните поставки на прелистувачот. Обидете се да го испратите формуларот подолу. Во зависност од вашиот прелистувач и ОС, ќе видите малку поинаков стил на повратни информации.

Иако овие стилови на повратни информации не можат да се стилизираат со 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>s погоре, но стиловите за валидација на формулари се достапни и за нашите сопствени контроли на формулари.

Проверете го ова приспособено поле за избор

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

Вклучете го приспособеното радио

Или вклучете го ова друго приспособено радио

Повеќе пример за неважечки текст за повратни информации

Пример повратни информации за неважечки приспособен избор

Изберете датотека...

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

<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него за позиционирање на врвот на алатката. Во примерот подолу, нашите класи на колони веќе го имаат ова, но вашиот проект може да бара алтернативно поставување.

Име

Презиме

Корисничко име

Градот

држава

Поштенски

<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>бидејќи CSS contentне работи на тој елемент.

Во штиклираните состојби, ние користиме икони на база 64 вградени SVG од Open Iconic . Ова ни обезбедува најдобра контрола за стилизирање и позиционирање низ прелистувачите и уредите.

Поле за избор

Проверете го ова приспособено поле за избор

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

Прилагодените полиња за избор исто така може да ја користат :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 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>

Прелистувач на датотеки

Внесувањето на датотеката е најтешкото од купот и бара дополнителен 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 , меѓу другите методи.

Форми

Преглед

Контроли на формулари

Димензионирање

Само Читај

Обичен текст само за читање

Поле за избор и радија

Стандардно (наредени)

Во линија

Без етикети

Распоред

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

Формирајте мрежа

Формирајте ред

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

Хоризонтална форма на големината на етикетата

Димензионирање на колоната

Автоматско димензионирање

Вградени форми

Алтернативи на скриените етикети

Текст за помош

Поврзување текст за помош со контроли на формулари

Оневозможени форми

Забелешка со сидра

Компатибилност со вкрстени прелистувачи

Валидација

Како работи

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

Стандардно на прелистувачот

Серверска страна

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

Совети за алатки

Прилагодени форми

Поле за избор и радија

Поле за избор

Радија

Во линија

Оневозможено

Изберете мени

Прелистувач на датотеки

Преведување или прилагодување на низите