工单管理系统页面核心是确保提交、查询、状态流转在html层即具备可操作性与语义合理性：表单须用包裹，input需有name，select替代div模拟下拉，button必须type="submit"，textarea加required和maxlength，查询用实现免js折叠，状态用data-status标记。
工单管理系统页面不是“堆组件”，核心是让提交、查询、状态流转这三件事在 HTML 层就具备可操作性和语义合理性——纯 HTML 能做的，别等 JS 加载完才让用户点不动。
表单结构必须用 <form></form> 包裹且含 method 和 action
很多面试者直接写一堆 <input> 和 <button></button>，但没包 <form></form>，导致回车无法提交、无障碍支持差、语义缺失。哪怕后端还没写，action 也得设成占位值（如 #submit），method 明确为 POST。
-
<form method="POST" action="/api/tickets"></form>是底线，不是可选项 - 每个
<input>必须有name，否则提交时字段不带过去（例如name="subject"） - 下拉选择工单类型、优先级，用
<select name="priority"></select>，别用<div> 模拟 <li>提交按钮必须是 <code><button type="submit"></button>，不是type="button"或无type <textarea name="description" required maxlength="2000"></textarea>- 配合
<small>最多 2000 字符</small>做视觉提示，别只靠 placeholder - 注意：Chrome 对
maxlength在中文输入法下可能延迟触发，需 JS 补充监听input事件做实时计数（但 HTML 层先兜底） <details><summary>查看工单 #TK-2024-0876 进度</summary><p>已分配给运维组，处理中…</p></details>- 避免用
<div onclick="toggle()"> 模拟，那不是“不用 JS”，只是把 JS 写得更丑 <li>若需默认展开，加 <code>open属性：<details open></details> - 注意：Safari 对
<details></details>的 CSS 自定义有限制，别试图重置summary::marker在旧版 Safari 上的样式 <span data-status="processing" class="status-badge">处理中</span>- 避免写成
<span class="status-processing"></span>—— 类名是表现层，data-属性才是数据层 - 如果状态要动态变色，CSS 可写：
[data-status="resolved"] { color: #28a745; }，比写一堆 class 更易维护 - 别在
data-status里塞空格或特殊符号，保持小写字母+短横线，比如waiting-for-user，不是"Waiting For User!"
textarea 要设 required 和 maxlength 防空提交和超长截断
工单描述为空是高频错误，后端校验前，HTML 层就得拦住。但只加 required 不够——用户粘贴万字日志会直接炸掉接口，所以必须双控。
进度查询区域用 <details></details> + <summary></summary> 实现免 JS 折叠
面试常被问“不用 JS 怎么实现展开/收起？”，答案就是原生 <details></details>。它支持键盘操作（Space 键切换）、语义清晰、兼容性到 Edge 79+，完全满足基础查询页需求。
状态标签用 <span></span> + data-status 便于后续 JS 操作
工单状态（如 “待受理”、“处理中”、“已解决”）不能只靠颜色区分，要保留机器可读的标识。纯 HTML 页面也要为后续增强留好钩子。
真正卡人的从来不是“怎么画出这个页面”，而是提交是否可靠、查询是否可访问、状态是否可扩展。HTML 不是草稿，它是整个系统的契约起点。
