表单

表单控件样式、布局选项和自定义组件的示例和使用指南，用于创建各种表单。

概述

<FormControl> 组件使用 Bootstrap 样式渲染表单控件。<FormGroup> 组件使用适当的间距包装表单控件，并支持标签、帮助文本和验证状态。为了确保可访问性，请在 <FormGroup> 上设置 controlId，并使用 <FormLabel> 作为标签。

结果

正在加载...

实时编辑器

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function BasicExample() { return ( <Form> <Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text> </Form.Group> <Form.Group className="mb-3" controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Form.Group className="mb-3" controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit"> Submit </Button> </Form> ); } export default BasicExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function BasicExample() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
}

export default BasicExample;

<FormControl> 组件直接渲染 <input> 或其他指定的组件。如果您需要访问不受控的 <FormControl> 的值，请像对待不受控的输入一样，将 ref 附加到它，然后调用 ReactDOM.findDOMNode(ref) 来获取 DOM 节点。然后，您可以像对待任何其他不受控的输入一样与该节点进行交互。

如果您的应用程序包含大量表单组，我们建议构建一个更高层的组件来封装一个完整的字段组，该组件渲染标签、控件以及任何其他必要的组件。我们没有提供开箱即用的解决方案，因为这些字段组的构成对于单个应用程序来说过于特定，无法提供一个通用的解决方案。

禁用表单

在输入框上添加 disabled 布尔属性以阻止用户交互并使其显示为浅色。

结果

正在加载...

实时编辑器

import Form from 'react-bootstrap/Form'; function FormDisabledInputExample() { return ( <> <Form.Group className="mb-3"> <Form.Label>Disabled input</Form.Label> <Form.Control placeholder="Disabled input" disabled /> </Form.Group> <Form.Group className="mb-3"> <Form.Label>Disabled select menu</Form.Label> <Form.Select disabled> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" label="Can't check this" disabled /> </Form.Group> </> ); } export default FormDisabledInputExample;

import Form from 'react-bootstrap/Form';

function FormDisabledInputExample() {
  return (
    <>
      <Form.Group className="mb-3">
        <Form.Label>Disabled input</Form.Label>
        <Form.Control placeholder="Disabled input" disabled />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Disabled select menu</Form.Label>
        <Form.Select disabled>
          <option>Disabled select</option>
        </Form.Select>
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Check type="checkbox" label="Can't check this" disabled />
      </Form.Group>
    </>
  );
}

export default FormDisabledInputExample;

将 disabled 属性添加到 <fieldset> 中以禁用其中的所有控件。

结果

正在加载...

实时编辑器

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; function FormDisabledExample() { return ( <Form> <fieldset disabled> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label> <Form.Control id="disabledTextInput" placeholder="Disabled input" /> </Form.Group> <Form.Group className="mb-3"> <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label> <Form.Select id="disabledSelect"> <option>Disabled select</option> </Form.Select> </Form.Group> <Form.Group className="mb-3"> <Form.Check type="checkbox" id="disabledFieldsetCheck" label="Can't check this" /> </Form.Group> <Button type="submit">Submit</Button> </fieldset> </Form> ); } export default FormDisabledExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function FormDisabledExample() {
  return (
    <Form>
      <fieldset disabled>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
          <Form.Control id="disabledTextInput" placeholder="Disabled input" />
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
          <Form.Select id="disabledSelect">
            <option>Disabled select</option>
          </Form.Select>
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Check
            type="checkbox"
            id="disabledFieldsetCheck"
            label="Can't check this"
          />
        </Form.Group>
        <Button type="submit">Submit</Button>
      </fieldset>
    </Form>
  );
}

export default FormDisabledExample;

浏览器将 <fieldset disabled> 内的所有原生表单控件（<input>、<select> 和 <button> 元素）视为禁用，阻止键盘和鼠标对其进行交互。

但是，如果您的表单还包含自定义按钮式元素，例如 <a ... class="btn btn-*">，这些元素只会获得 pointer-events: none 的样式，这意味着它们仍然可以使用键盘进行聚焦和操作。在这种情况下，您必须手动修改这些控件，添加 tabindex="-1" 以防止它们获得焦点，并添加 aria-disabled="disabled" 以向辅助技术发出其状态信号。

API

表单

表单标签