表单

表单是一组输入元素，允许用户向服务器提交数据，支持提供字段验证错误信息。

Storybook@heroui/formSourceStyles source

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

结构剖析

Form 是一个用于容纳输入元素和提交/重置按钮的容器，支持显示验证信息。当使用 aria-label 或 aria-labelledby 标注时，它将为辅助技术成为一个可导航的 表单地标（Form Landmark）。

事件

当用户通过按下 Enter 键或点击提交按钮提交表单时，将触发 onSubmit 事件。当用户按下重置按钮时，将触发 onReset 事件。

验证

Form 支持具有可定制 UI 的原生 HTML 约束验证、自定义验证函数和服务器端验证。可以通过 validationErrors 属性提供一个将字段名映射到错误信息的对象来提供服务器端验证错误，这些错误会在用户修改字段时被清除。

请参阅 表单指南 以了解更多关于表单验证的信息，包括客户端验证以及与其他框架和库的集成。

验证行为

Form 验证默认使用原生验证行为，但可以通过设置 validationBehavior="aria" 切换到 ARIA 验证。ARIA 验证会实时显示错误，但不阻止提交。此举可以在表单级别或字段级别设置。 要在应用级别设置默认行为，您可以使用 HeroUI 提供者（Provider） 为整个应用更改表单的默认设置。

可访问性

  • 使用原生 HTML <form> 元素构建，支持 ARIA 标注以创建 表单地标（Form Landmark）。
  • 完全支持浏览器功能，如表单自动填充。
  • 支持具有可定制 UI 的原生 HTML 约束验证、自定义验证函数、实时验证和服务器端验证错误。

API

Form 属性

PropTypeDefault
children
ReactNode
validationBehavior
'native' | 'aria'
"native"
validationErrors
Record<string, string | string[]>
action
string | FormHTMLAttributes<HTMLFormElement>['action']
encType
'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
method
'get' | 'post' | 'dialog'
target
'_blank' | '_self' | '_parent' | '_top'
autoComplete
'off' | 'on'
autoCapitalize
'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
className
string
style
CSSProperties
Drawer 抽屉Image 图片