Форма

Компонент формы BootstrapVue и вспомогательные компоненты, которые дополнительно поддерживают встроенные стили формы и состояния проверки. Объедините их с другими компонентами элементов управления формами BootstrapVue, чтобы получить простой настраиваемый и отзывчивый макет с единообразным внешним видом.

Введение в формы и элементы управления

Обязательно используйте соответствующий type для всех входных данных (например, email для адреса электронной почты или number для числовой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т. д.

Вот быстрый пример, демонстрирующий стили формы BootstrapVue. Продолжайте читать, чтобы узнать о поддерживаемых компонентах, макете формы и многом другом.

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Food:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="form.checked"
          id="checkboxes-4"
          :aria-describedby="ariaDescribedby"
        >
          <b-form-checkbox value="me">Проверить меня</b-form-checkbox>
          <b-form-checkbox value="that">Проверь это</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>

      <b-button type="submit" variant="primary">Отправить</b-button>
      <b-button type="reset" variant="danger">Сбросить</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
          food: null,
          checked: []
        },
        foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
        show: true
      }
    },
    methods: {
      onSubmit(event) {
        event.preventDefault()
        alert(JSON.stringify(this.form))
      },
      onReset(event) {
        event.preventDefault()
        // Сбросить значения нашей формы
        this.form.email = ''
        this.form.name = ''
        this.form.food = null
        this.form.checked = []
        // Уловка для сброса/очистки состояния проверки формы в собственном браузере
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
  }
</script>

<!-- b-form.vue -->

Инлайновая форма

Используйте свойство inline в <b-form>, чтобы отобразить серию меток, элементов управления формы и кнопок в одной горизонтальной строке. Элементы управления формами внутри встроенных форм незначительно отличаются от состояний по умолчанию.

  • Элементы управления - это display: flex, сворачивающие любое пустое пространство HTML и позволяющие вам обеспечить контроль выравнивания с помощью утилит spacing и flexbox.
  • Элементы управления и группы ввода получают width: auto, чтобы переопределить ширину Bootstrap по умолчанию: 100%.
  • Элементы управления отображаются встроенными только в окнах просмотра шириной не менее 576 пикселей, чтобы учесть узкие окна просмотра на мобильных устройствах.

Возможно, вам придется вручную задать ширину и выравнивание отдельных элементов управления формой с помощью утилит интервалов (как показано ниже). Наконец, не забудьте всегда включать <label> в каждый элемент управления формы, даже если вам нужно скрыть его от посетителей, не читающих с экрана, с помощью класса .sr-only.

<div>
  <b-form inline>
    <label class="sr-only" for="inline-form-input-name">Имя</label>
    <b-form-input
      id="inline-form-input-name"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="Jane Doe"
    ></b-form-input>

    <label class="sr-only" for="inline-form-input-username">Пользователь</label>
    <b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
      <b-form-input id="inline-form-input-username" placeholder="Пользователь"></b-form-input>
    </b-input-group>

    <b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Запомнить меня</b-form-checkbox>

    <b-button variant="primary">Сохранить</b-button>
  </b-form>
</div>

<!-- b-form-inline.vue -->

Также поддерживаются настраиваемые элементы управления и выбор формы.

<div>
  <b-form inline>
    <label class="mr-sm-2" for="inline-form-custom-select-pref">Предпочтение</label>
    <b-form-select
      id="inline-form-custom-select-pref"
      class="mb-2 mr-sm-2 mb-sm-0"
      :options="[{ text: 'Выберите...', value: null }, 'One', 'Two', 'Three']"
      :value="null"
    ></b-form-select>

    <b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Запомнить мои предпочтения</b-form-checkbox>

    <b-button variant="primary">Сохранить</b-button>
  </b-form>
</div>

<!-- b-form-inline-custom.vue -->

Примечание: <b-form-group> не поддерживается в inline формах из-за конфликтов макета.

Альтернативы скрытым ярлыкам

Вспомогательные технологии, такие как программы чтения с экрана, будут иметь проблемы с вашими формами, если вы не добавите метку для каждого ввода. Для этих встроенных форм вы можете скрыть метки с помощью класса .sr-only. Существуют и другие альтернативные методы предоставления метки для вспомогательных технологий, такие как атрибуты aria-label, aria-labelledby или title. Если ни один из них не присутствует, вспомогательные технологии могут прибегать к использованию атрибута placeholder, если он присутствует, но учтите, что использование placeholder в качестве замены для других методов маркировки не рекомендуется.

Связанные элементы управления формой и компоненты макета

Смотрите также:

Компоненты помощника формы

Следующие вспомогательные компоненты доступны с плагином Form:

  • <b-form-text> Блоки текста справки для входов
  • <b-form-invalid-feedback> Недействительные текстовые блоки обратной связи для входных invalid состояний
  • <b-form-valid-feedback> Действительные текстовые блоки обратной связи для входных состояний valid
  • <b-form-datalist> Простое создание <datalist> для использования с <b-form-input> или обычным <input>

Помощник по тексту формы

Отобразите блок текста справки под полем ввода с помощью вспомогательного компонента <b-form-text>. Текст отображается с приглушенным цветом и немного меньшим размером шрифта.

Совет: Текст справки должен быть явно связан с элементом управления формы, к которому он относится, с помощью атрибута aria-describedby. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут озвучивать этот текст справки, когда пользователь фокусируется или входит в элемент управления.

<div>
  <b-form @submit.stop.prevent>
    <label for="text-password">Пароль</label>
    <b-form-input type="password" id="text-password" aria-describedby="password-help-block"></b-form-input>
    <b-form-text id="password-help-block">
      Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
    </b-form-text>
   </b-form>
</div>

<!-- b-form-help-text.vue -->

Помощники по обратной связи

Вспомогательные компоненты <b-form-valid-feedback> и <b-form-invalid-feedback> будут отображать обратную связь (основанную на состоянии ввода) в виде блока цветного текста. Они полагаются на то, что их помещают после ввода (родственника) и будут отображаться на основе собственного состояния проверки ввода в браузере. Чтобы заставить их показываться, установите для свойства force-show значение true или привяжите элементы управления state к свойству state помощника обратной связи, или установите класс was-validated для родительского элемента (например, форма). Дополнительные сведения смотрите в разделе Валидация ниже.

Используйте необязательную логическую опцию tooltip, чтобы изменить отображение с блочного на статический стиль всплывающей подсказки. Отзыв обычно отображается под элементом управления формы. Когда этот режим включен, важно, чтобы родительский контейнер имел стиль position: relative: css (или класс position-relative). Обратите внимание, что обратная связь в стиле всплывающей подсказки может, поскольку ее расположение статично, скрывать другие поля ввода, метки и т. д.

Примечание: Некоторые элементы управления формой, например <b-form-radio>, <b-form-checkbox> и <b-form-file> имеют элементы оболочки, которые предотвращают автоматическое отображение текста обратной связи (поскольку компонент обратной связи не является прямым родственником ввода элемента управления формой). Используйте свойство state компонента обратной связи (привязанное к состоянию элемента управления формой) или свойство force-show для отображения обратной связи.

<template>
  <div>
    <b-form  @submit.stop.prevent>
      <label for="feedback-user">Идентификатор пользователя</label>
      <b-form-input v-model="userId" :state="validation" id="feedback-user"></b-form-input>
      <b-form-invalid-feedback :state="validation">
        Ваш идентификатор пользователя должен состоять из 5–12 символов.
      </b-form-invalid-feedback>
      <b-form-valid-feedback :state="validation">
        Выглядит неплохо.
      </b-form-valid-feedback>
     </b-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userId: ''
      }
    },
    computed: {
      validation() {
        return this.userId.length > 4 && this.userId.length < 13
      }
    }
  }
</script>

<!-- b-form-feedback-example.vue -->

Помощник даталиста

Для браузеров, поддерживающих <datalist> элементы, вспомогательный компонент <b-form-datalist> позволит вам быстро создать элементы <datalist> и дочерние элементы <option> через массив, переданный в свойство options.

Вы также можете вручную указать элементы <option> внутри <b-form-datalist>. Они будут отображаться под любыми элементами <option>, созданными из свойства options.

<template>
  <div>
    <label for="input-with-list">Ввод с помощью списка данных</label>
    <b-form-input list="input-list" id="input-with-list"></b-form-input>
    <b-form-datalist id="input-list" :options="options"></b-form-datalist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Apple', 'Banana', 'Grape', 'Kiwi', 'Orange']
    }
  }
}
</script>

<!-- b-form-datalist-example.vue -->

<b-form-datalist> также доступен через более короткий псевдоним <b-datalist>.

Смотрите также:

  • <b-form-input> datalist для использования списка данных.
  • <b-form-select> options prop документация для получения подробной информации о форматах и вспомогательных свойствах, связанных с options.

Валидация

Отключите встроенную проверку HTML5 в браузере, установив для свойства novalidate значение true в <b-form>.

Установите для свойства validated на <b-form> значение true, чтобы добавить класс Bootstrap v4 .was-validated в форму для запуска состояний проверки.

Все элементы управления формой поддерживают свойство state, которое можно использовать для установки элемента управления формы в одно из трех контекстных состояний:

  • false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
  • true (обозначает действительное состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите побудить пользователя пройти через остальные поля.
  • null Не отображает состояние проверки (ни действительное, ни недействительное)

Смотрите Документацию по проверке формы Bootstrap v4 для получения подробной информации о новых состояниях проверки Bootstrap v4.

Механизмы валидации

Использование 3х сторонних проверочных библиотек на основе Vue с BootstrapVue:

Дополнительные ресурсы:

Справочник по компонентам

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
inline
BooleanfalseЕсли задано, форма будет во встроенном режиме, в котором метки, элементы управления формы и кнопки будут отображаться в одной горизонтальной строке
novalidate
BooleanfalseЕсли задано, отключает встроенную в браузере проверку HTML5 для элементов управления в форме
validated
BooleanfalseЕсли установлено, добавляет в форму класс Bootstrap 'was-validated', вызывая собственные состояния проверки браузера

Слоты

Наименование
Описание
default Контент для размещения в форме

События

Событие
Аргументы
Описание
submit
  1. event - Собственное событие отправки
Генерируется при отправке формы

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
inline
BooleanfalseЕсли установлено, отображает текст справки как встроенный элемент, а не как блочный элемент
tag
String'small'Указывает тег HTML для отображения вместо тега по умолчанию
text-variant
String'muted'Применяет к тексту один из вариантов цвета темы Bootstrap

Слоты

Наименование
Описание
default Контент для размещения в тексте формы

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
aria-live
StringЕсли визуализируемый элемент является областью `aria-live` (для пользователей программ чтения с экрана), установите значение 'polite' или 'assertive'
force-show
BooleanfalseПоказывает текст обратной связи, независимо от значения свойства 'state'
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
role
StringУстанавливает определенное значение для атрибута ARIA `role`
state
BooleannullКогда явно 'false', заставляет показывать обратную связь
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
tooltip
BooleanfalseОтображает текст обратной связи в элементарном стиле всплывающей подсказки

Слоты

Наименование
Описание
default Контент для размещения в форме недействительный отзыв

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
aria-live
StringЕсли визуализируемый элемент является областью `aria-live` (для пользователей программ чтения с экрана), установите значение 'polite' или 'assertive'
force-show
BooleanfalseПоказывает текст обратной связи, независимо от значения свойства 'state'
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
role
StringУстанавливает определенное значение для атрибута ARIA `role`
state
BooleannullКогда явно 'true', заставляет показывать обратную связь
tag
String'div'Указывает тег HTML для отображения вместо тега по умолчанию
tooltip
BooleanfalseОтображает текст обратной связи в элементарном стиле всплывающей подсказки

Слоты

Наименование
Описание
default Контент для размещения в форме действительного элемента обратной связи

<b-form-datalist>

Псевдонимы компонентов

<b-form-datalist> также может использоваться через следующие псевдонимы:

  • <b-datalist>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
disabled-field
String'disabled'Имя поля в массиве `options`, которое следует использовать для отключенного состояния
html-field
Использовать с осторожностью
String'html'Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
id
Обязательный
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
options
Array или Object[]Массив элементов для визуализации в компоненте
text-field
String'text'Имя поля в массиве `options`, которое следует использовать для текстовой метки
value-field
String'value'Имя поля в массиве `options`, которое следует использовать для значения

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование
Описание
default Контент для размещения в списке из даталиста

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-form>BFormbootstrap-vue
<b-form-text>BFormTextbootstrap-vue
<b-form-invalid-feedback>BFormInvalidFeedbackbootstrap-vue
<b-form-valid-feedback>BFormValidFeedbackbootstrap-vue
<b-form-datalist>BFormDatalistbootstrap-vue

Пример:

import { BForm } from 'bootstrap-vue'
Vue.component('b-form', BForm)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
FormPluginbootstrap-vue

Пример:

import { FormPlugin } from 'bootstrap-vue'
Vue.use(FormPlugin)