HTML5+CSS3网页设计实例教程-第6章-HTML5表单的应用课件.ppt

《HTML5+CSS3网页设计实例教程-第6章-HTML5表单的应用课件.ppt》由会员分享，可在线阅读，更多相关《HTML5+CSS3网页设计实例教程-第6章-HTML5表单的应用课件.ppt（46页珍藏版）》请在三一办公上搜索。

1、,第6章 HTML5表单的应用,本章概述 本章的学习目标主要内容,第6章 HTML5表单的应用本章概述,第2页,本章概述,几乎每当需要从网站访问者那里收集信息时，都需要使用“表单”(form)。很多在线表单具有与纸质表单很强的相似性。在网上可以创建一个由“表单控件”(form control)组合而成的表单，包含如“文本框”(textbox)、“复选框”(check box)、“选择框”(select box)以及“单选按钮”(radio button)等组成的表单。本章将介绍如何将这些不同种类的每一个控件组合入表单中，用于收集来自网站访问者的所有种类的信息。,第2页本章概述几乎每当需要从网站

2、访问者那里收集信息时，都需要,第3页,本章的学习目标,如何创建表单如何使用不同类型的表单控件用户输入数据的处理如何使表单易于访问如何组织表单内容的结构,第3页本章的学习目标如何创建表单,第4页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第4页主要内容6.1 认识表单,第5页,6.1 认识表单,下图展示的是百度的首页，其中包含了两类表单控件：

3、文本输入：其中可以输入搜索词。提交按钮：向服务器发送表单。本页表单中有一个提交按钮：写着“百度一下”的按钮。,百度首页,第5页6.1 认识表单下图展示的是百度的首页，其中包含了两,第6页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第6页主要内容6.1 认识表单,第7页,6.2 使用元素创建表单,表单位于的元素中。元素还可以包含其他标记，例如

4、段落、标题等。但是，它不允许包含另外一个元素。页面中可以包含任意数量的表单，应该保持元素间相互分离。例如，可以有一个登录表单、一个搜索表单以及一个报纸订阅表单，这些表单可以全部位于同一页面中。如果真的在一个页面中拥有多于一个表单，那么用户可以一次只将一个表单的数据发送给服务器。,第7页6.2 使用元素创建表单表单位于for,第8页,action特性,action特性指明表单提交后对数据的处理。通常，action特性的值是一个页面或程序，位于接收信息的Web服务器中。例如，一个包含用户名和密码的登录表单，用户输入的详细信息被传送到Web服务器中一个以ASP.NET编写的页面，叫做login.as

5、px。这里action特性则如下所示：,第8页action特性action特性指明表单提交后对数据的,第9页,id特性,id特性可以唯一标识页面中的元素。赋予元素一个id特性是一种良好习惯，因为很多表单使用样式表和脚本，就要求使用id特性以识别表单。id特性的值在文档中应该是唯一的，并且还应该遵循id特性的其他取值规则。有时以字符frm作为表单的id和name特性值的起始，并使用值的剩余部分描述表单收集数据的类型，例如，frmLogin或frmSearch。,第9页id特性id特性可以唯一标识页面中的元素。,name特性,name特性是id特性的前任，而且如id特性一样，其取值在文档内应该保持

6、唯一。现在不需要使用这个特性了。不过如果使用了，可以赋予与id特性相同的值。,第10页,name特性name特性是id特性的前任，而且如id特性一样,enctype特性,如果使用HTTP post方法向服务器发送数据，则可以使用enctype特性指定浏览器在将数据发送到服务器之前如何对其进行编码。如果没有使用此特性，则浏览器会使用第一个值。因此，只有在表单允许用户向服务器上传文件（如图片），或用户将可能使用非ASCII字符时，才需要使用该特性。,第11页,enctype特性如果使用HTTP post方法向服务器发送,accept-charset特性,不同语言通过不同的“字符集”(charact

7、er set)或字符组书写。然而，在创建网站时，开发人员不会将网站设计成能够理解所有语言。accept-charset特性背后的思想是，使用该特性可以指定一系列用户能够输入，服务器可以处理的字符编码。该特性的值是一个由空格或逗号分隔的字符集列表。,第12页,accept-charset特性不同语言通过不同的“字符集”,novalidate特性,novalidate特性是一个布尔特性，用以指定表单在提交时是否应该进行校验。如果该特性存在，浏览器则不应该在提交前校验表单。,第13页,novalidate特性novalidate特性是一个布尔特,target特性,target特性指定一个命名窗口或关

8、键字，用于处理表单提交。例如，为在新窗口中处理表单，可以将元素的target特性设置为_blank。,第14页,target特性target特性指定一个命名窗口或关键字，用,autocomplete特性,该特性指明浏览器是否应该自动填写表单值。将之设置为off指明浏览器不应该自动填写任何内容。默认值为on。,第15页,autocomplete特性该特性指明浏览器是否应该自动填写,第16页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与rea

9、donly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第16页主要内容6.1 认识表单,第17页,6.3 元素中表单控件,元素中不同类型的表单控件，用于收集来自网站访问者的信息，包括：文本输入控件、按钮、复选框与单选按钮、选择框、文件选择框、新的HTML5表单元素，如进度条和度量控件、隐藏控件。,第17页6.3 元素中表单控件元素,文本输入控件,“文本输入框”(text input boxes)在很多网页中都会使用。“输入类型”是指，可用于对input元素中的type特性进行设置的一些值，以指定该input元素的输入类型。单行文本输入控件密码输入控件多行文

10、本输入控件,第18页,文本输入控件“文本输入框”(text input boxes,新的HTML5输入控件类型与特性,使用placeholder特性提供示例输入使用autocomplete特性确保用户隐私与安全使用required特性确保信息提供使用autofocus自动获得输入焦点patternlist特性与datalist元素multiplenovalidate与formnovalidateform特性formaction、formenctype、formmethod以及formtarget,第19页,新的HTML5输入控件类型与特性使用placeholder特,按钮,按钮最常被用于提交表

11、单。不过，它们有时也被用于清除或重置表单，甚至是触发客户端脚本。可以通过三种方式创建按钮：使用元素创建按钮使用图片按钮使用元素创建按钮,第20页,按钮的效果,按钮按钮最常被用于提交表单。不过，它们有时也被用于清除或重置,复选框,复选框类似于电灯开关，状态或者是开，或者是关。在被选中时即处于开状态用户可以通过简单单击复选框使其在开与关两种状态间切换。复选框可以单独出现，此时每一个复选框都有自己的名称；或者也可以作为复选框组出现，此时它们共享控件名称，并允许用户为同一属性选择多个值。,第21页,复选框复选框类似于电灯开关，状态或者是开，或者是关。在被选中,单选按钮,单选按钮同样还是使用元素创建，这

12、一次type特性的值应该为radio。例如，下面的单选按钮被用于允许用户选择所希望进行的旅行等级：,第22页,单选按钮的效果,单选按钮单选按钮同样还是使用元素创建，这一次t,选择框,下拉选择框使用户可以从下拉菜单中选择一个条目。下拉选择框可以占用比单选按钮组小得多的空间。下拉选择框还可以作为使用单行文本输入控件又希望限制用户输入选项时的替代方案。使用选择框则可以控制用户能够输入的选项。元素元素创建滚动选择框使用multiple特性选择多个选项使用元素分组选项,第23页,选择框下拉选择框使用户可以从下拉菜单中选择一个条目。下拉选择,文件选择框,如果需要上传文件，则必须使用“文件上传框”(file

13、 upload box)，也被称作“文件选择框”(file select box)。该控件使用元素创建，不过这一次赋予type特性的值应为file：,第24页,文件选择框如果需要上传文件，则必须使用“文件上传框”(fil,隐藏控件,有些时候需要在页面间传递信息而不希望被用户看到。为实现这种功能，可以使用“隐藏表单控件”(hidden form controls)。尽管无法在页面中看到它们，如果查看页面的源码，还是可以从代码中看到它们的值。因此，隐藏控件不要用于不希望用户看到的敏感信息。,第25页,隐藏控件有些时候需要在页面间传递信息而不希望被用户看到。为实,新的HTML5表单元素,使用新的元素

14、跟踪任务完成度使用元素表示一定范围内标量的测量值使用元素及新的元素创建自动完成列表,第26页,新的HTML5表单元素使用新的元素跟踪任,第27页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第27页主要内容6.1 认识表单,6.4 创建一个联系方式表单实例,在本例中，需要结合多种表单控件，为Example Caf构建一个联系方式表单。,第28

15、页,联系方式表单的效果,6.4 创建一个联系方式表单实例在本例中，需要结合多种表单,第29页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第29页主要内容6.1 认识表单,第30页,6.5 使用元素为控件创建标签,如果要为网站创建一个表单，需要为它提供好的标签描述，以使用户能够知道在哪里填写什么样的数据。一些表单控件，如按钮，本身已经具有标签

16、。但对于大多数表单控件而言，必须为其提供标签。对于没有标签的控件，应该使用元素。除了告知用户应该填写何种信息之外，该元素不会对表单产生任何影响。,第30页6.5 使用元素为控件创建标签如果要,第31页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第31页主要内容6.1 认识表单,第32页,6.6 使用及元素组织表单结构,大型表单需要将相关表单

17、控件组织到一起。以及就是用来完成控件分组的元素。元素在表单控件组四周添加边框，以表示它们是相关联元素。元素可以为元素指定标题，它将作为表单控件组的标题显示。在使用时，元素应总是作为元素的第一个子元素出现。,第32页6.6 使用及,第33页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第33页主要内容6.1 认识表单,6.7 焦点,当一个网页中

18、包含了一些链接或表单控件时，可以使用Tab键在它们之间移动，或使用Shift+Tab反向在元素间移动。当在元素间移动时，浏览器通常会为该元素（链接或表单控件）添加某种类型的边框或高亮效果。这被称作焦点。只有用户可以与之交互的元素，如链接及表单控件，可以获得焦点。,第34页,6.7 焦点当一个网页中包含了一些链接或表单控件时，可以使,标签遍历顺序,如果想要控制元素能够获得焦点的顺序，可以使用tabindex特性赋予元素一个0到32767的数字，作为遍历顺序的一部分。每一次用户单击Tab键时，焦点就移动到下一个拥有最大遍历顺序值的元素。同样地，Shift+Tab以相反顺序移动焦点。当用户遍历过文档

19、中所有可以获得焦点的元素之后，焦点可能会被赋予浏览器的其他功能区域，最常见的情况是地址栏。,第35页,标签遍历顺序如果想要控制元素能够获得焦点的顺序，可以使用ta,快捷键,快捷键的作用与键盘快捷方式很类似。快捷键是文档字符集中预计应存在于用户键盘上的一个单一字符。当该键与另一按键一同使用时，浏览器会自动跳转到该区域。快捷键使用accesskey特性定义。该特性的值是希望用户按下的字符，即键盘上的按键，与之结合的其他按键取决于操作系统及浏览器。,第36页,快捷键快捷键的作用与键盘快捷方式很类似。快捷键是文档字符集中,第37页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控

20、件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第37页主要内容6.1 认识表单,第38页,6.8 disabled与readonly控件,可以带有disabled和readonly特性的元素：readonly特性防止用户更改表单控件自身的值。但仍然可以通过脚本修改。任何readonly控件的名称与值仍将被发送至服务器。disabled特性会禁用表单控件或元素中的表单控件组，从而使用户无法更改。可以使用脚本重新激活

21、控件，但除非控件被重新激活，否则其名称与值不会被发送至服务器。,第38页6.8 disabled与readonly控件可以,第39页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第39页主要内容6.1 认识表单,6.9 向服务器发送表单数据,当浏览器请求一个网页以及当服务器向浏览器发送回一个页面时，所使用的是“超文本传输协议”(HyperTe

22、xt Transfer Protocol，HTTP)。浏览器向服务器发送表单数据能够使用的有两种方法：HTTP get和HTTP post。在form元素中可以使用method特性指定使用哪一种方法。,第40页,6.9 向服务器发送表单数据当浏览器请求一个网页以及当服务,HTTP get,在使用HTTP get方法向服务器发送表单数据时，表单数据被附加在元素中由action特性指定的URL尾部。表单数据与URL之间使用问号分隔。在问号之后是各表单控件的“名称/值”对。每个“名称/值”对之间使用与符号&分隔。,第41页,HTTP get在使用HTTP get方法向服务器发送表单数,HTTP po

23、st方法,在使用HTTP post方法向服务器发送来自表单的数据时，表单数据将在HTTP头部中透明地传送。尽管你无法看到这些头部信息，但严格地说，它们自身也是不安全的。如果发送如信用卡细节之类的敏感信息，数据应该在“安全套接字层”(Secure Sockets Layer，SSL)之下发送，同时还应被加密。,第42页,HTTP post方法在使用HTTP post方法向服务器发,第43页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与rea

24、donly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第43页主要内容6.1 认识表单,6.10 创建更有用的表单字段,重新创建联系方式表单，使用本章后半部分学到的技术添加新的字段并使其更加可用。,第44页,联系方式表单,6.10 创建更有用的表单字段重新创建联系方式表单，使用本,第45页,主要内容,6.1 认识表单6.2 使用元素创建表单6.3 元素中表单控件6.4 创建一个联系方式表单实例6.5 使用元素为控件创建标签6.6 使用及元素组织表单结构6.7 焦点6.8 disabled与readonly控件6.9 向服务器发送表单数据6.10 创建更有用的表单字段6.11 本章小结,第45页主要内容6.1 认识表单,6.11 本章小结,本章全面讲述了创建在线表单的世界，对很多网站而言这都是至关重要的部分。在使用表单控件创建了一个表单之后，需要确保为每个元素都恰当地添加了标签，从而用户可以了解应该填写何种信息，或者应该做何种选择。最后，讲解了何时应该使用HTTP get或post方法将表单数据发送至服务器。,第46页,6.11 本章小结本章全面讲述了创建在线表单的世界，对很多,