Управление формой
Придание элементам управления текстовых формы, таким как <input> и <textarea> обновленных пользовательских стилей, размеров, состояний фокуса и многого другого.
Пример
Элементы управления формы оформлены с использованием сочетания переменных Sass и CSS, что позволяет им адаптироваться к цветовым режимам и поддерживать любой метод настройки.
<divclass="mb-3"><labelfor="exampleFormControlInput1"class="form-label">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="mb-3"><labelfor="exampleFormControlTextarea1"class="form-label">Пример текстового поля</label><textareaclass="form-control"id="exampleFormControlTextarea1"rows="3"></textarea></div>Размеры
Установите высоту с помощью таких классов, как .form-control-lg и .form-control-sm.
<inputclass="form-control form-control-lg"type="text"placeholder=".form-control-lg"aria-label="Пример .form-control-lg"><inputclass="form-control"type="text"placeholder="Поле ввода по умолчанию"aria-label="пример ввода по умолчанию"><inputclass="form-control form-control-sm"type="text"placeholder=".form-control-sm"aria-label="Пример .form-control-sm">Текст формы
Текст формы блочного или встроенного уровня может быть создан с помощью .form-text.
aria-describedby. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст формы, когда пользователь фокусируется или вводит элемент управления.
Текст формы ниже полей ввода может быть оформлен с помощью .form-text. Если будет использоваться элемент блочного уровня, добавляется верхнее поле для легкого отступа от входных данных выше.
<labelfor="inputPassword5"class="form-label">Пароль</label><inputtype="password"id="inputPassword5"class="form-control"aria-describedby="passwordHelpBlock"><divid="passwordHelpBlock"class="form-text"> Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
</div>Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то <span>, <small> или что-то еще) только с классом .form-text.
<divclass="row g-3 align-items-center"><divclass="col-auto"><labelfor="inputPassword6"class="col-form-label">Пароль</label></div><divclass="col-auto"><inputtype="password"id="inputPassword6"class="form-control"aria-describedby="passwordHelpInline"></div><divclass="col-auto"><spanid="passwordHelpInline"class="form-text"> Должно быть 8-20 символов.
</span></div></div>Отключенная
Добавьте логический атрибут disabled для ввода, чтобы придать ему серый вид, удалить события указателя и предотвратить фокусировку.
<inputclass="form-control"type="text"placeholder="Отключенный ввод"aria-label="Пример отключенного входа"disabled><inputclass="form-control"type="text"value="Отключенный ввод, только для чтения"aria-label="Пример отключенного входа"disabledreadonly>Только для чтения
Добавьте логический атрибут readonly для ввода, чтобы предотвратить изменение значения ввода. Вводы readonly по-прежнему могут быть сфокусированы и выбраны, а вводы disabled - нет.
<inputclass="form-control"type="text"value="Ввод здесь только для чтения..."aria-label="привер ввода только для чтения"readonly>Простой текст только для чтения
Если вы хотите, чтобы элементы <input readonly> в вашей форме были оформлены как обычный текст, замените .form-control на .form-control-plaintext, чтобы удалить стиль поля формы по умолчанию и сохранить правильное поле margin и padding.
<divclass="mb-3 row"><labelfor="staticEmail"class="col-sm-2 col-form-label">Эл. адрес</label><divclass="col-sm-10"><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail"value="email@example.com"></div></div><divclass="mb-3 row"><labelfor="inputPassword"class="col-sm-2 col-form-label">Пароль</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword"></div></div><formclass="row g-3"><divclass="col-auto"><labelfor="staticEmail2"class="visually-hidden">Эл. адрес</label><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail2"value="email@example.com"></div><divclass="col-auto"><labelfor="inputPassword2"class="visually-hidden">Пароль</label><inputtype="password"class="form-control"id="inputPassword2"placeholder="Password"></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary mb-3">Подтвердить личность</button></div></form>Выбор файла
<divclass="mb-3"><labelfor="formFile"class="form-label">Пример ввода файла по умолчанию</label><inputclass="form-control"type="file"id="formFile"></div><divclass="mb-3"><labelfor="formFileMultiple"class="form-label">Пример ввода нескольких файлов</label><inputclass="form-control"type="file"id="formFileMultiple"multiple></div><divclass="mb-3"><labelfor="formFileDisabled"class="form-label">Пример отключенного ввода файла</label><inputclass="form-control"type="file"id="formFileDisabled"disabled></div><divclass="mb-3"><labelfor="formFileSm"class="form-label">Пример небольшого ввода файла</label><inputclass="form-control form-control-sm"id="formFileSm"type="file"></div><div><labelfor="formFileLg"class="form-label">Пример большого ввода файла</label><inputclass="form-control form-control-lg"id="formFileLg"type="file"></div>Палитра цветов
Установите type="color" и добавьте .form-control-color к <input>. Мы используем класс модификатора, чтобы установить фиксированную высоту height и переопределить некоторые несоответствия между браузерами.
<labelfor="exampleColorInput"class="form-label">Палитра цветов</label><inputtype="color"class="form-control form-control-color"id="exampleColorInput"value="#563d7c"title="Выбери свой цвет">Списки данных
Списки данных позволяют Вам создать группу <option>, к которой можно получить доступ (и автозаполнение) из <input>. Они похожи на элементы <select>, но имеют больше ограничений и различий в стиле меню. Хотя большинство браузеров и операционных систем включают некоторую поддержку элементов <datalist> , их стиль в лучшем случае противоречивый.
Подробнее о поддержке элементов списка данных.
<labelfor="exampleDataList"class="form-label">Пример списка данных</label><inputclass="form-control"list="datalistOptions"id="exampleDataList"placeholder="Введите для поиска..."><datalistid="datalistOptions"><optionvalue="Москва"><optionvalue="Санкт-Петербург"><optionvalue="Брянск"><optionvalue="Екатеринбург"><optionvalue="Волгоград"></datalist>CSS
Sass переменные
$input-* используется в большинстве наших элементов управления формой (но не в кнопках).
$input-padding-y:$input-btn-padding-y;$input-padding-x:$input-btn-padding-x;$input-font-family:$input-btn-font-family;$input-font-size:$input-btn-font-size;$input-font-weight:$font-weight-base;$input-line-height:$input-btn-line-height;$input-padding-y-sm:$input-btn-padding-y-sm;$input-padding-x-sm:$input-btn-padding-x-sm;$input-font-size-sm:$input-btn-font-size-sm;$input-padding-y-lg:$input-btn-padding-y-lg;$input-padding-x-lg:$input-btn-padding-x-lg;$input-font-size-lg:$input-btn-font-size-lg;$input-bg:var(--#{$prefix}body-bg);$input-disabled-color:null;$input-disabled-bg:var(--#{$prefix}secondary-bg);$input-disabled-border-color:null;$input-color:var(--#{$prefix}body-color);$input-border-color:var(--#{$prefix}border-color);$input-border-width:$input-btn-border-width;$input-box-shadow:var(--#{$prefix}box-shadow-inset);$input-border-radius:var(--#{$prefix}border-radius);$input-border-radius-sm:var(--#{$prefix}border-radius-sm);$input-border-radius-lg:var(--#{$prefix}border-radius-lg);$input-focus-bg:$input-bg;$input-focus-border-color:tint-color($component-active-bg,50%);$input-focus-color:$input-color;$input-focus-width:$input-btn-focus-width;$input-focus-box-shadow:$input-btn-focus-box-shadow;$input-placeholder-color:var(--#{$prefix}secondary-color);$input-plaintext-color:var(--#{$prefix}body-color);$input-height-border:calc(#{$input-border-width}*2);// stylelint-disable-line function-disallowed-list
$input-height-inner:add($input-line-height*1em,$input-padding-y*2);$input-height-inner-half:add($input-line-height*.5em,$input-padding-y);$input-height-inner-quarter:add($input-line-height*.25em,$input-padding-y*.5);$input-height:add($input-line-height*1em,add($input-padding-y*2,$input-height-border,false));$input-height-sm:add($input-line-height*1em,add($input-padding-y-sm*2,$input-height-border,false));$input-height-lg:add($input-line-height*1em,add($input-padding-y-lg*2,$input-height-border,false));$input-transition:border-color.15sease-in-out,box-shadow.15sease-in-out;$form-color-width:3rem;$form-label-* и $form-text-* предназначены для наших компонентов <label> и .form-text.
$form-label-margin-bottom:.5rem;$form-label-font-size:null;$form-label-font-style:null;$form-label-font-weight:null;$form-label-color:null;$form-text-margin-top:.25rem;$form-text-font-size:$small-font-size;$form-text-font-style:null;$form-text-font-weight:null;$form-text-color:var(--#{$prefix}secondary-color);$form-file-* предназначены для ввода файла.
$form-file-button-color:$input-color;$form-file-button-bg:var(--#{$prefix}tertiary-bg);$form-file-button-hover-bg:var(--#{$prefix}secondary-bg);