Формы
Примеры и рекомендации по использованию стилей управления формой, параметров макета и пользовательских компонентов для создания широкого спектра форм.
Формы в Bootstrap по сути являются просто расширением наших Перезагруженных стилей форм с добавлением классов. Используйте эти классы для более точной настройки отображения и лучшей отрисовки на разных браузерах и устройствах.
Удостоверьтесь, что используете правильный атрибут type во всех формах ввода (т.е., email для почты и number для цифровой информации), это даст вам преимущества в виде новейших инструментов (таких как проверка email, выборка чисел и т.д.) контроля данных ввода.
Вот демонстрация стилей форм Bootstrap. Читайте документацию по требуемым классам, расположению форм и т.д.
<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enter email"><smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form>Текстовые инструменты контроля – такие как <input>, <select> и <textarea> - стилизованы классом .form-control, который содержит основные стили внешнего вида, активного состояния, размерности и т.д.
Изучите наши обычные формы для дальнейшего понимания стилизации <select>.
<form><divclass="form-group"><labelfor="exampleFormControlInput1">Email address</label><inputtype="email"class="form-control"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="form-group"><labelfor="exampleFormControlSelect1">Example select</label><selectclass="form-control"id="exampleFormControlSelect1"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><divclass="form-group"><labelfor="exampleFormControlSelect2">Example multiple select</label><selectmultipleclass="form-control"id="exampleFormControlSelect2"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><divclass="form-group"><labelfor="exampleFormControlTextarea1">Example textarea</label><textareaclass="form-control"id="exampleFormControlTextarea1"rows="3"></textarea></div></form>Для создания формы загрузки файлов замените .form-control на .form-control-file.
<form><divclass="form-group"><labelfor="exampleFormControlFile1">Example file input</label><inputtype="file"class="form-control-file"id="exampleFormControlFile1"></div></form>Для создания форм заданной высоты используются классы, такие как .form-control-lg и .form-control-sm.
<inputclass="form-control form-control-lg"type="text"placeholder=".form-control-lg"><inputclass="form-control"type="text"placeholder="Default input"><inputclass="form-control form-control-sm"type="text"placeholder=".form-control-sm"><selectclass="form-control form-control-lg"><option>Large select</option></select><selectclass="form-control"><option>Default select</option></select><selectclass="form-control form-control-sm"><option>Small select</option></select>Добавьте атрибут булеанова типа readonly в форму ввода для предотвращения возможности изменения значения ввода. Такие типы ввода выглядят светлее (как неактивные формы ввода), но сохраняют стандартный курсор.
<inputclass="form-control"type="text"placeholder="Readonly input here…"readonly>Если в ваших формах вы хотите стилизовать элементы <input readonly> как простой текст, используйте класс .form-control-plaintext для удаления оформления форм по умолчанию и сохранения правильных отступов.
<form><divclass="form-group row"><labelfor="staticEmail"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail"value="email@example.com"></div></div><divclass="form-group row"><labelfor="inputPassword"class="col-sm-2 col-form-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword"placeholder="Password"></div></div></form><formclass="form-inline"><divclass="form-group mb-2"><labelfor="staticEmail2"class="sr-only">Email</label><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail2"value="email@example.com"></div><divclass="form-group mx-sm-3 mb-2"><labelfor="inputPassword2"class="sr-only">Password</label><inputtype="password"class="form-control"id="inputPassword2"placeholder="Password"></div><buttontype="submit"class="btn btn-primary mb-2">Confirm identity</button></form>Чекбоксы и «радио», существовавшие по умолчанию, теперь модернизированы единым для обоих классом .form-check, цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а кнопки «радио» - одного.
Неактивные состояния чекбоксоы и "радио" поддерживаются, но для придания курсору функциональности not-allowed по наведению на родительский <label> вам потребуется добавить в .form-check-input атрибут disabled. Атрибут disabled будет применять более светлый цвет, чтобы указать состояние ввода.
Использование чекбоксов и "радио" имеет целью поддержать HTML-форму валидации и обеспечить понятные, доступные лейблы. Поэтому наши <input> и <label> - имеют одного родителя, в отличие от <input>, расположенного внутри <label>. Это немного более подробно, так как вы должны указывать атрибуты id и for для связи <input> и <label>.
По умолчанию, любое количество идущих один за другим чекбоксов и «радио» кнопок будет располагаться сверху вниз, а класс .form-check правильно отрегулирует пространство между ними.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1"><labelclass="form-check-label"for="defaultCheck1"> Default checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck2"disabled><labelclass="form-check-label"for="defaultCheck2"> Disabled checkbox </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1"> Default radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2"><labelclass="form-check-label"for="exampleRadios2"> Second default radio </label></div><divclass="form-check disabled"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled><labelclass="form-check-label"for="exampleRadios3"> Disabled radio </label></div>Группируйте чекбоксы или «радио» кнопки по одной горизонтальной линии, добавив класс .form-check-inline в любой элемент класса .form-check.
<divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox1"value="option1"><labelclass="form-check-label"for="inlineCheckbox1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox2"value="option2"><labelclass="form-check-label"for="inlineCheckbox2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox3"value="option3"disabled><labelclass="form-check-label"for="inlineCheckbox3">3 (disabled)</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"><labelclass="form-check-label"for="inlineRadio1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2"><labelclass="form-check-label"for="inlineRadio2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio3"value="option3"disabled><labelclass="form-check-label"for="inlineRadio3">3 (disabled)</label></div>Добавьте класс .position-static в формы ввода, которые находятся внутри элемента класса .form-check и не имеют какого-либо пояснительного текста. Не забудьте добавить одну из форм «лейбла» для вспомогательных технологий (например, использовав aria-label).
<divclass="form-check"><inputclass="form-check-input position-static"type="checkbox"id="blankCheckbox"value="option1"aria-label="..."></div><divclass="form-check"><inputclass="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 и включение контроля. В качестве приятного дополнения: поскольку это обычный класс, его можно использовать с <fieldset>, <div> или практически любым прочим элементом.
<form><divclass="form-group"><labelfor="formGroupExampleInput">Example label</label><inputtype="text"class="form-control"id="formGroupExampleInput"placeholder="Example input"></div><divclass="form-group"><labelfor="formGroupExampleInput2">Another label</label><inputtype="text"class="form-control"id="formGroupExampleInput2"placeholder="Another input"></div></form>Используйте их для расположения форм, которые требуют множественных колонок, различной ширины и других дополнительных параметров выравнивания.
<form><divclass="row"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"></div></div></form>Вы также можете заменить .row на класс .form-row, который есть разновидность нашего стандартного ряда сетки, который обладает возможностью «перебить» стандартно установленные расстояния между колонками и делает колонки более компактными.
<form><divclass="form-row"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"></div></div></form>Более сложную разметку можно также создать системой сеток.
<form><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputEmail4">Email</label><inputtype="email"class="form-control"id="inputEmail4"placeholder="Email"></div><divclass="form-group col-md-6"><labelfor="inputPassword4">Password</label><inputtype="password"class="form-control"id="inputPassword4"placeholder="Password"></div></div><divclass="form-group"><labelfor="inputAddress">Address</label><inputtype="text"class="form-control"id="inputAddress"placeholder="1234 Main St"></div><divclass="form-group"><labelfor="inputAddress2">Address 2</label><inputtype="text"class="form-control"id="inputAddress2"placeholder="Apartment, studio, or floor"></div><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputCity">City</label><inputtype="text"class="form-control"id="inputCity"></div><divclass="form-group col-md-4"><labelfor="inputState">State</label><selectid="inputState"class="form-control"><optionselected>Choose...</option><option>...</option></select></div><divclass="form-group col-md-2"><labelfor="inputZip">Zip</label><inputtype="text"class="form-control"id="inputZip"></div></div><divclass="form-group"><divclass="form-check"><labelclass="form-check-label"><inputclass="form-check-input"type="checkbox"> Check me out </label></div></div><buttontype="submit"class="btn btn-primary">Sign in</button></form>Создайте горизонтальные формы с помощью сеток, добавив класс .row к группам форм и используя классы .col-*-* для задания ширины ваших надписей и элементов контроля. Обязательно добавьте класс .col-form-label также и в ваши <label> для того, чтобы они приобрели вертикальное центрирование относительно связанных с ними элементов контроля форм.
Временами вам может понадобиться классы марджина или паддинга, чтобы создать классное выравнивание. Например, мы удалили padding-top в наших вертикально расположенных лейблах ввода "радио", для лучшего выравнивания текста.
<form><divclass="form-group row"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-group row"><labelfor="inputPassword3"class="col-sm-2 col-form-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="Password"></div></div><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Radios</legend><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="option1"checked><labelclass="form-check-label"for="gridRadios1"> First radio </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2"><labelclass="form-check-label"for="gridRadios2"> Second radio </label></div><divclass="form-check disabled"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="option3"disabled><labelclass="form-check-label"for="gridRadios3"> Third disabled radio </label></div></div></div></fieldset><divclass="form-group row"><divclass="col-sm-2">Checkbox</div><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck1"><labelclass="form-check-label"for="gridCheck1"> Example checkbox </label></div></div></div><divclass="form-group row"><divclass="col-sm-10"><buttontype="submit"class="btn btn-primary">Sign in</button></div></div></form>Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих <label> для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.
<form><divclass="form-group row"><labelfor="colFormLabelSm"class="col-sm-2 col-form-label col-form-label-sm">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-sm"id="colFormLabelSm"placeholder="col-form-label-sm"></div></div><divclass="form-group row"><labelfor="colFormLabel"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="colFormLabel"placeholder="col-form-label"></div></div><divclass="form-group row"><labelfor="colFormLabelLg"class="col-sm-2 col-form-label col-form-label-lg">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-lg"id="colFormLabelLg"placeholder="col-form-label-lg"></div></div></form>Как показано в предыдущих примерах, наша система сеток позволит вам расположить любое количество классов .col внутри рядов класса .row или .form-row. Такая верстка разделит доступную ширину поровну между колонками. Вы также можете создать субнабор колонок, которые займут либо меньше, либо больше места (как необходимо), в то время как колонки класса .col равномерно распределятся по оставшейся ширине, к примеру, как классы .col-7.
<form><divclass="form-row"><divclass="col-7"><inputtype="text"class="form-control"placeholder="City"></div><divclass="col"><inputtype="text"class="form-control"placeholder="State"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Zip"></div></div></form>В примере ниже для вертикального центрирования содержимого используются обычные инструменты флексбокса, также в нем использован класс .col вместо .col-auto - что заставляет колонки занять места лишь столько, сколько необходимо.
<form><divclass="form-row align-items-center"><divclass="col-auto"><labelclass="sr-only"for="inlineFormInput">Name</label><inputtype="text"class="form-control mb-2"id="inlineFormInput"placeholder="Jane Doe"></div><divclass="col-auto"><labelclass="sr-only"for="inlineFormInputGroup">Имя пользователя</label><divclass="input-group mb-2"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroup"placeholder="Имя пользователя"></div></div><divclass="col-auto"><divclass="form-check mb-2"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck"><labelclass="form-check-label"for="autoSizingCheck"> Remember me </label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary mb-2">Submit</button></div></div></form>Вы можете заменить их опять на классы колонок определенного размера.
<form><divclass="form-row align-items-center"><divclass="col-sm-3 my-1"><labelclass="sr-only"for="inlineFormInputName">Name</label><inputtype="text"class="form-control"id="inlineFormInputName"placeholder="Jane Doe"></div><divclass="col-sm-3 my-1"><labelclass="sr-only"for="inlineFormInputGroupUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername"placeholder="Имя пользователя"></div></div><divclass="col-auto my-1"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck2"><labelclass="form-check-label"for="autoSizingCheck2"> Remember me </label></div></div><divclass="col-auto my-1"><buttontype="submit"class="btn btn-primary">Submit</button></div></div></form>И, разумеется – поддерживаются обычные формы контроля.
<form><divclass="form-row align-items-center"><divclass="col-auto my-1"><labelclass="mr-sm-2"for="inlineFormCustomSelect">Preference</label><selectclass="custom-select mr-sm-2"id="inlineFormCustomSelect"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="col-auto my-1"><divclass="custom-control custom-checkbox mr-sm-2"><inputtype="checkbox"class="custom-control-input"id="customControlAutosizing"><labelclass="custom-control-label"for="customControlAutosizing">Remember my preference</label></div></div><divclass="col-auto my-1"><buttontype="submit"class="btn btn-primary">Submit</button></div></div></form>Используйте класс .form-inline для отображения серии лейблов, органов контроля форм и кнопок на одном горизонтальном ряду. Органы контроля форм внутри строчных форм могут слегка отличаться от своего состояния по умолчанию.
- Органы контроля имеют
display: flex, что скрывает пустое пространство в HTML и позволяет вам обеспечить контроль над выравниванием с помощью утилит спейсинга и флексбокса. - Органы контроля и группы ввода имеют
width: auto, который «перебивает» умолчание Bootstrapwidth: 100%. - На зонах видимости от 576рх органы контроля отображаются как строчные элементы для удобства отображения на узких зонах просмотра.
Вам может понадобиться вручную задать ширину и выравнивание каждого элемента контроля форм, используя утилиты спейсинга (как показано ниже).Всегда включайте <label> в каждый элемент контроля, даже если вы хотите спрятать его с помощью класса .sr-only от читателей, которые не используют экранные читалки.
<formclass="form-inline"><labelclass="sr-only"for="inlineFormInputName2">Name</label><inputtype="text"class="form-control mb-2 mr-sm-2"id="inlineFormInputName2"placeholder="Jane Doe"><labelclass="sr-only"for="inlineFormInputGroupUsername2">Имя пользователя</label><divclass="input-group mb-2 mr-sm-2"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername2"placeholder="Имя пользователя"></div><divclass="form-check mb-2 mr-sm-2"><inputclass="form-check-input"type="checkbox"id="inlineFormCheck"><labelclass="form-check-label"for="inlineFormCheck"> Remember me </label></div><buttontype="submit"class="btn btn-primary mb-2">Submit</button></form>Обычные органы контроля и выбора также поддерживаются.
<formclass="form-inline"><labelclass="my-1 mr-2"for="inlineFormCustomSelectPref">Preference</label><selectclass="custom-select my-1 mr-sm-2"id="inlineFormCustomSelectPref"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="custom-control custom-checkbox my-1 mr-sm-2"><inputtype="checkbox"class="custom-control-input"id="customControlInline"><labelclass="custom-control-label"for="customControlInline">Remember my preference</label></div><buttontype="submit"class="btn btn-primary my-1">Submit</button></form>Альтернатива скрытым лейблам
Вспомогательные технологии, такие как экранные читалки, испытают проблемы с вашими формами, если вы не включите в них лейбл для каждой формы ввода. При их использовании вы можете скрыть лейблы, используя класс .sr-only. Есть и другие методы обеспечения читабельности лейбла для вспомогательных технологий, - такие как атрибуты aria-label, aria-labelledby или title. Если ни одного из них нету, вспомогательные технологии могут обратиться к атрибуту placeholder, при его наличии, но его использование как замену других методов придания лейбла нежелательно.
Блочный вспомогательный текст в формах можно создать классом .form-text (.help-block в BS3). Линейный текст можно гибко внедрить с помощью любого строчного элемента HTML и классов типа .text-muted.
Связь вспомогательного текста с органами контроля форм
Вспомогательный текст должен быть явно связан с родственными его элементами контроля форм, это делается атрибутом aria-describedby. Это обеспечит вспомогательным технологиям (таким как экранные читалки) возможность прочитать этот текст, когда юзер обращается к связанному с этим текстом элементу контроля.
Вспомогательный текст, расположенный ниже поля ввода, можно стилизовать классом .form-text, который содержит свойство display: block и добавляет верхний марджин для увеличения отступа от поля ввода выше.
<labelfor="inputPassword5">Password</label><inputtype="password"id="inputPassword5"class="form-control"aria-describedby="passwordHelpBlock"><smallid="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> или другой) с обычным классом.
<formclass="form-inline"><divclass="form-group"><labelfor="inputPassword6">Password</label><inputtype="password"id="inputPassword6"class="form-control mx-sm-3"aria-describedby="passwordHelpInline"><smallid="passwordHelpInline"class="text-muted"> Must be 8-20 characters long. </small></div></form>Добавьте булеан disabled в форму ввода, чтобы сделать ее светлее и предотвратить возможность взаимодействия юзера с данной формой.
<inputclass="form-control"id="disabledInput"type="text"placeholder="Disabled input here..."disabled>Для деактивации элементов контроля внутри <fieldset>, добавьте атрибут disabled.
<form><fieldsetdisabled><divclass="form-group"><labelfor="disabledTextInput">Disabled input</label><inputtype="text"id="disabledTextInput"class="form-control"placeholder="Disabled input"></div><divclass="form-group"><labelfor="disabledSelect">Disabled select menu</label><selectid="disabledSelect"class="form-control"><option>Disabled select</option></select></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="disabledFieldsetCheck"disabled><labelclass="form-check-label"for="disabledFieldsetCheck"> Can't check this </label></div><buttontype="submit"class="btn btn-primary">Submit</button></fieldset></form>Проблемы со ссылками
По умолчанию браузеры будут рассматривать все нативные элементы контроля форм (элементы <input>, <select> и <button>), находящиеся внутри <fieldset disabled>, как деактивированные, что сделает невозможным взаимодействие с данными элементами, как с клавиатуры, так и мышью. Однако если ваша форма содержит элементы <a ... class="btn btn-*">, они всего лишь приобретут стиль pointer-events: none. Как было замечено в секции про деактивированное состояние кнопок (и особенно в подсекции про якоря) – это свойство CSS еще не стандартизовано и не полностью поддерживается в Opera версий 18 и ниже и в Internet Explorer 10, и не предотвратит возможность фокусировки или перехода по этим ссылкам для юзеров клавиатуры. Так что для безопасности используйте обычный JS для дезактивации таких ссылок.
Кроссбраузерность
Хотя Bootstrap применяет эти стили во всех браузерах, Internet Explorer 11 и ниже не полностью поддерживает атрибут disabled в <fieldset>. Используйте JS для дезактивации <fieldset> в этих браузерах.
Получите обратную связь и мощные возможности проверки с помощью валидации форм HTML5 – доступной во всех поддерживаемых браузерах. Выбирайте дефолтную обратную связь валидации от браузера или внедрите стандартные сообщения посредством наших встроенных классов и JavaScript.
Мы настоятельно рекомендуем пользоваться стандартными стилями валидации, поскольку встроенные стили валидации в браузере не взаимодействуют с экранными читалками.
Вот как валидация форм работает с Bootstrap:
- Валидация форм HTML работает на 2 псевдоклассах CSS:
:invalidи:valid, применяемых к элементам<input>,<select>и<textarea>. - Стили этих псевдоклассов применяются к родительскому классу
.was-validated, обычно применяемому к<form>. В ином случае любое другое требуемое поле без значения становится невалидным при загрузке страницы. Таким образом можно выбирать, когда активировать формы (обычно после того, как нажато подтверждение). - Как резервный вариант, классы
.is-invalidи.is-validможно использовать вместо псевдоклассов при серверной валидации. Они не требуют родительского класса.was-validated. - Благодаря ограничениям, заложенным в самой природе CSS, нельзя (по крайней мере, сегодня) применять стили к элементу
<label>, который в DOM расположен перед элементами контроля формы, без использования JavaScript. - Все современные браузеры поддерживают API проверки ограничений – серию методов JavaScript для валидации органов контроля форм.
- В качестве сообщений обратной связи в формах можно использовать таковые по умолчанию браузеров (разные для каждого браузера, и неизменяемые через CSS) или наши стандартные стили сообщений обратной связи с дополнительным HTML и CSS.
- Вы можете создать сообщения валидации методом
setCustomValidityв JavaScript.
Знаю всё это, посмотрите следующие демонстрации использования стилей валидации форм, серверных классы и умолчаний браузеров.
Для стандартных сообщений проверки форм Bootstrap вам потребуется добавить булеан novalidate к <form>. Это деактивирует всплывающие сообщения обратной связи, существующие в браузере по умолчанию, но одновременно сохранит доступ JS к API валидации форм. Попробуйте войти в форму ниже, наш JavaScript выдаст вам сообщение обратной связи.
При попытке входа вы увидите, как стили :invalid и :valid применятся к вашим органам контроля форм.
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationCustom01">Имя</label><inputtype="text"class="form-control"id="validationCustom01"placeholder="Имя"value="Mark"required><divclass="valid-feedback"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationCustom02">Фамилия</label><inputtype="text"class="form-control"id="validationCustom02"placeholder="Фамилия"value="Otto"required><divclass="valid-feedback"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationCustomUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend">@</span></div><inputtype="text"class="form-control"id="validationCustomUsername"placeholder="Имя пользователя"aria-describedby="inputGroupPrepend"required><divclass="invalid-feedback"> Please choose a username. </div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationCustom03">City</label><inputtype="text"class="form-control"id="validationCustom03"placeholder="City"required><divclass="invalid-feedback"> Please provide a valid city. </div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom04">State</label><inputtype="text"class="form-control"id="validationCustom04"placeholder="State"required><divclass="invalid-feedback"> Please provide a valid state. </div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom05">Zip</label><inputtype="text"class="form-control"id="validationCustom05"placeholder="Zip"required><divclass="invalid-feedback"> Please provide a valid zip. </div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required><labelclass="form-check-label"for="invalidCheck"> Agree to terms and conditions </label><divclass="invalid-feedback"> You must agree before submitting. </div></div></div><buttonclass="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 tovarforms=document.getElementsByClassName('needs-validation');// Loop over them and prevent submissionvarvalidation=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><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationDefault01">Имя</label><inputtype="text"class="form-control"id="validationDefault01"placeholder="Имя"value="Mark"required></div><divclass="col-md-4 mb-3"><labelfor="validationDefault02">Фамилия</label><inputtype="text"class="form-control"id="validationDefault02"placeholder="Фамилия"value="Otto"required></div><divclass="col-md-4 mb-3"><labelfor="validationDefaultUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend2">@</span></div><inputtype="text"class="form-control"id="validationDefaultUsername"placeholder="Имя пользователя"aria-describedby="inputGroupPrepend2"required></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationDefault03">City</label><inputtype="text"class="form-control"id="validationDefault03"placeholder="City"required></div><divclass="col-md-3 mb-3"><labelfor="validationDefault04">State</label><inputtype="text"class="form-control"id="validationDefault04"placeholder="State"required></div><divclass="col-md-3 mb-3"><labelfor="validationDefault05">Zip</label><inputtype="text"class="form-control"id="validationDefault05"placeholder="Zip"required></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck2"required><labelclass="form-check-label"for="invalidCheck2"> Agree to terms and conditions </label></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>Мы рекомендуем использовать валидацию со стороны клиента, но если вам понадобится таковая со стороны сервера, вы можете обозначать валидные и невалидные поля форм классами .is-invalid и .is-valid. Заметим, что их можно также использовать с классом .invalid-feedback.
<form><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationServer01">Имя</label><inputtype="text"class="form-control is-valid"id="validationServer01"placeholder="Имя"value="Mark"required><divclass="valid-feedback"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationServer02">Фамилия</label><inputtype="text"class="form-control is-valid"id="validationServer02"placeholder="Фамилия"value="Otto"required><divclass="valid-feedback"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationServerUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend3">@</span></div><inputtype="text"class="form-control is-invalid"id="validationServerUsername"placeholder="Имя пользователя"aria-describedby="inputGroupPrepend3"required><divclass="invalid-feedback"> Please choose a username. </div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationServer03">City</label><inputtype="text"class="form-control is-invalid"id="validationServer03"placeholder="City"required><divclass="invalid-feedback"> Please provide a valid city. </div></div><divclass="col-md-3 mb-3"><labelfor="validationServer04">State</label><inputtype="text"class="form-control is-invalid"id="validationServer04"placeholder="State"required><divclass="invalid-feedback"> Please provide a valid state. </div></div><divclass="col-md-3 mb-3"><labelfor="validationServer05">Zip</label><inputtype="text"class="form-control is-invalid"id="validationServer05"placeholder="Zip"required><divclass="invalid-feedback"> Please provide a valid zip. </div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input is-invalid"type="checkbox"value=""id="invalidCheck3"required><labelclass="form-check-label"for="invalidCheck3"> Agree to terms and conditions </label><divclass="invalid-feedback"> You must agree before submitting. </div></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>Формы из примеров выше показывают нативный текстовый <input>, но стили валидации форм доступны также и для наших обычныъ органов контроля форм.
<formclass="was-validated"><divclass="custom-control custom-checkbox mb-3"><inputtype="checkbox"class="custom-control-input"id="customControlValidation1"required><labelclass="custom-control-label"for="customControlValidation1">Check this custom checkbox</label><divclass="invalid-feedback">Example invalid feedback text</div></div><divclass="custom-control custom-radio"><inputtype="radio"class="custom-control-input"id="customControlValidation2"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation2">Toggle this custom radio</label></div><divclass="custom-control custom-radio mb-3"><inputtype="radio"class="custom-control-input"id="customControlValidation3"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation3">Or toggle this other custom radio</label><divclass="invalid-feedback">More example invalid feedback text</div></div><divclass="form-group"><selectclass="custom-select"required><optionvalue="">Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="invalid-feedback">Example invalid custom select feedback</div></div><divclass="custom-file"><inputtype="file"class="custom-file-input"id="validatedCustomFile"required><labelclass="custom-file-label"for="validatedCustomFile">Choose file...</label><divclass="invalid-feedback">Example invalid custom file feedback</div></div></form>Если разметка ваших форм позволит, вы можете заменить классы .{valid|invalid}-feedback классами .{valid|invalid}-tooltip - для отображения обратной связи валидации, стилизованной под всплывающую подсказку. Для правильного позиционирования всплывающей подсказки удостоверьтесь, что родительский элемент содержит position: relative. В примере ниже наши классы колонок уже имеют этот атрибут, но ваш проект может потребовать иные настройки.
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationTooltip01">Имя</label><inputtype="text"class="form-control"id="validationTooltip01"placeholder="Имя"value="Mark"required><divclass="valid-tooltip"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationTooltip02">Фамилия</label><inputtype="text"class="form-control"id="validationTooltip02"placeholder="Фамилия"value="Otto"required><divclass="valid-tooltip"> Looks good! </div></div><divclass="col-md-4 mb-3"><labelfor="validationTooltipUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="validationTooltipUsernamePrepend">@</span></div><inputtype="text"class="form-control"id="validationTooltipUsername"placeholder="Имя пользователя"aria-describedby="validationTooltipUsernamePrepend"required><divclass="invalid-tooltip"> Please choose a unique and valid username. </div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationTooltip03">City</label><inputtype="text"class="form-control"id="validationTooltip03"placeholder="City"required><divclass="invalid-tooltip"> Please provide a valid city. </div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip04">State</label><inputtype="text"class="form-control"id="validationTooltip04"placeholder="State"required><divclass="invalid-tooltip"> Please provide a valid state. </div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip05">Zip</label><inputtype="text"class="form-control"id="validationTooltip05"placeholder="Zip"required><divclass="invalid-tooltip"> Please provide a valid zip. </div></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>Для более гибкой настройки и кроссбраузерной согласованности используйте наши обычные элементы форм в качестве заменителей таковых, присутствующих в браузерах.
Каждый чекбокс и «радио» обернут в <div> с помощью sibling <span> для создания настраиваемого элемента управления и <label> для сопроводительного текста. Структурно, это тот же подход, что и наша стандартная .form-check.
Мы используем селектор вложенных элементов (~) для всех состояний <input> - как :checked – для правильной стилизации наших обычных индикаторов форм. При сочетании его с классом .custom-control-description можно стилизовать текст каждого элемента, основанного на состоянии <input>.
Мы спрятали дефолтные <input> с помощью opacity и используем класс .custom-control-indicator для создания нового обычного индикатора формы на его обычном месте. К несчастью мы не можем создать таковой, просто используя <input>, т.к. content в CSS не работает с этим элементом.
В «проверенных» состояниях используются встроенные, созданные по стандарту кодирования двоичных данных при помощи только 64 символов ASCII иконки (SVG) из Open Iconic. Это улучшает контроль стилизации и позиционирования в браузерах и девайсах.
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheck1"><labelclass="custom-control-label"for="customCheck1">Check this custom checkbox</label></div>Стандартные чекбоксы могут использовать псевдокласс :indeterminate, заданный вручную через JavaScript (т.к. нет в HTML атрибута для его спецификации).
Если вы используете jQuery, делайте так:
$('.your-checkbox').prop('indeterminate',true)<divclass="custom-control custom-radio"><inputtype="radio"id="customRadio1"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio1">Toggle this custom radio</label></div><divclass="custom-control custom-radio"><inputtype="radio"id="customRadio2"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio2">Or toggle this other custom radio</label></div><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline1"name="customRadioInline1"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline1">Toggle this custom radio</label></div><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline2"name="customRadioInline1"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline2">Or toggle this other custom radio</label></div>Добавьте булеан disabled в <input> и стандартный индикатор и лейбл-описание автоматически соответственно стилизуются.
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheckDisabled"disabled><labelclass="custom-control-label"for="customCheckDisabled">Check this custom checkbox</label></div><divclass="custom-control custom-radio"><inputtype="radio"id="radio3"name="radioDisabled"id="customRadioDisabled"class="custom-control-input"disabled><labelclass="custom-control-label"for="customRadioDisabled">Toggle this custom radio</label></div>Добавьте в стандартные меню <select> класс .custom-select для придания им стандартных стилей.
<selectclass="custom-select"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Вы также можете выбирать из небольших и больших пользовательских выборок, чтобы соответствовать нашим текстовым вводам аналогичного размера.
<selectclass="custom-select custom-select-lg mb-3"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><selectclass="custom-select custom-select-sm"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Также поддерживается множественный атрибут multiple:
<selectclass="custom-select"multiple><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Как и атрибут size size:
<selectclass="custom-select"size="3"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>Загрузка файлов – самая «прожорливая» из всех и требует дополнительного JavaScript для оснащения её функциональностью «Выберите файл» и текста названия выбранного файла.
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFile"><labelclass="custom-file-label"for="customFile">Choose file</label></div>Мы скрываем файл по умолчанию <input> через opacity и вместо этого ставим <label>. Кнопка генерируется и позиционируется с ::after. Наконец, мы объявляем ширину width и высоту height на <input> для правильного интервала для окружающего содержимого.
Псевдокласс :lang() pseudo-class используется для легкого перевода текста “Browse” и “Choose file…» на другие языки. Просто перепишите или добавьте к переменной SCSS $custom-file-text нужный тэг языка и локализованных строк. Строки на английском можно настроить тем же способом. Например, вот как можно добавить перевод на испанский (тэг es):
$custom-file-text:(en:"Browse",es:"Elegir");Здесь псевдокласс lang(es) в используется для загрузки файла на испанском языке:
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFileLang"lang="es"><labelclass="custom-file-label"for="customFileLang">Seleccionar Archivo</label></div>Для правильного перевода Вам потребуется правильно установить язык вашего документа (или суб-дерева). Среди прочих методов, это можно сделать атрибутом языка или заголовком HTTP Content-Language.