非文本控件（radio、checkbox、select、file）的值不能用.value读写：radio/checkbox用checked属性；select单选用.value、多选用.selectedoptions；file用.files获取file对象，且所有控件必须设合法name才能提交。
非文本输入控件（radio、checkbox、select、file）的值不能靠 .value 直接读取或设置——这是最常踩的坑，尤其在用 JavaScript 操作时。
radio 和 checkbox 的 checked 状态必须用 checked 属性判断
它们不走 .value，而是靠布尔属性 checked 表达选中状态。浏览器不会把未选中的 radio 或 checkbox 提交，所以只查选中项才有意义。
-
document.querySelector('input[name="gender"][value="male"]').checked→ 返回true或false - 设置选中：直接赋值
el.checked = true，不是el.value = "male" - 同一组
radio用相同name，JS 获取时建议用document.querySelectorAll('input[name="gender"]:checked')避免漏判 - 注意：即使 DOM 中写了
checked，JS 修改后它才真正生效；反之，用户点击也会同步更新该属性
select 下拉框要区分单选/多选，用 selectedIndex 或 selectedOptions
select 的值取决于是否带 multiple 属性，访问方式完全不同。
- 单选
<select name="city"></select>：用el.value可读可写，等价于el.options[el.selectedIndex].value - 多选
<select multiple name="hobbies"></select>：不能用.value，必须遍历el.selectedOptions（返回HTMLCollection） -
el.selectedIndex === -1表示没选中任何项；el.selectedOptions.length === 0是更安全的多选空值判断 - 设置选中项：单选改
el.value；多选需循环设option.selected = true，不能批量赋值
file 输入控件的 value 是只读路径名，真实文件要用 files 对象
<input type="file"> 的 .value 只返回伪路径（如 C:\fakepath\avatar.jpg），毫无实际用途。真正要传给后端的是 .files。
-
el.files是FileList，类数组，不可修改；el.files[0]才是第一个File对象 - 上传前检查：用
el.files.length > 0判断是否选了文件，而不是el.value !== "" -
File对象有name、size、type（MIME）、lastModified等属性，可用于前端校验 - 注意：
el.files是实时只读快照，换文件后会更新，但无法通过 JS 主动赋值触发 —— 这是浏览器安全限制
所有非文本控件都依赖 name 属性才能被表单提交
哪怕你用 JS 正确设置了 checked 或 selected，如果控件缺失 name，submit 时它根本不会出现在提交数据里。
-
radio和checkbox：不设name→ 用户点不了（组无效），JS 设了checked也白搭 -
select：没name→ 下拉选了也不传；多选时每个选中项以name[]=xxx形式提交（取决于后端解析逻辑） -
file：没name→FormDataappend 不进去，enctype="multipart/form-data"也无效 - 容易忽略的一点：
name值不能含空格或特殊符号，否则某些后端框架解析失败
真正麻烦的不是怎么读，而是读完之后怎么传——radio 的 value、select 的 value、file 的 File 对象，三者结构差异极大，混在一起处理很容易漏 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
