根本原因是input不在文档流中，如位于form外或标签未闭合导致浏览器自动修复dom结构；此外id需全局唯一，重复时仅返回首个；name属性决定数据能否提交，id仅用于前端定位。
为什么表单里加了 id 却没被 JS 选中？
常见现象是：写了 <input id="email">，但 document.getElementById("email") 返回 null。根本原因不是 JS 写错了，而是这个 input 不在文档流里——比如它被写在 <form></form> 外、或嵌套在未闭合的标签中（如漏了 ），导致浏览器解析时自动“修复”结构，把元素挪到意外位置。
实操建议：
- 用浏览器开发者工具的
Elements面板直接检查该元素是否真在预期 DOM 节点下 -
id值必须全局唯一；同一页面出现两个id="email"，getElementById只返回第一个 - 若需批量操作，优先用
class+querySelectorAll，而非重复依赖多个id
name 属性不等于 id，但它决定后端能不能收到数据
表单提交时，浏览器只把带 name 的控件数据打包发走。id 纯属前端定位用，class 是样式/行为分组用，二者都不参与提交。一个典型错误是：写 <input type="text" id="username">，却忘了加 name="username"，结果后端 $_POST["username"] 或 req.body.username 永远是 undefined。
特别注意：
- 单选按钮（
type="radio"）和复选框（type="checkbox"）必须同名才能成组，否则无法互斥或批量取值 - 隐藏域（
type="hidden"）也要有name，比如<input type="hidden" name="csrf_token" value="abc123"> - 如果某个字段不想提交，别删
name，改用form="dummy"（指向一个不存在的form）或临时移除属性
title 和 placeholder 不是一个东西，别混着用
title 是鼠标悬停时浮现的系统 tooltip，对屏幕阅读器也有效；placeholder 是输入框内的浅灰色提示文字，焦点进入即消失。两者语义不同，不能互相替代。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
-
placeholder不是 label，不能代替<label></label>。没有label的表单可访问性（a11y）不达标，语音助手无法正确播报 -
title在移动端几乎不可见（iOS Safari 默认不触发），别指望它做主要提示 - 若要实现“输入时提示+失焦后保留说明”，得用
<label></label>+ CSS 控制显隐，而不是硬塞title
data- 自定义属性是表单状态管理的轻量出口
当需要让 JS 记录某个输入框当前处于“校验中”“已通过”“被禁用”等非标准状态时，data- 属性比 class 切换更语义清晰，也比全局变量更可控。
例如：
- 用
data-valid="true"标记邮箱格式已通过正则校验，提交前统一扫描所有data-valid="false"字段阻断 - 用
data-source="api"区分该字段值来自用户输入还是接口回填，避免覆盖逻辑冲突 - 注意：JS 读取时要用
el.dataset.source（驼峰化），不能直接el.getAttribute("data-source")，否则大小写不敏感可能出错
复杂点在于，这些属性不会自动同步到后端——你得在提交前手动收集它们，或用 FormData 配合 append() 补充额外字段。别默认它会随表单一起发走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
