HTML5新增输入类型优化表单体验。1. email：限制邮箱格式，支持multiple，移动端显示@键盘；2. url：需包含http://或https://，移动端适配网址键盘；3. number：限定数字输入，支持min、max、step，移动端调出数字键盘；4. 其他：tel显示数字键盘，search用于搜索框，range为滑动条，color打开取色器。配合服务端验证更安全。
HTML5 引入了多种新的输入类型，用来优化表单输入体验，并提供更精确的数据验证和设备适配（比如在移动设备上显示合适的键盘）。下面介绍 email、url、number 等常见新增输入类型的使用方法。
1. email 类型：用于输入邮箱地址
使用 type="email" 可以确保用户输入的是符合邮箱格式的内容。浏览器会自动进行基本格式校验。
示例：
<input type="email" name="user_email" placeholder="请输入邮箱">
立即学习“前端免费学习笔记（深入）”；
说明：
- 用户必须输入类似 name@example.com 的格式，否则提交时会提示错误。
- 在手机上通常会弹出带有 @ 符号的键盘，方便输入。
- 支持多个邮箱输入：type="email" multiple。
2. url 类型：用于输入网址
type="url" 用于要求用户输入有效的 URL 地址，如 https://www.example.com。
示例：
<input type="url" name="website" placeholder="请输入网址">
说明：
- 输入内容必须包含协议头，例如 http:// 或 https://，否则会被视为无效。
- 移动端会显示适合输入网址的键盘布局。
3. number 类型：用于输入数字
type="number" 限制用户只能输入数值，还支持上下调节按钮。
示例：
<input type="number" name="age" min="18" max="100" step="1" placeholder="年龄">
说明：
- min 和 max 设置数值范围。
- step 定义步长，如设置为 0.5 可输入小数。
- 移动端会调出数字键盘，提升输入效率。
4. 其他常用新增输入类型
除了以上三种，还有几个实用的类型：
-
type="tel"：用于电话号码。不强制格式，但移动端会显示数字键盘。
示例：<input type="tel" name="phone" placeholder="电话号码"> - type="search"：用于搜索框，视觉上可能略有不同，部分浏览器会添加清除按钮。
-
type="range"：以滑动条形式输入数值。
示例：<input type="range" min="0" max="100" value="50"> -
type="color"：打开颜色选择器，返回十六进制颜色值。
示例：<input type="color" name="fav_color">
基本上就这些。合理使用 HTML5 新增输入类型，不仅能减少 JavaScript 验证代码，还能显著提升用户体验，特别是在移动设备上。注意在关键场景仍需服务端验证，因为前端校验可被绕过。
