HTML5+CSS3网页设计基础教程第4章 HTML5表单

HTML5+CSS3网页设计基础教程第4章HTML5表单第1页第4章HTML5表单本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第4章HTML5表单第2页本章概述表单在网页设计中起到了数据采集的功能，即用户输入的信息主要通过表单来接收，然后提交到服务器。通过使用表单，可以采集访问者的信息，如姓名、性别、年龄、职业、联系方式等，也可以用作调查表、留言板等，从而从浏览器端获取需要的信息。访问者和后台的交互主要通过单击按钮来实现，而与前台的交互则通过输入数据或选择选项来实现。HTML5在表单方面增加了许多功能，如增加input输入类型、表单元素、form属性和input属性等。这些属性主要是在总结以往表单常用操作的基础上提炼而来，以使前端设计人员的工作更加高效。HTML5+CSS3网页设计基础教程第4章HTML5表单第3页本章的学习目标●了解HTML5表单及新增的form属性●掌握新增的form元素●掌握新增的input类型●掌握新增的input属性●熟悉表单验证操作HTML5+CSS3网页设计基础教程第4章HTML5表单第4页主要内容4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结HTML5+CSS3网页设计基础教程第4章HTML5表单第5页4.1新增的form属性4.1.1autocomplete属性4.1.2novalidate属性HTML5+CSS3网页设计基础教程第4章HTML5表单第6页4.1.1autocomplete属性autocomplete属性，可以指定on、off和空值（不指定）这3种值。在不进行指定时，使用浏览器的默认值。设置为on值时，可以显式指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素与list属性提供候补输入的数据列表（datalist元素将在后面介绍）。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方法如下：inputtype=textname=greetingautocomplete=onlist=greetings/HTML5+CSS3网页设计基础教程第4章HTML5表单第7页4.1.2novalidate属性form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。如果要只取消表单中较少部分内容的验证而不妨碍提交大部分内容，则可以将novalidate属性单独用于form中的这些元素。HTML5+CSS3网页设计基础教程第4章HTML5表单第8页主要内容4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结HTML5+CSS3网页设计基础教程第4章HTML5表单第9页4.2新增的form元素4.2.1datalist元素4.2.2keygen元素4.2.3output元素HTML5+CSS3网页设计基础教程第4章HTML5表单第10页4.2.1datalist元素datalist元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一项预设的项，从而免去了输入的麻烦。该列表由datalist中的option元素创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。在实际使用中，如果要把datalist提供的列表绑定到某输入框，则需要使用输入框的list属性来引用datalist元素的id。HTML5+CSS3网页设计基础教程第4章HTML5表单第11页4.2.2keygen元素keygen元素是密钥对生成器，主要用于验证。用户提交表单时会生成两个键，一个私钥，一个公钥。其中，私钥存储在客户端，公钥被发送到服务器。公钥可用于验证用户的客户端证书。HTML5+CSS3网页设计基础教程第4章HTML5表单第12页4.2.3output元素output元素主要用于显示计算结果或脚本输出。HTML5+CSS3网页设计基础教程第4章HTML5表单第13页主要内容4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结HTML5+CSS3网页设计基础教程第4章HTML5表单第14页4.3新增的input类型4.3.1email类型4.3.2url类型4.3.3number类型4.3.4日期检出器类型4.3.5search类型4.3.6tel类型4.3.7color类型HTML5+CSS3网页设计基础教程第4章HTML5表单第15页4.3.1email类型email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。如果不是一个有效的E-mail地址，则该输入框不允许提交该表单。inputtype=emailname=email_address/HTML5+CSS3网页设计基础教程第4章HTML5表单第16页4.3.2url类型url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。inputtype=urlname=url_info/HTML5+CSS3网页设计基础教程第4章HTML5表单第17页4.3.3number类型number类型的input元素提供用于输入数值的文本框。实际使用中，可以设定对所接受的数字进行限制，例如，规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不符合限制要求，则会出现错误提示。inputtype=numbername=contentmin=1max=100step=5/HTML5+CSS3网页设计基础教程第4章HTML5表单第18页4.3.4日期检出器类型日期检出器(DatePickers)是网页中经常要用到的一种控件。HTML5提供了多个可用于选取日期和时间的输入类型，即6种日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区。输入类型HTML代码功能说明dateinputtype=date选取日、月、年monthinputtype=month选取月、年weekinputtype=week选取周和年timeinputtype=time选取时间，包括小时和分钟datetimeinputtype=datetime选取时间、日、月、年（UTC时间）datetime-localinputtype=datetime-local选取时间、日、月、年（本地时间）HTML5+CSS3网页设计基础教程第4章HTML5表单第19页4.3.5search类型search类型是HTML5中专门用于搜索的。search类型的input元素提供用于输入搜索关键词的文本框。从外观上看，search类型的input元素和普通的text元素只是稍微有区别。search类型提供的搜索框不只是Google或百度的搜索框，而是任意网页中的任意一个搜索框。inputtype=searchname=content/HTML5+CSS3网页设计基础教程第4章HTML5表单第20页4.3.6tel类型tel类型的input元素提供专门用于输入电话号码的文本框，它并不限定只输入数字，因为很多的电话号码还包括其他字符，如“+”、“-”、“（）”、“）”等，比如086-010-62349797。inputtype=telname=content/HTML5+CSS3网页设计基础教程第4章HTML5表单第21页4.3.7color类型color类型的input元素提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开调色器面板，方便用户可视化选择一种颜色。inputtype=colorname=content/HTML5+CSS3网页设计基础教程第4章HTML5表单第22页主要内容4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结HTML5+CSS3网页设计基础教程第4章HTML5表单第23页4.4新增的input属性4.4.41form属性4.4.2formaction属性4.4.3formmethod属性4.4.4formenctype属性4.4.5formtarget属性4.4.6autofocus属性4.4.7required属性4.4.8labels属性4.4.9control属性HTML5+CSS3网页设计基础教程第4章HTML5表单第24页4.4新增的input属性4.4.10placeholder属性4.4.11list属性4.4.12文本框的pattern属性4.4.13selectionDirection属性4.4.14复选框的indeterminate属性4.4.15height属性与width属性4.4.16maxlength属性和wrap属性HTML5+CSS3网页设计基础教程第4章HTML5表单第25页4.4.1form属性HTML4中，表单内的元素一定要放在表单之中，也就是把表单内的元素嵌入form/form标签中，不得放到这标签之外的其他地方。HTML5打破了这个规定，从属于表单的元素可以放在页面的任何地方，只要在该元素内指定form属性的值为表单的名称即可。HTML5+CSS3网页设计基础教程第4章HTML5表单第26页4.4.2formaction属性在HTML4中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，HTML5中可以为诸如inputtype=image、inputtype=button、inputtype=submit等的提交按钮增加不同的formaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。HTML5+CSS3网页设计基础教程第4章HTML5表单第27页4.4.3formmethod属性在HTML4中，一个表单内只有一个action属性，用来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。HTML5+CSS3网页设计基础教程第4章HTML5表单第28页4.4.4formenctype属性HTML4中，表单具有一个enctype属性，用于指定表单发送到服务器之前应该如何对表单内容进行编码。属性值说明application/x-在发送前编码所有字符，当表单元素的action属性值为get时，浏览器用x-的编码方式把表单数据转换成一个字符串，形如?name=value1&name2=value2…..然后把这个字符串添加到提交的目标URL地址之后，使其成为新目标URL的地址该属性值为表单元素的enctype属性的默认属性值multipart/form-data不对字符编码。在使用包含文件上传控件的元素使，表单的编码方式必须是这个text/plain表单数据中的空格被转换为加号，但不对表单数据中的特殊字符进行编码HTML5+CSS3网页设计基础教程第4章HTML5表单第29页4.4.5formtarget属性在HTML5中，可以对多个提交按钮分别使用formtarget属性来