跳到主要内容
Termlib

布局模式 · 操作流程

单页表单

Single Page Form

也叫：表单页、新建页、编辑页、Form Page

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

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

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

发给

01判断

你的内容是这样吗？

对照两列，确认单页表单是不是你要找的。

符合这些情况，用单页表单

  • 需要新建或编辑一条记录、字段在二十个以内时
  • 字段之间没有先后依赖，可以一次性全部展示时
  • 用户填完后统一提交一次即可时

是这些情况，换成别的

  • 操作有明确的先后步骤，或者字段多到要翻好几屏时

    改用分步向导

  • 很多互不相关的选项、用户经常只改其中一项时

    改用设置页

  • 数据只读展示、不需要编辑时

    改用描述列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    字段排成三四列，视线左右来回跳，容易漏填

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    几十个字段不分组，输入框平铺成一长串

  3. 03

    错误提示统一弹在页面顶部，看不出是哪个字段出了错

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

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

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一列纵向排列的输入框、下拉框，每个上方或左侧有标签
  2. 2带星号的必填项和分组小标题
  3. 3底部有醒目的提交按钮

04解释

详细解释

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

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

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

开发者信息
术语 ID
layout-single-form
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • main:has(> form:only-of-type)
  • main:has(> :is(div, section) > form:only-of-type):not(:has(table))
  • [class*="content" i]:has(> form:only-of-type):not(:has(table, aside))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • form-page
  • create-form
  • edit-form
  • form-container
  • single-form
  • form-layout
  • create-page
  • edit-page
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30