HTML input类型按功能可分为四类：文本与数值类（如text、email、number、date）、选择类（radio、checkbox）、文件与特殊功能类（file、hidden、color）、按钮类（submit、reset、button）；每种type决定校验、键盘、约束等原生能力。
HTML 表单里没有所谓“标准分类法”，但按浏览器渲染行为、提交数据方式和语义用途，input 类型确实能清晰划分为四类：文本与数值类、选择类、文件与特殊功能类、按钮类。选错类型不仅影响用户体验，还会让 required、pattern、移动端键盘触发等原生能力失效。
text/password/email/number/date 等 type 值不是装饰，是功能开关
这些 type 值直接决定三件事：浏览器是否做格式校验、移动端弹出什么键盘、能否用 min/max/step 约束输入范围。比如 type="number" 会拒绝用户输入 “123abc”，而 type="text" 加 pattern="\d+" 只在提交时校验，且无法阻止粘贴非法字符。
-
type="email"和type="url"触发邮箱/网址专用键盘，但不保证后端收到的是合法邮箱——仍需服务端校验 -
type="date"在 Chrome/Firefox/Safari 中调出原生日期选择器，iOS 上会自动禁用手动输入（除非加inputmode="text"） -
type="number"的value必须是数字字符串（如"42"），写成"42px"或空字符串会导致控件初始化失败，valueAsNumber返回NaN - 所有带校验的类型（
email、number、url、required）在表单提交时触发checkValidity()，失败则阻止提交并显示默认提示
radio/checkbox/select 的 name 和 value 必须配合使用
单选和复选框不靠 DOM 位置或 ID 关联逻辑，全靠 name 属性归组、value 属性传值。漏掉 name，就等于没加到表单数据里；value 为空或缺失，提交时该字段值就是空字符串而非 undefined。
-
radio组内所有项必须有相同name，否则互斥失效；任一项加checked才有默认选中，不加则初始无选中项 -
checkbox的name相同只表示“属于同一字段”，提交时多个选中项会以相同name多次发送（如hobby=reading&hobby=coding），后端需按数组接收 -
select的value必须写在option标签上，select自身的value属性无效；多选需加multiple属性，且用户必须按住 Ctrl/Cmd 才能多选 - 所有选择类控件都应配
label，用for指向对应id，否则触屏点击区域太小，可访问性（a11y）不达标
file/hidden/submit/reset/button 各司其职，混用易出问题
type="file" 是唯一需要 enctype="multipart/form-data" 配合的控件；type="hidden" 不参与用户交互，但会随表单一起提交；按钮类控件中，只有 type="submit" 和 type="reset" 有默认行为，其他都得靠 JS 绑定事件。
立即学习“前端免费学习笔记（深入）”；
-
input type="file"默认只选一个文件，要支持多文件必须加multiple属性，且后端接收逻辑要适配文件数组 -
input type="hidden"的value通常由 JS 动态写入（如 token、页面来源标记），不要手写死值，避免缓存污染 -
button标签默认type="submit"，若不想提交表单，务必显式写type="button"，否则点一下就刷新页面 -
input type="image"是提交按钮的图片版，点击坐标会以x/y形式附加到数据里，很少用，兼容性差
真正容易被忽略的，是 form 容器的 enctype 和 method 对控件行为的全局约束：只要表单里有 type="file"，就必须设 enctype="multipart/form-data"，否则文件根本传不到后端；而 method="get" 会让所有字段拼进 URL，密码类字段绝不能用这个方式。
