用 input.value 获取控件当前值（含用户输入），而非 getAttribute('value')；多选下拉框需遍历 options 或用 selectedOptions；checkbox/radio 用 checked 判断状态，value 恒为初始值；校验需调用 checkValidity() 并检查 validity 对象。
用 document.getElementById() 读取表单控件的 value
绝大多数时候，你不是在读 HTML 的 value 属性，而是在读控件当前的 value 属性值（即用户输入或脚本设置后的实时值）。value 是 DOM 元素的属性，不是只读的 HTML 属性。
常见错误：直接用 getAttribute('value') 拿初始值，结果用户改了输入框内容却还是返回原始 HTML 里的值。
-
input.value返回当前值（推荐） -
input.getAttribute('value')只返回 HTML 中写的初始值，哪怕用户已修改 - 对
<select></select>和<textarea></textarea>同样适用.value，别用textContent或innerHTML
处理 <select multiple></select> 多选下拉框
多选下拉框的 value 属性只返回第一个被选中的选项值，不是全部。必须遍历 options 集合判断 selected 状态。
示例：const select = document.getElementById('mySelect');，要获取所有选中值：
立即学习“前端免费学习笔记（深入）”；
const values = Array.from(select.options) .filter(opt => opt.selected) .map(opt => opt.value);
- 别依赖
select.value—— 它只返回一个字符串，且是第一个选中项的值 -
select.selectedOptions是更简洁的替代方案（IE 不支持，现代浏览器 OK） - 如果需要兼容 IE，老老实实用
options+selected循环
checkbox 和 radio 的 value 与勾选状态分离
checkbox 和 radio 的 value 属性是固定的，和是否勾选无关。真正反映用户选择的是 checked 属性。
常见错误：以为没勾选的 checkbox 的 value 是空字符串或 undefined —— 实际上它的 value 始终是 HTML 里写的那个字符串，不管有没有勾选。
- 判断是否选中用
checkbox.checked，不是checkbox.value - 批量获取所有勾选的 checkbox 值：
document.querySelectorAll('input[type="checkbox"]:checked') - radio 组里，只有被选中的那个才有
checked === true，其余都是false，但它们的value都完整存在
表单提交前校验：别只读 value，还要看 validity
用户可能输了一堆空格、非法邮箱、超出长度限制的内容，光读 value 拿到的是“脏数据”。原生表单验证靠的是 element.validity 对象。
比如：const input = document.getElementById('email');，检查是否通过验证：
if (!input.checkValidity()) {
console.log(input.validationMessage); // 浏览器自动生成的提示
}
-
input.checkValidity()触发验证逻辑，返回布尔值 -
input.validity包含具体失败原因（如validity.valueMissing、validity.typeMismatch） - 注意：某些验证（如
required）只在提交或调用checkValidity()时触发，不是实时监听
.value，但实际得时刻分清“HTML 属性”“DOM 属性”“用户交互状态”“验证状态”这四层含义。漏掉任意一层，都可能在某个边界场景下突然失效。 
