新增HTML5的八类INPUT输入
更新时间：2023-11-06概述
在HTML5中，有八类新的input输入类型，它们依次是：color、date、datetime、datetime-local、month、week、time和range。这些新的输入类型提供了更好的用户体验和更丰富的数据输入方式。这篇文章将会以详细的代码示例展示这八个新的输入类型的用法及其相关属性和方法。1. color
color类型的输入用于选择颜色，它提供了一个颜色选择器供用户选择颜色。该输入类型只要求一组十六进制颜色值，但可通过CSS改变颜色选择器的外观。在最新版本的Chrome、Firefox和Safari浏览器中，color输入类型是原生支持的。以下是基本的color输入示例：
<label>选择颜色: <input type="color" name="color_input"></label>注意：在一些旧版本的浏览器中，color输入类型将会被不支持。在这种情况下，color输入将默认为text输入，需要相应的JavaScript代码来提供选择器功能。
2. date
date输入类型用于选择日期，它提供了一个用户友好的日期选择器。该输入类型需要一个标准的日期格式（YYYY-MM-DD），但可通过JavaScript中的Date对象进行更高级的操作。在大多数现代浏览器中，date输入类型是原生支持的。以下是基本的date输入示例：
<label>选择日期: <input type="date" name="date_input"></label>注意：在一些旧版本的浏览器中，date输入类型将会被不支持。在这种情况下，date输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供日期选择功能。
3. datetime
datetime输入类型用于选择日期和时间，它提供了一个用户友好的日期和时间选择器。该输入类型需要一个标准的日期和时间格式（YYYY-MM-DDTHH:MM:SS），但可通过JavaScript中的Date对象进行更高级的操作。在一些旧版本的浏览器中，datetime输入类型不被支持，而在其它现代浏览器中是原生支持的。以下是基本的datetime输入示例：
<label>选择日期和时间: <input type="datetime" name="datetime_input"></label>注意：datetime输入类型已经废弃。现在，可以使用datetime-local输入类型或者使用date和time输入类型组合来实现同样的功能。
4. datetime-local
datetime-local输入类型用于选择本地日期和时间，它提供了一个用户友好的日期和时间选择器。该输入类型需要一个标准的日期和时间格式（YYYY-MM-DDTHH:MM:SS），但可通过JavaScript中的Date对象进行更高级的操作。在大多数现代浏览器中，datetime-local输入类型是原生支持的。以下是基本的datetime-local输入示例：
<label>选择本地日期和时间: <input type="datetime-local" name="datetime_local_input"></label>注意：在一些旧版本的浏览器中，datetime-local输入类型将会被不支持。在这种情况下，datetime-local输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供日期和时间选择功能。
5. month
month输入类型用于选择月份，它提供了一个用户友好的月份选择器。该输入类型需要一个标准的月份格式（YYYY-MM），但可通过JavaScript中的Date对象进行更高级的操作。在大多数现代浏览器中，month输入类型是原生支持的。以下是基本的month输入示例：
<label>选择月份: <input type="month" name="month_input"></label>注意：在一些旧版本的浏览器中，month输入类型将会被不支持。在这种情况下，month输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供月份选择功能。
6. week
week输入类型用于选择星期，它提供了一个用户友好的星期选择器。该输入类型需要一个标准的星期格式（YYYY-Www），但可通过JavaScript中的Date对象进行更高级的操作。在大多数现代浏览器中，week输入类型是原生支持的。以下是基本的week输入示例：
<label>选择星期: <input type="week" name="week_input"></label>注意：在一些旧版本的浏览器中，week输入类型将会被不支持。在这种情况下，week输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供星期选择功能。
7. time
time输入类型用于选择时间，它提供了一个用户友好的时间选择器。该输入类型需要一个标准的时间格式（HH:MM:SS），但可通过JavaScript中的Date对象进行更高级的操作。在大多数现代浏览器中，time输入类型是原生支持的。以下是基本的time输入示例：
<label>选择时间: <input type="time" name="time_input"></label>注意：在一些旧版本的浏览器中，time输入类型将会被不支持。在这种情况下，time输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供时间选择功能。
8. range
range输入类型用于选择范围，它提供了一个用户友好的滑块控件供用户选择。该输入类型需要一个数值类型的值，并且需要设置最小值和最大值，也可以设置步长来控制每次移动滑块的距离。在大多数现代浏览器中，range输入类型是原生支持的。以下是基本的range输入示例：
<label>选择范围: <input type="range" name="range_input" min="0" max="100" step="1"></label>注意：在一些旧版本的浏览器中，range输入类型将会被不支持。在这种情况下，range输入将默认为text类型；或者，可以使用JavaScript代码为该输入类型提供滑块选择功能。
