Form 表单 #

一组处理表单数据的组件和模型。

获取组件 #

• <Form> 定义一个表单。
• <Form.Group> 表单控件组，用于表单控件布局。
• <Form.Control> 表单控件，定义一个表单字段。
• <Form.ControlLabel> 表单控件对应的标题。
• <Form.HelpText> 表单控件对应帮助信息。
• <Form.ErrorMessage> 表单控件对应的错误提示信息。

布局 #

默认 #

默认为垂直布局

撑满容器 #

fluid 属性可以让表单中的 Input 100% 撑满容器，只在垂直布局中有效。

水平排列布局 #

行内排列布局 #

模态框中布局 #

状态 #

帮助说明 #

<Form.HelpText> 可以在表单组件下面定义一个帮助说明信息，如果设置 tooltip 属性，就会在表单组件显示一个图标，以 <Tooltip> 的方式显示帮助说明信息。

错误消息 #

错误消息提醒可以通过 2 种方式设定：

• <Form.Control> 组件上传递一个 errorMessage 属性设置错误信息，通过 errorPlacement设置错误信息显示的位置 。
• 自定义一个提示信息。

禁用与只读 #

可访问性 #

ARIA 属性 #

• 您应该为每个表单设置 aria-label 或 aria-labelledby 属性，以便屏幕阅读器可以正确地读取表单的目的。
• 通过 <Form.Group> 的 controlId 属性，可以在 <Form.Control> 上设置 id 同时在 <Form.ControlLabel> 上设置 htmlFor。另外会为 <Form.Control> 生成aria-labelledby 和 aria- describeby， 对应到 <Form.ControlLabel> 与 <Form.HelpText> 的 id。

<Form.Group controlId="name">
  <Form.ControlLabel>Username</Form.ControlLabel>
  <Form.Control />
  <Form.HelpText>Username is required</Form.HelpText>
</Form.Group>

生成为:

<div class="rs-form-group" role="group">
  <label id="name-control-label" for="name" class="rs-form-control-label">Username</label>
  <div class="rs-form-control rs-form-control-wrapper">
    <input
      id="name"
      class="rs-input"
      aria-labelledby="name-control-label"
      aria-describedby="name-help-text"
    />
  </div>
  <span id="name-help-text" class="rs-form-help-text">Username is required</span>
</div>

必需的 JavaScript 功能 #

• 在 Form 内点击 type='submit' 的按钮，会自动触发表单的 submit 事件。

Props #

<Form> #

<Form.Control> #

<Form.Group> #

<Form.ControlLabel> #

<Form.HelpText> #

<Form.ErrorMessage> #

Placement #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd';