实验7 HTML5表单一、简介 1、内容：HTML5表单元素、表单属性、输入类型。二、具体 1、HTML5表单元素表单：一个容器，用来收集客户端要提交到服务端的信息。 datalist元素：用于为文本框提供一个可供选择的列表。可以用list属性将数据列表绑定到一个文本域。一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入文本。例子： What's your favorite color? 效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587868304247) 2、HTML表单新增属性 1）autocomplete属性：表单是否启动自动完成。类型：text, search, url, telephone, email, password, datepickers, range 及 color 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587868495327) 2）autofocus：页面加载时，域自动获得焦点。例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587868577279) 3）form：输入域所属的一个或多个表单。例子：

下面的输入域在 form 元素之外，但仍然是表单的一部分，也就是说提交按钮会把 first name 和 last name的值都提交。

Last name: 效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587868650201) 4）multiple：输入域可选择多个值，适用于标签email和file。例子： 5）novalidate：提交表单不应验证form或input域。例子： 6）pattern属性：正则表达式适用：标签：text, search, url, telephone, email 及 password。例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869081411) 7）placeholder：提示例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869156514) 8）required：提交之前填写输入域不能为空。适用：标签-text, search, url, telephone, email, password, date pickers, number, checkbox, radio 及 file。例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869252972) 3、HTML5输入类型 1）input--mail 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869412295) 2）input--url 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869442354) 3）input-number 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869514716) 4）input-range 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869544600) 5）input-Date Pikers 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869576068) 6）input-color 例子：效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200426-1587869599282) 三、小结本节主要学习了HTML的表达元素、表单属性、输入类型。四、参考正则表达式手册：https://tool.oschina.net/uploads/apidocs/jquery/regexp.html

“HTML5 基础教程”实验报告