表单组

<template>
  <div>
    <b-form-group
      id="fieldset-1"
      description="Let us know your name."
      label="Enter your name"
      label-for="input-1"
      valid-feedback="Thank you!"
      :invalid-feedback="invalidFeedback"
      :state="state"
    >
      <b-form-input id="input-1" v-model="name" :state="state" trim></b-form-input>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    computed: {
      state() {
        return this.name.length >= 4
      },
      invalidFeedback() {
        if (this.name.length > 0) {
          return 'Enter at least 4 characters.'
        }
        return 'Please enter something.'
      }
    },
    data() {
      return {
        name: ''
      }
    }
  }
</script>

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

标签

使用属性 label 设置生成的 <legend> 或 <label> 元素的内容，或通过使用命名插槽 label，您可以选择通过设置属性 label-sr-only 在向屏幕阅读器提供标签文本的同时在视觉上隐藏该文本。

<b-form-group> 如果未设置 label-for 属性，将使用 <legend> 渲染 <fieldset>。如果向 label-for 属性提供了输入 ID，则将使用 <label> 渲染 <div>。

如果您向 label-for 属性提供了输入 id 值（id 必须存在于 <b-form-group> 中包含的输入中），将渲染 <label> 元素，而不是 <legend> 元素，并且 for 属性将设置为指定的 id。指定 id 时，不要 在其前面加上 #。仅当 <b-form-group> 组件中有一个表单输入时，才应使用 label-for 属性。使用 <b-form-radio-group>、<b-form-checkbox-group>、<b-form-radio>、<b-form-checkbox> 或 <b-form-file> 组件（或在同一表单组中放置多个输入）时，不要设置 label-for 属性，因为这些输入包含集成的标签元素，并且 <legend> 元素更合适。

您还可以通过 label-class 属性向标签应用其他类，例如响应式填充和文本对齐实用程序类。label-class 属性接受字符串或字符串数组。

水平布局

默认情况下，标签显示在输入元素上方，但您也可以选择在各种标准 Bootstrap 断点处水平渲染（标签在输入的左侧）。

属性 label-cols 和 label-cols-{breakpoint} 允许您指定标签在行中应占据多少列。输入将填充其余行宽。该值必须大于 0 的数字。或者，您可以将属性设置为 true，以使标签和输入各占据渲染行的宽度的一半（如果您有具有奇数列的自定义 Bootstrap，这很方便），或将值设置为 'auto'，以便标签仅占据所需的宽度。

自 BootstrapVue v2.21.0 起，还可以通过 content-cols 和 content-cols-{breakpoint} 道具指定内容在行中应占据多少列。

同时使用 label-cols 和 content-cols 道具时，请确保列总数不超过 12。

有关更多信息，请参阅 布局和网格系统 文档。

<div>
  <div>
    <b-form-group
      id="fieldset-horizontal"
      label-cols-sm="4"
      label-cols-lg="3"
      content-cols-sm
      content-cols-lg="7"
      description="Let us know your name."
      label="Enter your name"
      label-for="input-horizontal"
    >
      <b-form-input id="input-horizontal"></b-form-input>
    </b-form-group>
  </div>
</div>

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

在 BootstrapVue 版本 v2.1.0 中添加了将标签列设置为 'auto' 的功能。

标签大小

您可以通过可选的 label-size 属性控制标签文本大小，使其与表单输入大小匹配。值可以是 'sm' 或 'lg'，分别表示小标签或大标签。大小适用于水平和非水平表单组。

<div>
  <b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Small" label-for="input-sm">
    <b-form-input id="input-sm" size="sm"></b-form-input>
  </b-form-group>

  <b-form-group label-cols="4" label-cols-lg="2" label="Default" label-for="input-default">
    <b-form-input id="input-default"></b-form-input>
  </b-form-group>

  <b-form-group label-cols="4" label-cols-lg="2" label-size="lg" label="Large" label-for="input-lg">
    <b-form-input id="input-lg" size="lg"></b-form-input>
  </b-form-group>
</div>

<!-- b-form-group-label-size.vue -->

标签文本对齐

标签文本也可以通过设置属性 label-text-align 和/或 label-align-{breakpoint} 的相应值来选择性地对齐 left、center 或 right。

如果设置了 label-sr-only 属性，则对齐无效。

说明

始终通过设置 description 属性或使用命名插槽 description 显示的可选描述性文本，该文本始终使用 .text-muted 类显示。描述文本使用 <b-form-text> 表单子组件呈现。

嵌套表单组

随意嵌套 <b-form-group> 组件，以生成高级表单布局和相关表单控件的语义分组

<div>
  <b-card bg-variant="light">
    <b-form-group
      label-cols-lg="3"
      label="Shipping Address"
      label-size="lg"
      label-class="font-weight-bold pt-0"
      class="mb-0"
    >
      <b-form-group
        label="Street:"
        label-for="nested-street"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-street"></b-form-input>
      </b-form-group>

      <b-form-group
        label="City:"
        label-for="nested-city"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-city"></b-form-input>
      </b-form-group>

      <b-form-group
        label="State:"
        label-for="nested-state"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-state"></b-form-input>
      </b-form-group>

      <b-form-group
        label="Country:"
        label-for="nested-country"
        label-cols-sm="3"
        label-align-sm="right"
      >
        <b-form-input id="nested-country"></b-form-input>
      </b-form-group>

      <b-form-group
        label="Ship via:"
        label-cols-sm="3"
        label-align-sm="right"
        class="mb-0"
        v-slot="{ ariaDescribedby }"
      >
        <b-form-radio-group
          class="pt-2"
          :options="['Air', 'Courier', 'Mail']"
          :aria-describedby="ariaDescribedby"
        ></b-form-radio-group>
      </b-form-group>
    </b-form-group>
  </b-card>
</div>

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

禁用表单组

设置 disabled 属性将禁用呈现的 <fieldset>，并且在大多数浏览器上，将禁用字段集中包含的所有输入元素。

当设置 label-for 时，disabled 无效（因为没有呈现 <fieldset> 元素）。

验证状态反馈

Bootstrap 包含大多数表单控件的 valid 和 invalid 状态的验证样式。

一般来说，您需要对特定类型的反馈使用特定状态

• false（表示无效状态）非常适合存在阻止或必填字段的情况。用户必须正确填写此字段才能提交表单。
• true（表示有效状态）适用于在整个表单中进行逐字段验证并希望引导用户完成其余字段的情况。
• null 不显示验证状态（既不是有效也不是无效）

要在 <b-form-group> 上应用其中一个上下文状态图标，请将 state 属性设置为 false（无效）、true（有效）或 null（无验证状态）。

Bootstrap v4 使用 :invalid 或 :valid 输入的同级 CSS 选择器来显示反馈文本。某些表单控件（如复选框、单选按钮和文件输入，或输入组中的输入）被包装在其他标记中，这些标记将不再使反馈文本成为输入的同级，因此不会显示反馈。在这些情况下，你需要在 <b-form-group> 以及 输入上设置有效性 state。

如果父 <b-form> 组件没有设置 novalidate 属性（或设置为 false），并且设置了 validated 属性（并且输入未通过或未通过本机浏览器验证约束，如 required），则将显示反馈。有关验证方法的详细信息，请参阅 Bootstrap v4 的 表单组件 文档。

设置上下文 invalid 状态时，你应始终通过 invalid-feedback 属性（或插槽）提供内容，以帮助使用辅助技术的用户。

无效反馈

通过设置属性 invalid-feedback 或使用命名插槽 invalid-feedback，显示可选的无效状态反馈文本以提供文本状态反馈（支持 html）。

使用 <b-form-invalid-feedback> 表单子组件呈现无效反馈。

有效反馈

通过设置属性 valid-feedback 或使用命名插槽 valid-feedback，显示可选的有效状态反馈文本以提供文本状态反馈（支持 html）。

使用 <b-form-valid-feedback> 表单子组件呈现有效反馈。

反馈样式

默认情况下，当可见时，反馈（有效或无效）将显示为文本块。你可以通过将属性 tooltip 设置为 true，将反馈更改为在可见时显示为静态工具提示。

反馈限制

注意：在 <b-input-group>、<b-form-file>、<b-form-radio-group>、<b-form-radio>、<b-form-checkbox-group> 或 <b-form-checkbox> 中使用 <b-form-group> 时，仅在 input 上设置无效（或有效）state 不会触发无效（或有效）反馈显示（由于新的 Bootstrap v4 验证 CSS 的限制）。要解决此问题，还必须在 <b-form-group> 上设置无效/有效 state。使用上述表单控件之一时，本机浏览器验证不会触发无效反馈显示。

辅助功能

默认情况下，当未提供 label-for 值时，<b-form-group> 会在 HTML <fieldset> 元素中呈现输入控件，并将标签内容置于该字段集的 <legend> 元素中。根据此标记的特性，图例内容会自动与包含的输入控件关联。

强烈建议在 <b-form-group> 中只有一个输入时，为输入元素提供唯一的 id 属性，并将 label-for 属性设置为该 ID。

当多个表单控件置于 <b-form-group> 中（即一系列单选按钮或复选框输入，或一系列相关输入）时，不要设置 label-for 属性，因为一个标签只能与一个输入关联。最好使用默认呈现的标记，该标记会生成 <fieldset> + <legend>，这将描述输入组。

当在 <b-form-group> 中放置多个表单控件（并且不嵌套 <b-form-group> 组件）时，建议为每个控件提供自己关联的 <label>（可以使用 .sr-only 类目视隐藏）并将标签 for 属性设置为关联的输入控件的 id。或者，可以为每个输入控件设置 aria-label 属性，而不是使用 <label>。对于 <b-form-radio> 和 <b-form-checkbox>（或组版本），无需设置单独的标签，因为这些类型输入的呈现标记已经包含 <label> 元素。

当 <b-form-group> 具有 label-for prop 设置时，aria-describedby 属性将自动分配给输入。当表单组具有多个表单控件时，请务必使用 default 插槽中可选范围的 ariaDescribedby prop 值，将该属性设置为每个控件。