html表单控件关键在type、name、value三者协同：type决定行为与验证，name是后端接收字段名（无name不提交），value控制默认值与提交值（非placeholder），三者任一错配均可能导致数据丢失或验证失败。
HTML 表单控件不是“写对标签就完事”，关键在 type、name、value 三者协同是否合理，否则后端收不到数据或验证失败。
type 属性决定控件行为和语义
浏览器根据 type 值渲染不同 UI 并触发对应验证逻辑，不能仅靠 CSS 伪装类型。
-
text和email都是单行输入，但后者在移动端弹出邮箱键盘，且提交时自动校验格式（如缺少 @） -
number会限制用户只能输数字，但注意：它的value是字符串，不是 Number 类型；需用parseFloat()或Number()转换 -
radio和checkbox必须配name才能分组或被识别为同一字段；radio同名项互斥，checkbox同名可多选，后端收到的是数组（如hobbies[]=reading&hobbies[]=coding） -
file默认只传一个文件，加multiple属性才支持多选；上传必须设enctype="multipart/form-data"，否则后端收不到二进制内容
name 属性是后端接收数据的唯一依据
没有 name 的控件，无论有没有值，都不会随表单提交——这是最常被忽略的硬性规则。
-
<input type="text" id="username">→ 不提交；<input type="text" name="username">→ 提交为username=xxx -
<input type="checkbox" name="agree" value="1">：勾选时提交agree=1，不勾选时该字段完全不出现在请求中（不是agree=或agree=null） - 下拉框
<select name="city"></select>必须给每个<option></option>设value，否则提交的是 option 文本内容（易含空格、换行，后端难处理） -
<textarea name="desc"></textarea>和<input type="text" name="desc">提交的字段名一致，后端无法区分来源，命名要语义清晰
value 属性控制默认值与提交值
value 不只是“占位提示”，它直接参与提交；placeholder 才是纯提示，不提交。
-
<input type="text" name="age" value="18">：加载即显示 18，用户未修改就提交 18；清空后提交空字符串age= -
<input type="radio" name="theme" value="dark" checked>：页面加载时默认选中，提交theme=dark；没设checked就算有value也没用 -
<input type="hidden" name="token" value="abc123">：不显示但必提交，常用于 CSRF token 或页面状态标识 - 不要用
value模拟 placeholder 效果——用户删掉后无法恢复，且不符合无障碍规范
label 与 for/id 关联影响可访问性和点击体验
点击 <label></label> 文本等效于点击对应控件，这对触屏和辅助设备至关重要；错配或缺失会导致交互断裂。
-
<label for="email">邮箱</label><input type="email" id="email" name="email">→ 正确：点击“邮箱”文字聚焦输入框 -
<label>邮箱<input type="email" name="email"></label>→ 无效：label 没绑定，且嵌套 input 违反 HTML5 规范（label 内容应为文本） - 多个控件共用一个
id（如复制粘贴漏改）会导致for指向混乱，只有第一个生效 - 无
id的控件无法被for关联，此时可用<label>文本<input></label>包裹方式，但仅限单个控件且不推荐用于复杂布局
真正容易出问题的不是“哪个控件怎么写”，而是 name 是否统一、type 是否匹配业务语义、value 是否被误当 placeholder 使用——这三点错一个，表单就可能在某个浏览器或后端环节静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
