<input> 元素上的 type 属性改变其 UI、屏幕键盘 (移动端) 和内置验证。使用正确的类型可以改善可用性并提供免费的验证。
html
移动键盘会自适应 — type="email" 显示 @ 键,type="tel" 显示数字键盘,type="number" 显示数字。仅这一点就能大幅改善手机上的可用性。
免费验证 — type="email" 在提交时拒绝 not-an-email,min/max 限制数字范围,type="url" 检查有效的 URL — 无需 JavaScript。
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- same name = mutually exclusive; only one can be selected -->
选择正确的 input 类型可以免费获得更好的移动键盘、原生选择器和内置验证 — 改进无障碍访问并减少你需要编写的 JavaScript。
这是一个小选择,却能产生巨大的用户体验回报。