直接用 value 属性读取 input 元素的当前值最直接，但 type="number" 也返回字符串；多选控件需遍历筛选选中项；空字符串需 trim 判断；动态插入元素要确保 DOM 就绪；框架中应避免绕过响应式机制操作 DOM。
直接用 value 属性读取 input 元素的当前值
表单控件的实时值不靠事件监听也能拿到，只要元素存在且已渲染，value 属性就是最直接的入口。注意它返回的是字符串，哪怕 type="number" 也一样。
-
document.getElementById("age").value拿到的是字符串"25"，不是数字25 - 对
<input type="checkbox">，value是固定属性值（如"on"），是否勾选得看checked属性 -
<select multiple></select>返回的是第一个选中项的value，要全部选中项得遍历options并检查selected
处理多选下拉框和复选框组要用循环判断
这类控件没有“单个值”概念，强行读 value 会漏数据或返回错误结果。必须主动遍历并筛选出用户实际选中的项。
-
<select id="hobbies" multiple></select>：用Array.from(selectEl.options).filter(opt => opt.selected).map(opt => opt.value) -
<input type="checkbox" name="skill" value="js">：用document.querySelectorAll('input[name="skill"]:checked')再取每个的value - 别依赖
name属性自动聚合——浏览器不会帮你把同名 checkbox 的值打包成数组
表单提交前校验时，记得区分空字符串和未填写状态
value 为空字符串 "" 不一定代表用户没填，可能是清空了输入框，也可能是初始值就是空。需要结合业务逻辑判断是否算“有效输入”。
-
input.value.trim() === ""比input.value === ""更稳妥，避免空格干扰 - 对于必填的
<textarea></textarea>，换行符\n也算内容，但trim()会去掉首尾空白，保留中间换行 - 如果用了
required属性，checkValidity()可辅助判断，但它只管 HTML5 原生校验，不处理自定义规则
动态生成的表单元素要等 DOM 就绪再读取
如果表单是 JS 动态插入的（比如通过 innerHTML 或 appendChild），在插入后立即读 value 可能拿不到预期值——尤其是带默认 value 属性的元素，有时需触发一次重绘或稍作延迟。
立即学习“Java免费学习笔记（深入）”；
- 确保节点已挂载：用
document.body.contains(element)确认 - 避免在
innerHTML = "..."后立刻读值；可改用insertAdjacentHTML或等下一个 microtask：Promise.resolve().then(() => { /* read value */ }) - 框架环境下（如 React/Vue），不要绕过响应式机制直接操作 DOM 值，否则状态可能不同步
表单值看似简单，但类型隐式转换、多选逻辑、DOM 时机这三块最容易在上线后冒出来。尤其当用户连续快速操作或用键盘+鼠标混合交互时，value 和 UI 视觉状态的同步差一点，就容易漏数据。
