图文并茂将HTML5中的新增表单元素彻底搞明白
在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。
新增input元素类型。
新增其他表单元素。
这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。
1、新增input元素类型
在HTML5中，大量地增加了input元素的种类。换句话说就是，input元素的type属性新增了大量属性值，如下表所示：
1.1、验证型：
1.1.1、email
当type属性取值为“email”时，表示这是输入电子邮件的文本框（语义化）。
语法：
举例：
结果：
说明：
当我们输入非电子邮件格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图所示。这里有一点要说明，即必须是submit按钮才会弹出提示内容，使用其他按钮（如button按钮）则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。
1.1.2、tel
当type属性取值为“tel”时，表示这是输入电话号码的文本框（语义化）。
语法：
举例：
结果：
说明：
当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合3.2节介绍的pattern属性来实现。
1.1.3、url
当type属性取值为“url”时，表示这是输入URL的文本框（语义化）。
语法：
举例：
结果：
说明：
当我们输入非URL格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图所示。所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。
1.2、取值型：
1.2.1、range
当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。
语法：
min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。这3个属性的取值可以是整数，也可以是小数。
举例：
结果：
说明：
上面这句代码表示：滑动条最小值为-10，最大值为10，每次拖动只能改变5（增加5或减少5）。value="-10"用于设置滑动条的初始值，设置不同的value值，滑块也会出现在对应数值的位置。在实际开发中，range类型元素都是需要结合javaScript来操作的，上面这个例子就是最简单也是最经典的。此外，output元素用于定义表单元素的输出结果。
1.2.2、number
当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。
语法：
min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。它们的属性取值可以是整数，也可以是小数。number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。
举例：
结果：
说明：
在这个例子中，我们可以直接在文本框中输入数字，也可以通过右边的微调按钮来改变数字。
1.2.3、color
当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。
语法：
value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。
举例：
结果：
说明：
当我们点击color类型元素时，浏览器会弹出自带的取色工具，以方便直接选取颜色值，如下图所示。
1.2.4、date
当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。
语法：
value属性用于设置日期初始值，格式必须如“2018-05-20”。
举例：
结果：
说明：
当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期，如下图所示。此外，value属性用于设置日期初始值，格式必须如“2021-07-27”，像“2018–7-27”这种是无效的。
1.2.5、time
当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。
语法：
value属性用于设置时间初始值，格式必须如“08:04”。
举例：
结果：
说明：
当我们点击time类型元素时，文本框右边会出现微调按钮，以方便调整时间，如下图所示。此外，value属性用于设置时间初始值，格式必须如“08:04”，像“8:4”这种是无效的。
1.2.6、month
当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。
语法：
value属性用于设置初始值，格式必须如“2021-07”。
举例：
结果：
说明：
当我们点击month类型元素时，浏览器会弹出选择框，以方便选择哪个月份，如下图所示。
1.2.7、week
当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。
语法：
value属性用于设置初始值，格式必须如“2021-W04”。其中，“W”是“week”的缩写。
举例：
结果：
说明：
当我们点击week类型元素时，浏览器会弹出选择框，以方便选择第几周，如下图所示。
2、新增其他表单元素
前面介绍的都是input元素新增的类型，实际上HTML5还新增了3个表单元素：output、datalist、keygen。
2.2、output
在HTML5中，我们可以使用output元素来定义表单元素的输出结果或计算结果。
语法：
举例：
结果：
说明：
output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。
2.2、datalist
在HTML5中，我们可以使用datalist元素来为文本框提供一个可选的列表。
语法：
举例：
结果：
说明：
如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。
3、其他新增元素
Html5除了新增结构元素和表单元素之外，HTML5还增加了大量语义化元素，其中最重要的有以下6个，下面分别做介绍。
3.1、address
在HTML5中，我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。一个页面可以有多个article元素，比如有些页面就有好几篇文章。当address元素应用于article元素时，它一般放在article元素内部的footer元素内，表示该篇文章所有者的地址信息。当然，address元素也可以放于section元素内。
举例1-应用于整个页面：
效果图1：
举例2-应用于article元素：
效果图2：
3.2、time
在HTML5中，我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。
语法：
datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。
举例：
结果：
说明：
在实际开发中，大多数情况下我们是不用datetime属性的。用一句话总结就是：对于time元素的使用，我们不必过于拘泥，想要显示一段有意义的日期时间，用括起来就可以了。
3.3、progress
在HTML5中，我们可以使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。
语法：
max属性表示最大值，value属性表示当前值。对于progress元素来说，它只有max属性，而没有min属性。为什么呢？原因很简单：任何进度条的最小值都是0，因此progress元素默认最小值也是0。此外，max和value必须是0或正数，并且max值必须大于等于value值。
举例1：
结果1：
说明1：
“进度=value/max”，因此虽然两个progress元素的max和value不一致，但是进度是相同的，都是80%。
举例2：
O%
结果2：
说明2：
在这个例子中，我们使用定时器setInterval()来实现进度条的不断增加。当我们点击【显示进度】按钮后，进度条会不断增加，效果如上图所示。在实际开发中，progress元素一般结合上传文件或下载文件操作来显示进度，或者展示一个loading图标，以便增强用户体验。
3.4、meter
在HTML5中，我们可以使用进度条的形式来显示数据所占的比例。
语法：
举例：
结果：
说明：
meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：
meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。
3.5、figure和figcaption
如下图所示“图片+图注”效果，在实际开发中经常可以见到。对于初学者来说，我们很可能使用如下代码来实现：
Html5
但是这种实现方式语义并不好。在HTML5中，引入了figure和figcaption这两个元素来增强图片的语义化。
语法：
