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

第1页,第4章HTML5表单,本章概述本章的学习目标主要内容,第2页,本章概述,表单在网页设计中起到了数据采集的功能，即用户输入的信息主要通过表单来接收，然后提交到服务器。通过使用表单，可以采集访问者的信息，如姓名、性别、年龄、职业、联系方式等，也可以用作调查表、留言板等，从而从浏览器端获取需要的信息。访问者和后台的交互主要通过单击按钮来实现，而与前台的交互则通过输入数据或选择选项来实现。HTML5在表单方面增加了许多功能，如增加input输入类型、表单元素、form属性和input属性等。这些属性主要是在总结以往表单常用操作的基础上提炼而来，以使前端设计人员的工作更加高效。,第3页,本章的学习目标,了解HTML5表单及新增的form属性掌握新增的form元素掌握新增的input类型掌握新增的input属性熟悉表单验证操作,第4页,主要内容,4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结,第5页,4.1新增的form属性,4.1.1autocomplete属性4.1.2novalidate属性,第6页,4.1.1autocomplete属性,autocomplete属性，可以指定on、off和空值（不指定）这3种值。在不进行指定时，使用浏览器的默认值。设置为on值时，可以显式指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素与list属性提供候补输入的数据列表（datalist元素将在后面介绍）。使用datalist元素与list属性提供候补输入的数据列表，在执行自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。autocomplete属性的使用方法如下：,第7页,4.1.2novalidate属性,form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。如果要只取消表单中较少部分内容的验证而不妨碍提交大部分内容，则可以将novalidate属性单独用于form中的这些元素。,第8页,主要内容,4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结,第9页,4.2新增的form元素,4.2.1datalist元素4.2.2keygen元素4.2.3output元素,第10页,4.2.1datalist元素,datalist元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一项预设的项，从而免去了输入的麻烦。该列表由datalist中的option元素创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。在实际使用中，如果要把datalist提供的列表绑定到某输入框，则需要使用输入框的list属性来引用datalist元素的id。,第11页,4.2.2keygen元素,keygen元素是密钥对生成器，主要用于验证。用户提交表单时会生成两个键，一个私钥，一个公钥。其中，私钥存储在客户端，公钥被发送到服务器。公钥可用于验证用户的客户端证书。,第12页,4.2.3output元素,output元素主要用于显示计算结果或脚本输出。,第13页,主要内容,4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结,第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类型,第15页,4.3.1email类型,email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值。如果不是一个有效的E-mail地址，则该输入框不允许提交该表单。,第16页,4.3.2url类型,url类型的input元素提供用于输入url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交。,第17页,4.3.3number类型,number类型的input元素提供用于输入数值的文本框。实际使用中，可以设定对所接受的数字进行限制，例如，规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不符合限制要求，则会出现错误提示。,第18页,4.3.4日期检出器类型,日期检出器(DatePickers)是网页中经常要用到的一种控件。HTML5提供了多个可用于选取日期和时间的输入类型，即6种日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区。,第19页,4.3.5search类型,search类型是HTML5中专门用于搜索的。search类型的input元素提供用于输入搜索关键词的文本框。从外观上看，search类型的input元素和普通的text元素只是稍微有区别。search类型提供的搜索框不只是Google或百度的搜索框，而是任意网页中的任意一个搜索框。,第20页,4.3.6tel类型,tel类型的input元素提供专门用于输入电话号码的文本框，它并不限定只输入数字，因为很多的电话号码还包括其他字符，如“+”、“-”、“（）”、“）”等，比如086,第21页,4.3.7color类型,color类型的input元素提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开调色器面板，方便用户可视化选择一种颜色。,第22页,主要内容,4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结,第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属性,第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属性,第25页,4.4.1form属性,HTML4中，表单内的元素一定要放在表单之中，也就是把表单内的元素嵌入标签中，不得放到这标签之外的其他地方。HTML5打破了这个规定，从属于表单的元素可以放在页面的任何地方，只要在该元素内指定form属性的值为表单的名称即可。,第26页,4.4.2formaction属性,在HTML4中，一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面，HTML5中可以为诸如、等的提交按钮增加不同的formaction属性，使得在单击不同的按钮时可以将表单提交到不同的页面。,第27页,4.4.3formmethod属性,在HTML4中，一个表单内只有一个action属性，用来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。,第28页,4.4.4formenctype属性,HTML4中，表单具有一个enctype属性，用于指定表单发送到服务器之前应该如何对表单内容进行编码。,第29页,4.4.5formtarget属性,在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开需要加载的页面。例如：提交到a1提交到a2,第30页,4.4.6autofocus属性,为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该空间自动获得光标焦点。目前要做到这一点要使用JavaScript，譬如control.focus()。autofocus属性的使用方法如下：一个页面上只能有一个控件具有autofocus属性。,第31页,4.4.7required属性,HTML5中新增的required属性可以应用在大多数输入用元素上。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户必须输入内容。,第32页,4.4.8labels属性,在HTML5中，为所有可使用标签的表单元素，包括非隐藏的input元素、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素，定义一个labels属性，属性值为一个NodeList对象，代码该元素所绑定的标签元素所构成的集合。,第33页,4.4.9control属性,在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。,第34页,4.4.10placeholder属性,placeholder是指当文本框处于未输入状态时显示的输入提示。使用方法如下：,第35页,4.4.11list属性,在HTML5中，为单行文本框增加了一个list属性，该属性的值来源于某个datalist元素。datalist元素在前面已经介绍，这个元素类似于选择框select元素，但是当用户想要设置的值不在列表内时，允许用户自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS将其设置为不显示。,第36页,4.4.12文本框的pattern属性,在HTML5中，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式时，在提交时会对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。,第37页,4.4.13selectionDirection属性,针对input元素与textarea元素，HTML5增加了selectionDirection属性。当用户在这两个元素中庸鼠标选取部分文字时，可以使用该属性来获取选取方向。当正向选取文字时，该属性值为forward，当反方向选取文字时，属性值为backward。当没有选取任何文字时，属性默认为forward。,第38页,4.4.14复选框的indeterminate属性,对复选框checkbox来说，过去只有选中和未选中两种状态。在HTML5中，可以在JavaScript代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”的状态。,第39页,4.4.15height属性与width属性,针对类型为image的input元素，HTML5新增了两个属性：height和width。height用于指定图片按钮中图片的高度；width用于指定图片按钮中图片的宽度。,第40页,4.4.16maxlength属性和wrap属性,HTML5为textarea元素新增了maxlength属性和wrap属性。maxlength属性：使用整型数值进行设置，用于限定textarea元素中可以输入的文字的个数。wrap属性：可指定属性值为soft和hard。当属性值为hard时，如果向textarea元素中输入的文字个数超出使用textarea元素的cols属性所限定的每行中可现实文字个数而导致文字换行时，提交表单时会在换行处加入一个换行标志。当属性值为soft时不加换行标志。当设定wrap属性值为hard时，必须指定cols属性值。,第41页,主要内容,4.1新增的form属性4.2新增的form元素4.3新增的input类型4.4新增的input属性4.5表单验证4.6本章小结,第42页,4.5表单验证,4.5.1自动验证4.5.2取消验证4.5.3显式验证,第43页,4.5.1自动验证,在HTML5中，通过对元素使用属性的方法，可以实现在表单提交时执行的自动验证功能。例如以下的例子，在表单提交时自动验证输入的内容是否为数字，如果不是数字，就会显示错误提示。,第44页,4.5.2取消验证,有两种方法可以取消表单验证：第一种方法是利用form元素的novalidate属性来关闭整个表单验证。第二种方法是，利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效。,第45页,4.5.3显式验证,除了对input元素添加属性进行元素内容有效性的自动验证外，在HTML5中，form元素和input元素都具有一个c