HTML5 中新增的 <input> 元素类型非常丰富，以下是一些常用的类型及其示例：
1、email - 用于输入电子邮件地址。
<input type="email" name="user_email">
2、url - 用于输入 URL 地址。
<input type="url" name="user_website">
3、number - 用于输入数值。
<input type="number" name="quantity" min="1" max="100">
4、range - 用于创建滑块控件，通常用于选择数值范围。
<input type="range" name="volume" min="0" max="100">
5、color - 用于选择颜色，直接可以调出现成的拾色器。
<input type="color" name="color_picker">
6、date - 用于输入日期类型 [ 年 / 月 / 日 ]
<input type="date" name="date_picker">
7、month - 用于输入月份类型[ 年 / 月 ]
<input type="month" name="month_picker">
8、week - 用于输入周类型[ 年 / 周 ]
<input type="week" name="week_picker">
9、time - 用于输入时间类型
<input type="time" name="time_picker">
10、search - 用于搜索框。
<input type="search" name="search_box">
11、tel - 用于输入电话号码。
<input type="tel" name="phone_number">
12、file - 用于上传文件。
<input type="file" name="file_upload">
除了上述类型外，还有一些比较特殊的类型，例如 datetime-local、datetime 等，不过它们的浏览器支持情况可能有限，需要根据具体情况选择使用。
13、datetime-local类型的输入框可以让用户选择日期和时间，并将其表示为本地时间（也就是用户当前所在的时区）。
它输入格式为yyyy-mm-dd T hh:mm:ss，其中T表示日期和时间之间的分隔符。
<label for="datetime">选择日期和时间：</label>
<input type="datetime-local" id="datetime" name="datetime">
14、datetime类型的输入框与datetime-local类型类似，但是它表示的是一个具有时区信息的日期和时间。
它输入格式为yyyy-mm-dd T hh:mm:ss TZD，其中TZD表示时区信息。
<label for="datetime">选择日期和时间：</label>
<input type="datetime" id="datetime" name="datetime">
datetime-local 和 datetime 类型的输入框，有些浏览器不支持，所以在使用时需要进行兼容性检测。
大家好！我是Just，订阅号[ 设计师工作日常 ]，求点赞求关注！！！
