#表单
把相关字段、校验摘要和提交操作组织为一个可恢复的任务，并保留浏览器原生提交语义。
安装Terminal
npm install @a3s-lab/ui@0.4.1<form class="form" novalidate>
<div data-form-summary role="alert" hidden></div>
<div class="field">
<label for="workspace-name">工作区名称</label>
<input id="workspace-name" class="input" name="workspaceName" required />
<p data-form-error role="alert" hidden>请输入工作区名称。</p>
</div>
<footer>
<button class="btn" type="submit">保存工作区</button>
<button class="btn" type="reset" data-variant="outline">重置</button>
</footer>
</form>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";<form class="form" data-form-readonly-demo="zh" data-readonly data-state="read-only">
<div class="field" data-readonly="true">
<label for="form-readonly-name-zh">已发布工作区</label>
<input
id="form-readonly-name-zh"
class="input"
name="publishedName"
type="text"
value="运行时核心"
readonly
aria-describedby="form-readonly-name-help-zh"
/>
<p id="form-readonly-name-help-zh" data-field-description>
只有发布所有者可以重命名已发布的工作区。
</p>
</div>
<div class="field" data-readonly="true">
<label for="form-readonly-owner-zh">发布所有者</label>
<input
id="form-readonly-owner-zh"
class="input"
name="publishedOwner"
type="email"
value="release-owner@example.com"
readonly
aria-describedby="form-readonly-owner-help-zh"
/>
<p id="form-readonly-owner-help-zh" data-field-description>
当前值仍会参与提交，但不可编辑。
</p>
</div>
<footer>
<button class="btn" type="submit" disabled>保存工作区</button>
</footer>
</form>#用法
导入 Tailwind 与完整的 A3S UI 样式包：
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";使用 form.form 表达一个可恢复任务。Field 负责每个控件的标签与局部错误；Form 负责分组、摘要校验、提交状态与页脚操作。
<form class="form" novalidate>
<div data-form-summary role="alert" hidden></div>
<div class="field">
<label for="workspace-name">工作区名称</label>
<input id="workspace-name" class="input" name="workspaceName" required />
<p data-form-error role="alert" hidden>请输入工作区名称。</p>
</div>
<footer>
<button class="btn" type="submit">保存工作区</button>
<button class="btn" type="reset" data-variant="outline">重置</button>
</footer>
</form>#参数
| 契约 | 用途 |
|---|---|
form.form | 一次提交任务的规范原生根 |
[data-form-summary] | 可选的多项失败摘要；校验前保持为空 |
[data-form-error] / [role=alert] | 局部或摘要恢复文案；仅在失败后展示 |
带 type="submit" / type="reset" 的 footer | 同一任务的主操作与重置 |
data-state="submitting" / aria-busy="true" | 进行中时阻止重复编辑与操作 |
data-state="invalid" / aria-invalid="true" | 提交后表单级校验失败 |
data-state="success" | 本地成功反馈，且不清除已输入值 |
data-state="error" | 宿主报告失败，保留值与恢复焦点 |
data-readonly / data-state="read-only" | 只读呈现，并配对原生 readonly / 禁用提交 |
#契约
| 接口 | 值 |
|---|---|
| 根选择器 | form.form |
| 原生根元素 | <form> |
| 状态 | ready, submitting, success, invalid, error, read-only |
| 事件 | reset, submit |
| 方法 | — |
#产品边界
表单负责交互结构，不负责网络请求、权限或业务校验。不要把不相关设置塞进同一表单，也不要用禁用按钮代替具体错误说明。
组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。
#可访问性
错误靠近字段并可从摘要定位；提交中保留输入，失败后保持焦点上下文。所有字段都需要持久可见的标签。当 aria-busy="true" 时，指针交互会被锁定，避免重复提交与首次请求竞态。