bankeralgorithm.jar中没有主清单属性_26 HTML5中新增的表单控件

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

前面两篇图文介绍的表单控件，都是HTML4版本中就已经存在的表单控件，不过它们同样在HTML5规范中被兼容，而今天这一篇图文介绍的这些表单控件，都是在HTML5中新增的。

在HTML5中新增的表单控件，主要有下图所示的这些，input标签的type属性不同的值，表示不同的控件。

现在我在项目文件夹中新创建了一个叫"HTML5新增的表单控件.html"的网页，

我在这个网页中演示新增控件的代码。网页结构的代码相信小伙伴们都很熟悉了，我这里就只写HTML5新增表单控件的代码。

颜色选择控件

颜色选择控件：

在浏览器中显示效果如下：

当你在浏览器中点击那个黑色的颜色选择按钮时，就会弹出选择颜色的对话框：

这个颜色选择对话框，会根据电脑系统、手机系统的不同而不同。

日期选择控件

日期选择控件：

在浏览器中显示效果如下：

当你点击日期选择控件时，会弹出让你选择年月日的对话框：

时间选择控件

时间选择控件：

在浏览器中显示效果如下：

当你点击时间选择控件时，可以选择几点几分：

电子邮件输入控件

电子邮件输入控件：

在浏览器中显示效果如下：

如果仅仅是写了电子邮件输入控件的代码，你会发现在浏览器中，显示效果和单行文本框好像没什么区别。

但是，实际上HTML5是非常强大的，HTML5的表单控件比包括HTML4之前的表单控件，都做了很大的增强。

当你给这些表单控件外面加上

标签，再加一个提交按钮，并且当你点击提交按钮时，HTML5都会自动对用户在表单控件中输入的内容进行校验。

比如如下代码：

颜色选择控件：

日期选择控件：

时间选择控件：

电子邮件输入控件：

在浏览器中，当你在电子邮件输入控件中随便输入内容，比如我输入了123，这是不符合电子邮件规范的，比如123@qq.com、123@163.com等，这种形式的单子邮箱地址，才是符合规范的。

当你输入了不符合规范的内容并且进行提交时，HTML5就会弹出提示信息，告诉你你填写的内容有什么问题，并且阻止这次提交，这就是HTML5表单的自动校验。

比如我输入了123，提交时就会弹出如下的提示信息：

只有当你输入的东西是正确的符合规范的，才会给你通过。

HTML5是不是很强大？当你代码中使用的是HTML5的电子邮件输入控件，用户在输入框输入电子邮件地址时，就必须是电子邮件的语法才行，否则是提交不了的。

当然，HTML5还提供了其他的校验规则，比如你在一个普通的文本框上面写一个required属性，required属性就表示这个文本框必须填写。当用户没有在这个文本框填写内容，就提交的话，就会弹出报警，

比如下面的代码：

颜色选择控件：

日期选择控件：

时间选择控件：

电子邮件输入控件：

请输入密码：

请输入密码后面的文本框，上面写了required属性，那么在浏览器中，如果你不在这个文本框里面填写内容，就会报警：

提示你"请填写此字段"。

数字输入控件

请输入数字：

数字输入控件，type的值是number，min属性表示输入的数字最小值是多少，max属性表示输入的数字最大值是多少。

比如我上面min="10'，max="100"，就表示这个数字输入框允许输入的数字，在10-100的范围之间。如果输入的数字不符合这个范围，提交时就会报警。

比如我在这个数字输入框输入1，就会弹出提示信息：

数字输入框，在电商网站上会经常看到，你要购买的东西，选择多少数量，就是数字输入控件实现的。

拖拽条控件

拖拽条：

拖拽条控件，是把input标签的type属性值，设为range，拖拽条也有min和max属性，分别表示拖拽的最小和最大值。至于拖拽的具体数字，需要结合JavaScript去实现，现在先了解到这就行。

搜索框控件

搜索：

搜索框控件，是把input标签的type属性值，设为search。

搜索框控件如果不输入内容，在浏览器中显示效果和普通的文本框看起来是一样的，只有当你输入内容时，就会出现取消按钮，也就是搜索框最右边会出现一个x。

搜索框并不能天然的实现搜索功能，需要后端开发工程师编写程序才能实现。

网址输入控件

请输入网址：

网址输入控件，是把input标签的type属性值，设为url。

网址输入控件，在浏览器中显示效果跟文本框差不多，但是当你点提交按钮时，它也是会被HTML5校验的。当你输入的网址格式不正确时，会报警。

网址输入控件，只有输入以http://打头的网址，提交时才能通过校验。

以上HTML5新增的input控件，电脑上的浏览器普遍兼容到ie9，而在手机上，兼容性是非常好的。

控件

控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。

控件的示例代码：

说明：

控件由两部分组成，一部分是input文本输入框，另一部分是datalist标签，以及它里面的option标签组成的备选项清单。

data就是数据，list就是列表，datalist就是数据列表，也就是备选数据项清单。

实际上就是把一个input输入框，和标签实现的清单绑定起来，当用户在输入框中输入内容时，如果输入的文字跟清单中的选项的某个文字相同，输入框下面就会智能感应出带有这个文字的选项，方便用户选择，这样就为用户节省了打字量和时间。

在控件中，input标签上有一个list属性，datalist标签上有一个id属性，这个input标签上的list属性的值，必须和datalist标签上的id属性的值相同，才会实现input输入框和datalist备选项清单的绑定。只有它们绑定了，才能实现智能感应。

注：

option标签可以写成双标签，也可以写成单标签。

一般写成单标签形式，比较省事。

比如，双标签形式的备选项这样写：

广东

而单标签形式的备选项这样写：

接下来我上代码演示一下：

请输入省份：

在浏览器中，当我在输入框中输入湖这个字，就会自动的智能感应出所有带湖字的选项供我选择，如下图：

以上就是HTML5新增的表单控件，这些表单控件都得到了功能增强，用起来非常方便。

下面我把今天完整的代码贴出来：

    Document        

颜色选择控件：

日期选择控件：

时间选择控件：

电子邮件输入控件：

请输入密码：

请输入数字：

拖拽条：

搜索：

请输入网址：

请输入省份：

一定要自己动手敲代码实现一遍，感受实际效果。

补充说明：在vscode中输入input标签时，会默认把它的name属性和id属性都写上去，这两个属性用不到的时候，就可以把它们删掉。我懒得删，就给它们空值，没什么影响。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！