input.value 是唯一可靠方式，因它读取用户实时输入的动态值，而 getattribute('value') 仅返回 html 初始静态值；textarea、select 同理；select multiple 需用 selectedoptions 获取全部选中项。
直接用 .value 属性读取，不是 getAttribute('value')，也不是 textContent —— 这是绝大多数人第一次写表单交互时栽跟头的地方。
为什么 input.value 是唯一可靠方式
HTML 中的 value 属性有两个层面：一个是 HTML 标签里写的初始值（静态），另一个是 DOM 元素上实时反映用户输入的属性（动态）。.value 读的是后者；getAttribute('value') 只能拿到前者。
- 用户改了文本框内容，
input.value随之更新，input.getAttribute('value')仍返回原始 HTML 里的字符串 -
textarea和select同样适用.value，别用innerHTML或textContent - 对
select multiple，.value只返回第一个选中项，要全部得用select.selectedOptions或遍历options
form.elements 批量取值时要注意什么
form.elements 返回一个 HTMLFormControlsCollection，按 HTML 顺序包含所有带 name 的可提交控件（input、select、textarea），但有几个关键细节必须处理：
- 没写
name的控件（哪怕有id）会被完全忽略 -
type="hidden"默认也会被包含，如不需要得手动过滤：Array.from(form.elements).filter(el => el.name && el.type !== 'hidden') -
disabled控件不会被提交，但form.elements依然会返回它们 —— 判断是否有效得靠el.disabled === false - 遍历时推荐用
for...of或传统for循环，不要用forEach（它不支持HTMLFormControlsCollection）
checkbox 和 radio 的 value 不代表是否勾选
它们的 value 是固定字符串（HTML 里写的），真正表示用户选择状态的是 checked 属性。
- 未勾选的 checkbox，
checkbox.value仍是原始值，不是''或undefined - 获取所有勾选的 checkbox：
document.querySelectorAll('input[type="checkbox"]:checked')，再取每个的.value - radio 组里只有被选中的那个
radio.checked === true，其余都是false，但所有value都完整保留 - 想批量读 radio 组的值，先定位组（比如
name="gender"），再用document.querySelector('input[name="gender"]:checked')?.value
表单提交前校验不能只看 .value
用户可能输了一堆空格、非法邮箱、超长文本，.value 拿到的是“原样字符串”，不代表通过了浏览器原生验证。
- 必须调用
input.checkValidity()，它返回布尔值 - 进一步查原因：看
input.validity对象，比如validity.valueMissing、validity.typeMismatch、validity.tooLong - 注意：
input.validity.valid是最终结果，但其他字段才能告诉你具体哪条规则没过 - 如果用了
required或type="email"，但没调checkValidity()，就等于没真正启用验证
最易被忽略的一点：所有这些行为都依赖控件是否已渲染完成且在 DOM 中。如果 JS 在元素加载前就执行，document.getElementById() 会返回 null，后续访问 .value 直接报错 —— 务必确保脚本在 DOMContentLoaded 之后运行，或把 script 放在 body 底部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
