新增 input 类型
HTML5 给 input 加了一批语义化类型，本质收益有两个：一是移动端弹出对应的专用键盘——email 弹带 @ 的键盘、tel 弹数字键盘、url 弹带斜杠的键盘；二是浏览器免费提供验证与控件——email/url 自动校验格式，number/date/color 直接渲染成原生控件。
常用类型速览：email 邮箱、url 网址、tel 电话（不校验格式，因为号码格式全球差异大）、search 搜索框（部分浏览器显示清空按钮）、number 带步进按钮的数字、range 滑块、date/time/datetime-local/month 日期时间选择器、color 取色器。
老浏览器遇到不认识的 type 会自动降级成 text，不会报错，所以放心使用，没有兼容风险。
本节要点新类型的收益 = 专用键盘 + 原生控件 + 免费验证；tel 只换键盘不校验；不认识的 type 自动降级为 text，可放心使用。
HTML
<form action="/api/save" method="post"> <input type="email" name="mail" placeholder="邮箱"> <!-- 格式校验 + @键盘 --> <input type="tel" name="phone" placeholder="手机号"> <!-- 数字键盘 --> <input type="url" name="site" placeholder="个人主页"> <!-- 格式校验 --> <input type="search" name="kw" placeholder="搜索"> <!-- 带清空按钮 --> <input type="number" name="qty" min="1" max="99" step="1"> <!-- 数字步进 --> <!-- 滑块：min/max 定范围，step 定步长 --> <input type="range" name="volume" min="0" max="100" value="50"> <input type="date" name="start"> <!-- 日期选择器 --> <input type="datetime-local" name="meet"> <!-- 日期+时间 --> <input type="color" name="theme" value="#e5534b"> <!-- 取色器 --> <button type="submit">保存</button> </form>
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读