单页表单

Single Page Form

布局模式也叫：表单页、新建页、编辑页、Form Page

一句话：把需要填写的字段全部放在一个页面里，从上到下排成一列，填完点底部按钮一次性提交，是新建和编辑数据最常见的页面。

详细解释

单页表单就是最常见的「新建订单」「编辑个人资料」「提交反馈」页面：标题下面是一组字段，每个字段由标签和输入控件组成（输入框、下拉、日期、上传等），从上到下排成一列；底部是「保存」和「取消」按钮。

推荐单列排布、标签放在输入框上方，视线只需要从上往下走，填写最快也最不容易漏。字段较多时按主题分组，比如「基本信息」「联系方式」「附件」，每组加一个小标题。必填项加星号，错误提示显示在对应字段正下方。

它和分步向导的区别是：所有字段一次性可见，没有先后步骤，适合字段不太多（大约二十个以内）、彼此独立的情况。它和设置页的区别是：单页表单填完统一提交一次；设置页是很多互不相关的选项，通常改一项就保存一项。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

这是新建客户页面，请用单页表单布局：表单单列排列，最大宽度 640px，标签在输入框上方；字段分为「基本信息」「联系方式」两组，每组有小标题；必填项标星号，失焦时校验并在字段下方显示错误提示；底部放「取消」和主按钮「保存」，提交中按钮显示加载状态并防止重复提交。

顶部是页面标题，中间是按组排列的单列字段（标签在上、控件在下），底部是提交和取消按钮。