GPT-5.2 在「联系表单」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GPT-5.2
  • 用例名称：联系表单
  • 测试类型：网页生成
  • 评测维度：表单设计

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端工程师，擅长使用原生 HTML、CSS 和 JavaScript 构建结构清晰、交互友好的 Web 表单页面。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须合并在单个 HTML 文件中，可直接在浏览器运行，无需任何外部依赖。 2. HTML 结构语义化，使用恰当的表单元素（label、input、select、textarea 等），确保字段与标签正确关联。 3. CSS 样式内嵌于 <style> 标签，保持布局整洁、视觉层次清晰，错误提示需醒目可辨。 4. JavaScript 内嵌于 <script> 标签，实现基础必填验证和提交逻辑，代码结构清晰并附有关键注释。 5. 优先保证功能正确性与代码可读性，面向入门级场景，不引入复杂框架或高级特性。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

# 联系我们表单页面（基础版） ## 任务描述 请在单个 HTML 文件中实现一个「联系我们」表单页面，所有 HTML、CSS、JavaScript 代码均写在该文件内，无需任何外部库或框架，可直接在浏览器中独立运行。 ## 表单字段要求 | 字段 | 类型 | 是否必填 | |------|------|----------| | 姓名 | 单行文本输入框 | 必填（标注 *） | | 邮箱 | 邮箱输入框 | 必填（标注 *） | | 电话 | 单行文本输入框 | 可选 | | 主题 | 下拉选择框 | 必填（标注 *） | | 消息内容 | 多行文本框（textarea） | 必填（标注 *） | | 发送按钮 | 提交按钮 | — | 主题下拉选项：咨询、反馈、投诉、其他（需包含一个默认的空白/提示选项）。 ## 功能要求 1. **必填标注**：所有必填字段的标签旁显示红色星号（*）。 2. **基础必填验证**：点击发送按钮时，检查所有必填字段是否已填写；若有未填写项，在对应字段下方显示清晰的错误提示文字（如「此字段为必填项」），阻止表单提交。 3. **字符计数**：消息内容文本框下方实时显示已输入字符数，格式为「X / 500」，最多允许输入 500 个字符（超出时阻止继续输入或给出提示）。 4. **提交成功提示**：所有必填字段验证通过后，隐藏表单，在页面显示感谢提示信息（如「感谢您的留言，我们会尽快与您联系！」）。 5. **表单重置**：提供「重置」按钮或感谢页面中的「返回」按钮，点击后清空所有字段并恢复初始状态。 ## 样式要求 - 页面整体居中布局，表单宽度适中（建议 480px–600px）。 - 每个字段的标签（label）与输入控件上下排列，间距合理。 - 错误提示文字使用红色，位于对应输入控件下方。 - 发送按钮样式突出，与重置按钮有视觉区分。 ## 输出要求 直接输出完整的单文件 HTML 代码，代码中的 CSS 置于 `<style>` 标签内，JavaScript 置于 `<script>` 标签内，并在关键逻辑处添加简短注释。

任务要求

AI 模型需要满足以下要求：

  1. 所有指定表单字段（姓名、邮箱、电话、主题、消息内容、发送按钮）均存在，字段类型正确，必填字段旁有红色星号标注，主题下拉包含全部四个选项。
  2. 点击发送按钮时触发必填验证，未填写的必填字段在其下方显示明确的错误提示文字，验证通过后才执行提交逻辑（不发生页面跳转）。
  3. 消息内容文本框具有实时字符计数显示（格式为「X / 500」），并对 500 字上限进行有效限制或提示。
  4. 验证通过提交后，表单区域隐藏并显示感谢提示信息；页面提供重置/返回功能，可恢复到初始表单状态。
  5. 所有代码（HTML/CSS/JS）合并在单个 HTML 文件中，可在浏览器直接打开运行，无外部依赖。
  6. 页面布局整洁，标签与输入控件对应关系清晰，错误提示视觉上可辨识（红色文字），整体可用性良好。

评测结果

综合得分

该模型在此用例的得分为：90.3 分（满分 100 分），已通过

基础难度评测结果

  • 得分：90.3 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 联系我们 :root{ --bg: #f6f7fb; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #d1d5db; --focus: #2563eb; --danger: #dc2626; --btn: #2563eb; --btn-hover: #1d4ed8; --btn-secondary: #f3f4f6; --btn-secondary-hover: #e5e7eb; } * { box-sizing: border-box; } body{ margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .page{ min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; } .card{ width: min(600px, 100%); background: var(--card); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 22px 20px; } header h1{ margin: 0 0 6px; font-size: 22px; } header p{ margin: 0 0 18px; color: var(--muted); font-size: 14px; } form{ display: grid; gap: 14px; } .field label{ display: inline-block; font-weight: 600; margin-bottom: 6px; } .req{ color: var(--danger); margin-left: 6px; font-weight: 700; } input, select, textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; outline: none; background: #fff; } textarea{ resize: vertical; min-height: 120px; } input:focus, select:focus, textarea:focus{ border-color: var(--focus); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .error-text{ min-height: 18px; /* 预留空间，避免布局跳动 */ margin-top: 6px; color: var(--danger); font-size: 13px; display: none; } .has-error input, .has-error select, .has-error textarea{ border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); } .has-error .error-text{ display: block; } .meta-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 12px; } .counter{ margin-left: auto; font-variant-numeric: tabular-nums; } .counter.over{ color: var(--danger); font-weight: 600; } .actions{ display: flex;...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该生成结果质量极高，完整实现了任务要求的所有功能：字段完整、必填验证正确、字符计数实时更新、提交成功切换视图、重置功能正常。视觉设计整洁美观，错误状态反馈清晰，按钮区分明显。代码结构语义化、可读性强，关键逻辑有注释，还额外添加了无障碍属性（aria-live、role=alert 等），体现了较高的工程素养。整体属于优秀水准的实现。 【GEMINI】该模型出色地完成了任务。生成的代码不仅功能完整、逻辑正确，而且在代码质量、可访问性（Accessibility）和用户体验设计方面都展现了极高的水准。代码结构清晰，注释到位，是一个非常优秀的示例。 【KIMI】该实现是一份高质量的「联系我们」表单页面，完整覆盖了所有功能需求，代码结构清晰、视觉设计专业、用户体验友好。作为面向入门级场景的实现，在保持简洁的同时兼顾了可维护性和无障碍访问，符合资深前端工程师的输出标准。建议在后续迭代中补充邮箱格式验证和电话格式可选验证，以进一步提升表单的数据质量。

进阶难度评测结果

  • 得分：88.6 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 联系我们（进阶版） /* ========================= CSS 模块：设计令牌 / 基础样式 ========================= */ :root{ --bg0:#0b1220; --bg1:#0f1b33; --card:#0f1a2e; --card2:#0c1527; --text:#eaf0ff; --muted:#a9b6d6; --border: rgba(255,255,255,.10); --border2: rgba(255,255,255,.16); --primary:#6ea8ff; --primary2:#3f7cff; --success:#2bd576; --danger:#ff4d5e; --warning:#ffb020; --shadow: 0 18px 60px rgba(0,0,0,.45); --radius: 18px; --ring: 0 0 0 4px rgba(110,168,255,.22); --ring-danger: 0 0 0 4px rgba(255,77,94,.18); --ring-success: 0 0 0 4px rgba(43,213,118,.18); --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font); color:var(--text); background: radial-gradient(1200px 700px at 20% 10%, rgba(110,168,255,.22), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(43,213,118,.14), transparent 55%), radial-gradient(900px 700px at 60% 90%, rgba(255,176,32,.10), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); display:flex; align-items:center; justify-content:center; padding:24px; } a, button, input, select, textarea { font: inherit; } ::selection{ background: rgba(110,168,255,.35); } /* ========================= CSS 模块：布局 / 卡片 ========================= */ .shell{ width:min(980px, 100%); display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch; } .card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; position:relative; } .card::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(700px 240px at 20% 0%, rgba(110,168,255,.18), transparent 60%), radial-gradient(600px 240px at 80% 0%, rgba(43,213,118,.12), transparent 60%); pointer-events:none; filter:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一个高质量的联系我们表单实现，功能完整度高，UI设计现代美观，代码组织规范。深色主题配合渐变背景和卡片式布局呈现出专业的视觉效果，所有要求的功能均已实现且细节处理到位（如beforeinput阻止超限输入、位与确保全量验证、textContent防XSS等）。响应式布局覆盖移动端和桌面端，三种字段状态视觉区分清晰。整体达到生产级别标准，是一个优秀的实现。 【GEMINI】该模型生成的结果极其出色，完全符合所有进阶要求。代码不仅功能完备、逻辑严谨，而且在 UI/UX 设计上展现了极高的专业水准。单文件结构组织有序，注释详尽，是一份高质量的工程化代码示例。 【KIMI】该实现是一份高质量的联系我们表单解决方案，完整覆盖了所有功能需求，UI现代美观且交互细腻，代码结构清晰、模块化程度高。在实时验证、草稿持久化、响应式设计和用户体验细节方面均表现出色，可直接用于生产环境。

困难难度评测结果

  • 得分：89.5 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 联系我们 — 高级多步骤表单 /* ========================================================= 设计系统 / 基础样式 ========================================================== */ :root{ --bg1:#667eea; --bg2:#764ba2; --card:#ffffff; --text:#1a202c; --muted:#4a5568; --border:#e2e8f0; --focus:#667eea; --danger:#e53e3e; --success:#38a169; --shadow: 0 18px 50px rgba(0,0,0,.18); --radius: 16px; --radius-sm: 12px; --ring: 0 0 0 4px rgba(102,126,234,.18); --transition: 220ms cubic-bezier(.2,.8,.2,1); --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--sans); color:var(--text); background: radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, var(--bg1), var(--bg2)); display:flex; align-items:center; justify-content:center; padding: 22px 14px; } .app{ width: min(680px, 100%); position: relative; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; color: rgba(255,255,255,.92); } .brand{ display:flex; align-items:center; gap:10px; min-width: 0; } .logo{ width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); box-shadow: 0 10px 25px rgba(0,0,0,.18); position: relative; overflow:hidden; } .logo::after{ content:""; position:absolute; inset:-40%; background: conic-gradient(from 180deg, rgba(255,255,255,.0), rgba(255,255,255,.55), rgba(255,255,255,.0)); animation: spin 3.6s linear infinite; opacity:.75; } @keyframes spin{ to{ transform: rotate(360deg); } } .brand h1{ font-size: 16px; margin:0; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand .sub{ font-size: 12px; opacity:.85; margin-top:2px; } .actions{...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】这是一份高质量的生产级单文件HTML实现，完整覆盖了所有指定功能需求。代码架构设计优秀，采用模块化IIFE+状态管理模式，职责分离清晰，XSS防护处理全面。视觉设计专业美观，无障碍支持完整。富文本编辑器、音效系统、条件字段逻辑、sessionStorage持久化等复杂功能均正确实现。整体代码质量达到生产级标准，是一份值得参考的高质量实现。 【GEMINI】这是一份极其出色的生产级代码实现。模型不仅完整覆盖了所有复杂的功能需求，还在代码架构、安全性、交互体验和无障碍设计上展现了极高的专业水准。特别是对 Web Audio API 的巧妙运用和对富文本编辑器安全性的严谨处理，体现了资深全栈工程师的编码能力。 【KIMI】这是一个生产级质量的高级多步骤表单实现，完全满足所有功能需求。代码架构采用现代前端状态管理模式，安全防护措施到位，视觉设计和交互体验专业流畅。富文本编辑器和音效系统均在单文件约束内自行实现，无外部依赖。响应式适配和无障碍支持均达到较高水准。整体实现超出预期，可作为同类任务的优秀范例。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%