使用美观的组件更快地交付
NextUI Pro

表单

表单是一组输入框，允许用户将数据提交到服务器，并支持提供字段验证错误。

Storybook@nextui-org/form源代码样式来源

安装

上述命令仅用于单独安装。如果已全局安装 @nextui-org/react ，则可以跳过此步骤。

导入

用法

结构

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

事件

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

验证

Form 支持具有可自定义 UI、自定义验证函数和服务器端验证的原生 HTML 约束验证。服务器端验证错误可以通过 validationErrors 属性以对象形式提供，该对象将字段名称映射到错误消息，当用户修改字段时，错误消息将被清除。

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

验证行为

Form 验证默认使用 ARIA 属性，但可以通过设置 validationBehavior="native" 切换到原生 HTML 验证。ARIA 验证会实时显示错误，而不会阻止提交。这可以在表单或字段级别设置。

无障碍

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

API

表单属性

属性类型默认值
children
ReactNode
validationBehavior
'native' | 'aria'
"aria"
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
抽屉图片