最常被高频使用的 input 类型只有5种：text、password、email、checkbox、radio；其余如date、number等因兼容性或UX问题需额外处理fallback。
哪些 input 类型最常被用到
真正高频使用的只有 5 种：text、password、email、checkbox、radio。其余如 date、number、color 虽然语义清晰，但兼容性或 UX 一致性差，上线前得额外加 fallback 或 polyfill。
-
text和password是基础，几乎所有登录/注册页都用；password的隐藏逻辑由浏览器原生控制，不建议手动 toggle type 属性来实现“显示密码”，容易触发 autofill 异常 -
email类型会触发移动端专用键盘（@ 和 . 快捷键），且有轻量级格式校验（仅检查是否含 @），但别依赖它防错——required+pattern才可靠 -
checkbox和radio的关键区别在 name：同名radio自动互斥，而checkbox必须靠 name 统一才能批量提交（如权限勾选组）
select 和 textarea 的实际使用边界
它们不是 input，但和 input 并列构成表单主力。用错场景会导致体验断层：
-
select适合选项 ≤ 7 个的确定性选择（如省份、性别）；超过这个数就该换searchable dropdown组件，原生select在 iOS 上滚动卡顿、无法搜索 -
textarea没有type属性，靠rows和cols控制初始尺寸，但真实高度应由 CSS 的min-height+resize: vertical管理；别设maxlength过小（比如 100 字），用户粘贴长文本时会被无声截断
容易被忽略的 name 和 value 行为
提交数据时后端收不到字段？90% 出在 name 缺失或 value 为空字符串上：
- 所有可提交的控件（包括
checkbox、radio、select）必须带name，否则不会出现在 POST body 或 URL query string 中 -
checkbox默认不提交——只有勾选状态下才发送name=value；未勾选时完全不发，不是发name=on或name=false -
radio组中任意一个没设value，选中它时提交的 value 就是空字符串，后端可能解析失败 -
select的 value 来自option的value属性，不是 innerText；写<option>男</option>会导致提交空值
HTML5 新增类型的实际价值与陷阱
date、url、tel 等类型看起来很美，但落地要小心：
立即学习“前端免费学习笔记（深入）”；
-
date在 Safari 和旧版 Android 浏览器里直接退化成text，且各平台 picker 样式天差地别；如果业务强依赖日期选择，用input type="text"+ 第三方日历库更可控 -
tel只影响软键盘弹出，不校验格式，甚至允许输入字母（如 “123-ABC”）；别把它当验证手段 -
url的校验极宽松，http://a都算合法；真正需要校验时，还是得用pattern配合正则 - 所有新类型都受
novalidate影响——加了这个属性，连required都会失效
