表单文本

创建块级或内联级表单文本。

概述

表单中的块级帮助文本可以使用 <Form.Text> 创建。内联帮助文本可以使用任何内联 HTML 元素和实用程序类（如 .text-muted）灵活地实现。

将帮助文本与表单控件关联

帮助文本应使用 aria-describedby 属性明确地与它所关联的表单控件相关联。这将确保辅助技术（如屏幕阅读器）在用户聚焦或输入控件时宣布此帮助文本。

输入下方表单文本可以使用 <Form.Text> 样式化。此组件包含 display: block 并添加一些顶部边距，以便轻松与上方的输入保持间距。

结果

正在加载...

实时编辑器

import Form from 'react-bootstrap/Form';

function FormTextExample() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control
        type="password"
        id="inputPassword5"
        aria-describedby="passwordHelpBlock"
      />
      <Form.Text id="passwordHelpBlock" muted>
        Your password must be 8-20 characters long, contain letters and numbers,
        and must not contain spaces, special characters, or emoji.
      </Form.Text>
    </>
  );
}

export default FormTextExample;

import Form from 'react-bootstrap/Form';

function FormTextExample() {
  return (
    <>
      <Form.Label htmlFor="inputPassword5">Password</Form.Label>
      <Form.Control
        type="password"
        id="inputPassword5"
        aria-describedby="passwordHelpBlock"
      />
      <Form.Text id="passwordHelpBlock" muted>
        Your password must be 8-20 characters long, contain letters and numbers,
        and must not contain spaces, special characters, or emoji.
      </Form.Text>
    </>
  );
}

export default FormTextExample;

概述​

API​

FormText​

概述

API

FormText