form-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Form Design

表单设计

This skill covers form UX patterns — field types, label placement, multi-step wizards, layout grouping, and data collection best practices.

这个Skill涵盖表单UX模式——字段类型、标签放置、多步骤向导、布局分组以及数据收集最佳实践。

Use-When

使用场景

This skill activates when:

Agent builds forms (login, signup, settings)
Agent creates multi-step flows or wizards
Agent designs data collection interfaces
Agent improves existing form conversion
Agent groups related fields

当以下情况触发该Skill：

Agent构建表单（登录、注册、设置）
Agent创建多步骤流程或向导
Agent设计数据收集界面
Agent优化现有表单的转化率
Agent对相关字段进行分组

Core Rules

核心规则

ALWAYS use visible labels (never placeholder-only)
ALWAYS group related fields into sections
ALWAYS indicate required fields visually and programmatically
ALWAYS inline validate after blur, not on every keystroke
PREFER single-column layouts for mobile friendliness

始终使用可见标签（绝不要仅使用占位符）
始终将相关字段分组为区块
始终以视觉和编程方式标记必填字段
始终在失焦后进行内联验证，而非每次按键时
优先选择单列布局以适配移动端

Common Agent Mistakes

Agent常见错误

Using placeholder as label (disappears on focus)
Putting too many fields on one screen
Not grouping related fields
Showing all validation errors at once (overwhelming)
Not indicating required fields clearly

将占位符用作标签（聚焦时会消失）
单屏放置过多字段
未对相关字段进行分组
一次性显示所有验证错误（过于繁杂）
未清晰标记必填字段

Examples

示例

✅ Correct

✅ 正确示例

tsx

// Visible labels with proper grouping
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <div className="space-y-4">
      <div>
        <label htmlFor="name">Full Name</label>
        <input id="name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" />
      </div>
    </div>
  </fieldset>
</form>

tsx

// Visible labels with proper grouping
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <div className="space-y-4">
      <div>
        <label htmlFor="name">Full Name</label>
        <input id="name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" />
      </div>
    </div>
  </fieldset>
</form>

❌ Wrong

❌ 错误示例

tsx

// Placeholder as label
<input placeholder="Enter your name" />

// No grouping, too many fields
<form>
  <input placeholder="Name" />
  <input placeholder="Email" />
  <input placeholder="Phone" />
  <input placeholder="Address" />
  <input placeholder="City" />
  <input placeholder="State" />
  <input placeholder="Zip" />
  {/* ... more fields */}
</form>

tsx

// Placeholder as label
<input placeholder="Enter your name" />

// No grouping, too many fields
<form>
  <input placeholder="Name" />
  <input placeholder="Email" />
  <input placeholder="Phone" />
  <input placeholder="Address" />
  <input placeholder="City" />
  <input placeholder="State" />
  <input placeholder="Zip" />
  {/* ... more fields */}
</form>