Source

Формы

Прыклады і рэкамендацыі па выкарыстанні стыляў кіравання формамі, параметраў макета і карыстацкіх кампанентаў для стварэння шырокага спектру формаў.

Агляд

Элементы кіравання формамі Bootstrap пашыраюць нашы стылі формы Rebooted з класамі. Выкарыстоўвайце гэтыя класы, каб выбраць іх індывідуальныя дысплеі для больш паслядоўнага адлюстравання ў браўзерах і прыладах.

Абавязкова выкарыстоўвайце адпаведны typeатрыбут для ўсіх уводаў (напрыклад, emailдля адраса электроннай пошты ці numberлічбавай інфармацыі), каб скарыстацца новымі элементамі кіравання ўводам, такімі як праверка электроннай пошты, выбар нумара і многае іншае.

Вось кароткі прыклад для дэманстрацыі стыляў формы Bootstrap. Працягвайце чытаць дакументацыю аб неабходных класах, макеце формы і іншым.

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

Элементы кіравання формай

Элементы кіравання тэкставай формы, такія як <input>s, <select>s і <textarea>s, стылізуюцца з .form-controlкласам. Уключаны стылі для агульнага выгляду, стану фокусу, памеру і многае іншае.

Не забудзьцеся вывучыць нашы індывідуальныя формы для далейшага стылю <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Для ўводу файлаў памяняйце .form-controlна .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Праклейванне

Усталюйце вышыні з дапамогай такіх класаў, як .form-control-lgі .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Толькі для чытання

Дадайце readonlyлагічны атрыбут да ўводу, каб прадухіліць змяненне значэння ўводу. Уводы толькі для чытання выглядаюць больш светлымі (як і адключаныя), але захоўваюць стандартны курсор.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Звычайны тэкст толькі для чытання

Калі вы хочаце, каб <input readonly>элементы вашай формы былі аформлены ў выглядзе звычайнага тэксту, выкарыстоўвайце .form-control-plaintextклас, каб выдаліць стандартны стыль палёў формы і захаваць правільныя палі і запаўненне.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Увод дыяпазону

Усталюйце гарызантальна пракручваны дыяпазон уводу з дапамогай .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Сцяжкі і радыё

Сцяжкі па змаўчанні і радыё палепшаны з дапамогай аднаго класа для абодвух тыпаў уводу .form-check, які паляпшае размяшчэнне і паводзіны іх элементаў HTML . Сцяжкі прызначаны для выбару аднаго або некалькіх варыянтаў у спісе, у той час як радыё - для выбару аднаго варыянту з многіх.

Адключаныя сцяжкі і радыё падтрымліваюцца, але каб забяспечыць not-allowedкурсор пры навядзенні на бацькоўскі элемент <label>, вам трэба будзе дадаць disabledатрыбут у .form-check-input. Атрыбут disabled будзе прымяняць больш светлы колер, каб паказаць стан уводу.

Сцяжкі і радыёпрыёмнікі створаны для падтрымкі праверкі формы на аснове 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">
  <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 у межах .rowабо .form-row. Яны пароўну падзеляць даступную шырыню паміж сабой. Вы таксама можаце выбраць падмноства вашых слупкоў, каб яны займалі больш ці менш месца, а астатнія .colпароўну падзяляюць астатнія, з дапамогай пэўных класаў слупкоў, такіх як .col-7.

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

Аўтаматычны памер

У прыкладзе ніжэй выкарыстоўваецца ўтыліта flexbox для вертыкальнага цэнтравання змесціва і змяненняў .col, .col-autoкаб вашыя слупкі займалі столькі месца, колькі неабходна. Іншымі словамі, памер слупка залежыць ад змесціва.

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

Затым вы можаце змяшаць гэта яшчэ раз з класамі слупкоў, якія залежаць ад памеру.

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

І, вядома , падтрымліваюцца карыстальніцкія элементы кіравання формамі .

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

Убудаваныя формы

Выкарыстоўвайце .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лагічны атрыбут да ўводу, каб прадухіліць узаемадзеянне карыстальніка і зрабіць яго больш лёгкім.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Дадайце disabledатрыбут у a <fieldset>, каб адключыць усе элементы кіравання ўнутры.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Засцярога з якарамі

Па змаўчанні браўзеры будуць разглядаць усе ўласныя элементы кіравання формай ( <input>, <select>і <button>элементы) унутры <fieldset disabled>як адключаныя, прадухіляючы ўзаемадзеянне з імі як клавіятурай, так і мышшу. Аднак, калі ваша форма таксама ўключае <a ... class="btn btn-*">элементы, ім будзе нададзены толькі стыль pointer-events: none. Як адзначалася ў раздзеле аб адключаным стане для кнопак (і ў прыватнасці ў падраздзеле для прывязных элементаў), гэта ўласцівасць CSS яшчэ не стандартызавана і не цалкам падтрымліваецца ў Internet Explorer 10, і не будзе перашкаджаць карыстальнікам клавіятуры можа засяродзіцца або актываваць гэтыя спасылкі. Такім чынам, каб быць у бяспецы, выкарыстоўвайце ўласны JavaScript, каб адключыць такія спасылкі.

Кросбраузерная сумяшчальнасць

У той час як Bootstrap будзе прымяняць гэтыя стылі ва ўсіх браўзерах, Internet Explorer 11 і ніжэй не цалкам падтрымліваюць disabledатрыбут на <fieldset>. Выкарыстоўвайце карыстальніцкі JavaScript, каб адключыць набор палёў у гэтых браўзерах.

Праверка

Дайце сваім карыстальнікам каштоўную, дзейсную зваротную сувязь з дапамогай праверкі формы HTML5, даступнай ва ўсіх браўзерах, якія падтрымліваюцца намі . Выбірайце са зваротнай сувязі праверкі браўзера па змаўчанні або выкарыстоўвайце ўласныя паведамленні з дапамогай нашых убудаваных класаў і пачатковага JavaScript.

У цяперашні час мы рэкамендуем выкарыстоўваць карыстальніцкія стылі праверкі, паколькі ўласныя паведамленні аб праверцы па змаўчанні не заўсёды падвяргаюцца дапаможным тэхналогіям ва ўсіх браўзерах (у першую чаргу, Chrome на працоўным стале і мабільным).

Як гэта працуе

Вось як працуе праверка формы з Bootstrap:

Праверка формы HTML прымяняецца з дапамогай двух псеўдакласаў CSS :invalidі :valid. Гэта прымяняецца да элементаў <input>, <select>і .<textarea>
Bootstrap размяркоўвае :invalidі :validстылі для бацькоўскага .was-validatedкласа, звычайна прымяняюцца да <form>. У адваротным выпадку любое абавязковае поле без значэння будзе адлюстроўвацца як несапраўднае пры загрузцы старонкі. Такім чынам, вы можаце выбраць, калі іх актываваць (звычайна пасля спробы адпраўкі формы).
Каб скінуць знешні выгляд формы (напрыклад, у выпадку дынамічнай адпраўкі формы з дапамогай AJAX), выдаліце .was-validatedклас з <form>зноў пасля адпраўкі.
У якасці запаснога варыянту можна выкарыстоўваць класы замест псеўдакласаў для .is-invalidправеркі на баку сервера . Яны не патрабуюць бацькоўскага класа..is-valid.was-validated
З-за абмежаванняў у тым, як працуе CSS, мы не можам (у цяперашні час) прымяніць стылі да, <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.

Zip

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>тэксты вышэй, але стылі праверкі формы таксама даступныя для нашых карыстальніцкіх элементаў кіравання формамі.

Усталюйце гэты карыстальніцкі сцяжок

Прыклад несапраўднага тэксту водгуку

Пераключыць гэта карыстальніцкае радыё

Або пераключыце гэта іншае карыстальніцкае радыё

Яшчэ прыклад несапраўднага тэксту водгуку

Прыклад несапраўднай зваротнай сувязі выбару

Выберыце файл...

Прыклад несапраўднай зваротнай сувязі з карыстальніцкім файлам

<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знаходзіцца на ім для размяшчэння падказкі. У прыведзеным ніжэй прыкладзе нашы класы слупкоў ужо маюць гэта, але для вашага праекта можа спатрэбіцца альтэрнатыўная ўстаноўка.

Імя

Прозвішча

Імя карыстальніка

Горад

Дзяржава

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>таму што CSS contentне працуе з гэтым элементам.

У пазначаных станах мы выкарыстоўваем абразкі SVG, убудаваныя ў base64 , з Open Iconic . Гэта дае нам найлепшы кантроль над стылізацыяй і размяшчэннем у браўзерах і прыладах.

Сцяжкі

Усталюйце гэты карыстальніцкі сцяжок

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

Карыстальніцкія сцяжкі таксама могуць выкарыстоўваць :indeterminateпсеўдаклас, калі ўручную ўсталёўваць праз JavaScript (няма даступнага атрыбута HTML для яго ўказання).

Усталюйце гэты карыстальніцкі сцяжок

Калі вы выкарыстоўваеце jQuery, чагосьці накшталт гэтага павінна быць дастаткова:

$('.your-checkbox').prop('indeterminate', true)

Радыёстанцыі

Пераключыць гэта карыстальніцкае радыё

Або пераключыце гэта іншае карыстальніцкае радыё

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

У радку

Пераключыць гэта карыстальніцкае радыё

Або пераключыце гэта іншае карыстальніцкае радыё

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Інваліды

Карыстальніцкія сцяжкі і радыё таксама можна адключыць. Дадайце disabledлагічны атрыбут да <input>і карыстальніцкі індыкатар і апісанне этыкеткі будуць аўтаматычна стылізаваны.

Усталюйце гэты карыстальніцкі сцяжок

Пераключыць гэта карыстальніцкае радыё

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

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

Карыстальніцкім <select>меню патрэбны толькі карыстальніцкі клас, .custom-selectкаб выклікаць карыстальніцкія стылі. Карыстальніцкія стылі абмежаваныя <select>першапачатковым выглядам і не могуць змяняць <option>s з-за абмежаванняў браўзера.

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

Вы таксама можаце выбраць адзін з маленькіх і вялікіх выбараў, якія адпавядаюць нашаму ўводу тэксту падобнага памеру.

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

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

Атрыбут multipleтаксама падтрымліваецца:

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

Як і sizeатрыбут:

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

Дыяпазон

Стварыце ўласныя <input type="range">элементы кіравання з дапамогай .custom-range. Дарожка (фон) і вялікі палец (значэнне) стылізаваны так, каб выглядаць аднолькава ў розных браўзерах. Паколькі толькі IE і Firefox падтрымліваюць «запаўненне» сваёй дарожкі злева ці справа ад вялікага пальца ў якасці сродку для візуальнага паказу прагрэсу, мы зараз не падтрымліваем гэта.

Прыклад дыяпазону

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

Уваходы дыяпазону маюць няяўныя значэнні для minі max— 0і 100адпаведна. Вы можаце ўказаць новыя значэнні для тых, хто выкарыстоўвае атрыбуты minі .max

Прыклад дыяпазону

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

Па змаўчанні ўваходы дыяпазону "прывязваюцца" да цэлых значэнняў. Каб змяніць гэта, вы можаце ўказаць stepзначэнне. У прыкладзе ніжэй мы падвойваем колькасць крокаў з дапамогай step="0.5".

Прыклад дыяпазону

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

Файлавы браўзэр

Увод файла з'яўляецца самым складаным з усіх і патрабуе дадатковага JavaScript, калі вы хочаце злучыць іх з функцыянальным выбарам файла… і выбраным тэкстам імя файла.

Выберыце файл

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

Мы хаваем файл па змаўчанні <input>праз opacityі замест гэтага стылізуем <label>. Кнопка ствараецца і размяшчаецца з дапамогай ::after. Нарэшце, мы аб'яўляем 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-LanguageHTTP , сярод іншых метадаў.

Формы

Агляд

Элементы кіравання формай

Праклейванне

Толькі для чытання

Звычайны тэкст толькі для чытання

Увод дыяпазону

Сцяжкі і радыё

Па змаўчанні (у стос)

У радку

Без этыкетак

Макет

Сфармуйце групы

Сетка формы

Сфармаваць шэраг

Гарызантальная форма

Памер этыкеткі гарызантальнай формы

Прамер калоны

Аўтаматычны памер

Убудаваныя формы

Альтэрнатывы схаваным этыкеткам

Тэкст даведкі

Звязванне тэксту даведкі з элементамі кіравання формай

Формы для інвалідаў

Засцярога з якарамі

Кросбраузерная сумяшчальнасць

Праверка

Як гэта працуе

Індывідуальныя стылі

Стандартныя налады браўзера

Бок сервера

Падтрымліваюцца элементы

Падказкі

Карыстальніцкія формы

Сцяжкі і радыё

Сцяжкі

Радыёстанцыі

У радку

Інваліды

Выберыце меню

Дыяпазон

Файлавы браўзэр

Пераклад або налада радкоў