别再把 input 当万能筐：HTML 表单元素的正确打开方式

很多时候我们写表单，习惯性地一个 <input type="text"> 走天下。结果用户在手机端填手机号时弹出了英文键盘，或者提交后发现邮箱格式错了才报错。表单不仅仅是收集数据的容器，更是产品与用户交互的第一道关口。 忽视原生能力，不仅增加开发冗余代码，更是在无形中推高用户的放弃率。

针对不同类型的数据，浏览器内置了截然不同的行为逻辑。比如输入邮箱地址，用 type="email" 不仅能触发自带校验，移动端还能自动调出带 @ 符号的专用键盘；填手机号时用 type="tel"，数字键盘会直接置顶，甚至屏蔽字母键。千万别为了统一样式而忽略这些原生能力，这能减少用户至少一步的操作成本。对于日期选择，<input type="date"> 在移动端体验优于多数自定义插件，虽然桌面端表现参差不齐，但在响应式设计中值得优先尝试。若涉及金额或数量，加上 min、max 和 step 属性，比事后 JS 拦截限制更加直观。

单选和多选是新手容易混淆的地方。选项少且互斥时，用 radio，让用户一眼看清所有可能；选项多或可复选时，checkbox 更灵活。值得注意的是，<select> 下拉菜单在移动端往往是个“重灾区”，点击反馈慢且操作不直观。如果选项在 5 个以内，建议直接平铺按钮代替下拉框，点击即选永远比点开再选更友好。搜索框别只用 text，换成 type="search" 能唤起清除按钮，方便用户快速重试。

原生验证能省下不少后端压力。required 属性让必填项无需 JS 即可拦截提交，pattern 支持正则匹配，能提前规范输入格式。但要注意，placeholder 不是 label，它只是临时提示语，内容消失后用户会忘记要填什么，务必配合 <label for="id"> 使用。这样不仅视觉上清晰，屏幕阅读器也能准确播报字段含义，兼顾无障碍访问体验。另外，善用 autocomplete 属性，告诉浏览器这是姓名、城市还是信用卡号，系统能帮用户自动填充历史数据，转化率就这么悄悄提上去了。

技术细节决定用户体验的上限。与其堆砌复杂的 JS 框架去模仿原生控件，不如先吃透这几个基本标签的组合拳。好的表单设计，应该是让用户感觉不到它的存在，顺畅地完成目标，这才是前端开发的真正价值。