表单元素必须用value属性而非innerText或innerHTML设置内容，checked和selected应直接赋布尔值，disabled与readonly语义不同，验证需用reportValidity()或checkValidity()。
表单元素必须用 value 而不是 innerText 或 innerHTML
直接给 <input> 或 <textarea> 设置文本内容，innerText 和 innerHTML 完全无效——它们只对非表单元素（如 <p>、<div>）起作用。浏览器会忽略对表单控件的这类赋值，控制台也不报错，导致“写了但没反应”的典型困惑。
真正生效的是 value 属性：
const input = document.getElementById("username");
input.value = "admin"; // ✅ 正确
input.innerText = "admin"; // ❌ 无效果
input.innerHTML = "admin"; // ❌ 无效果
-
value同时支持读取和写入：读取时返回当前用户输入或初始值；写入时会覆盖并触发input事件（但不会触发change，除非焦点离开） - 对
<select>元素，value读取的是选中项的value属性值，不是文本内容 -
<textarea>同样只认value，其内部文本是该属性的映射，不是子节点文本
checked 和 selected 是布尔属性，不是字符串
处理复选框（<input type="checkbox">）和单选按钮（<input type="radio">）时，不能用 setAttribute("checked", "true") 这类方式设为选中——这只会把属性加进去，但不改变控件实际状态。同理，<option> 的 selected 也一样。
正确做法是直接赋布尔值：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
const cb = document.getElementById("agree");
cb.checked = true; // ✅ 选中
cb.checked = false; // ✅ 取消
const option = document.querySelector("option[value='2']");
option.selected = true; // ✅ 设为选中项
-
checked和selected是 DOM 属性（property），不是 HTML 属性（attribute）。修改 property 立即影响 UI；修改 attribute 不一定同步 -
getAttribute("checked")返回"checked"或null，但无法反映实时状态；应优先用element.checked判断 - 批量操作 radio 组时，只需设置目标项的
checked = true，浏览器自动取消其他同名name的选项
disabled 和 readonly 行为差异明显
两者都让表单控件不可编辑，但语义和行为完全不同：
-
disabled：控件变灰、失去焦点、不响应任何事件，且提交时**不发送该字段数据** -
readonly：仅对text、password、textarea有效；控件可聚焦、可复制、可右键，提交时**仍会发送该字段数据**
常见误用：用 disabled 锁定一个需要提交的 ID 字段，结果后端收不到——应该用 readonly：
document.getElementById("user_id").readOnly = true; // ✅ 提交时包含
// document.getElementById("user_id").disabled = true; // ❌ 提交时被忽略
-
disabled适用于“临时禁用操作”，比如提交按钮防重复点击 -
readonly适用于“显示但不允许修改”，比如预填的邮箱或订单号 - 两者都可通过
element.disabled = false或element.readOnly = false恢复
表单提交前验证要靠 reportValidity() 和 checkValidity()
HTML5 原生验证（required、type="email"、pattern 等）默认只在提交时触发。如果想在用户离开字段或点击按钮时主动校验，不能只靠监听 submit 事件——它可能被阻止，且错误提示不统一。
推荐组合使用：
const form = document.getElementById("signup");
const emailInput = form.querySelector("[name=email]");
// 手动触发校验并显示浏览器原生提示
emailInput.reportValidity(); // ✅ 显示气泡提示 + 返回布尔值
// 仅检查是否通过，不显示提示
if (emailInput.checkValidity()) {
console.log("格式正确");
} else {
console.log("格式错误");
}
-
reportValidity()会触发完整校验流程，包括样式变化（:valid/:invalid）、气泡提示、invalid事件 -
checkValidity()更轻量，适合条件判断，但不触发 UI 反馈 - 注意：手动调用这两个方法不会阻止表单提交，需配合
event.preventDefault()控制流程 - 若自定义验证逻辑（如用户名是否已存在），应先调用
setCustomValidity("消息")，再调用reportValidity()
checked、selected、value 都是 property，而 getAttribute("value") 拿到的是初始 HTML 值，不是用户当前输入。写代码时盯住 DOM 元素本身，而不是 HTML 字符串。 
