1、HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第第6章章 HTML5表单的应用表单的应用本章概述 本章的学习目标主要内容HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第2页本章概述本章概述l几乎每当需要从网站访问者那里收集信息时，都几乎每当需要从网站访问者那里收集信息时，都需要使用需要使用“表单表单”(form)。l很多在线表单具有与纸质表单很强的相似性。在很多在线表单具有与纸质表单很强的相似性。在网上可以创建一个由网上可以创建一个由“表单控件表单控件”(form control)组合而成的表单，包含如组合而成的表单，包含如“文本框文本框”(textbox)
2、、“复选框复选框”(check box)、“选择框选择框”(select box)以及以及“单选按钮单选按钮”(radio button)等组成的等组成的表单。本章将介绍如何将这些不同种类的每一个表单。本章将介绍如何将这些不同种类的每一个控件组合入表单中，用于收集来自网站访问者的控件组合入表单中，用于收集来自网站访问者的所有种类的信息。所有种类的信息。HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第3页本章的学习目标本章的学习目标l如何创建表单如何创建表单l如何使用不同类型的表单控件如何使用不同类型的表单控件l用户输入数据的处理用户输入数据的处理l如何使表单易于访问如何使表单
3、易于访问l如何组织表单内容的结构如何组织表单内容的结构HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第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 本章小结本章小结HTML
4、5+CSS3网页设计实例教程第6章 HTML5表单的应用第5页6.1 认识表单认识表单l下图展示的是百度的首页，其中包含了两类表单控下图展示的是百度的首页，其中包含了两类表单控件：件：l文本输入：其中可以输入搜索词。文本输入：其中可以输入搜索词。l提交按钮：向服务器发送表单。本页表单中有一个提交按钮：向服务器发送表单。本页表单中有一个提交按钮：写着提交按钮：写着“百度一下百度一下”的按钮。的按钮。百度首页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第6页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4
5、 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第7页6.2 使用使用元素创建表单元素创建表单l表单位于表单位于的元素中。的元素中。元素还可以元素还可以包含其他标记，例如段落、标题等。但是，它不包含其他标记，例如段落、标题等。但是，它不允
6、许包含另外一个允许包含另外一个元素。页面中可以包含元素。页面中可以包含任意数量的表单，应该保持任意数量的表单，应该保持元素间相互分元素间相互分离。例如，可以有一个登录表单、一个搜索表单离。例如，可以有一个登录表单、一个搜索表单以及一个报纸订阅表单，这些表单可以全部位于以及一个报纸订阅表单，这些表单可以全部位于同一页面中。如果真的在一个页面中拥有多于一同一页面中。如果真的在一个页面中拥有多于一个表单，那么用户可以一次只将一个表单的数据个表单，那么用户可以一次只将一个表单的数据发送给服务器。发送给服务器。HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第8页action特性特性la
7、ction特性指明表单提交后对数据的处理。通常特性指明表单提交后对数据的处理。通常，action特性的值是一个页面或程序，位于接收特性的值是一个页面或程序，位于接收信息的信息的Web服务器中。服务器中。l例如，一个包含用户名和密码的登录表单，用户例如，一个包含用户名和密码的登录表单，用户输入的详细信息被传送到输入的详细信息被传送到Web服务器中一个以服务器中一个以ASP.NET编写的页面，叫做编写的页面，叫做login.aspx。这里。这里action特性则如下所示：特性则如下所示：HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第9页id特性特性lid特性可以唯一标识页面中的
8、特性可以唯一标识页面中的元素。赋予元素。赋予元素一个元素一个id特性是一种良好习惯，因为很特性是一种良好习惯，因为很多表单使用样式表和脚本，就要求使用多表单使用样式表和脚本，就要求使用id特性以特性以识别表单。识别表单。lid特性的值在文档中应该是唯一的，并且还应该特性的值在文档中应该是唯一的，并且还应该遵循遵循id特性的其他取值规则。有时以字符特性的其他取值规则。有时以字符frm作为作为表单的表单的id和和name特性值的起始，并使用值的剩余特性值的起始，并使用值的剩余部分描述表单收集数据的类型，例如，部分描述表单收集数据的类型，例如，frmLogin或或frmSearch。HTML5+CS
9、S3网页设计实例教程第6章 HTML5表单的应用name特性特性lname特性是特性是id特性的前任，而且如特性的前任，而且如id特性特性一样，其取值在文档内应该保持唯一。现一样，其取值在文档内应该保持唯一。现在不需要使用这个特性了。不过如果使用在不需要使用这个特性了。不过如果使用了，可以赋予与了，可以赋予与id特性相同的值。特性相同的值。第10页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用enctype特性特性l如果使用如果使用HTTP post方法向服务器发送数方法向服务器发送数据，则可以使用据，则可以使用enctype特性指定浏览器在特性指定浏览器在将数据发送到服务器
10、之前如何对其进行编将数据发送到服务器之前如何对其进行编码。码。l如果没有使用此特性，则浏览器会使用第如果没有使用此特性，则浏览器会使用第一个值。因此，只有在表单允许用户向服一个值。因此，只有在表单允许用户向服务器上传文件（如图片），或用户将可能务器上传文件（如图片），或用户将可能使用非使用非ASCII字符时，才需要使用该特性。字符时，才需要使用该特性。第11页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用accept-charset特性特性l不同语言通过不同的不同语言通过不同的“字符集字符集”(character set)或字符组书写。然而，在创建网站时，或字符组书写。然而，
11、在创建网站时，开发人员不会将网站设计成能够理解所有开发人员不会将网站设计成能够理解所有语言。语言。accept-charset特性背后的思想是特性背后的思想是，使用该特性可以指定一系列用户能够输，使用该特性可以指定一系列用户能够输入，服务器可以处理的字符编码。该特性入，服务器可以处理的字符编码。该特性的值是一个由空格或逗号分隔的字符集列的值是一个由空格或逗号分隔的字符集列表。表。第12页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用novalidate特性特性lnovalidate特性是一个布尔特性，用以指特性是一个布尔特性，用以指定表单在提交时是否应该进行校验。如果定表单在
12、提交时是否应该进行校验。如果该特性存在，浏览器则不应该在提交前校该特性存在，浏览器则不应该在提交前校验表单。验表单。l第13页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用target特性特性ltarget特性指定一个命名窗口或关键字，用特性指定一个命名窗口或关键字，用于处理表单提交。于处理表单提交。l例如，为在新窗口中处理表单，可以将例如，为在新窗口中处理表单，可以将元素的元素的target特性设置为特性设置为_blank。l第14页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用autocomplete特性特性l该特性指明浏览器是否应该自动填写表单值该特性
13、指明浏览器是否应该自动填写表单值。将之设置为。将之设置为off指明浏览器不应该自动填指明浏览器不应该自动填写任何内容。默认值为写任何内容。默认值为on。l第15页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第16页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表
14、单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第17页6.3 元素中表单控件元素中表单控件l元素中不同类型的表单控件，用于收元素中不同类型的表单控件，用于收集来自网站访问者的信息，包括：文本输入集来自网站访问者的信息，包括：文本输入控件、按钮、复选框与单选按钮、选择框、控件、按钮、复选框与单选按钮、选择框、文件选择框、新的文件选择框、新的HTML5表单元素，如进度表单元素，如进度条和度量控件、隐藏控件。条和度量控件、隐藏控件。HTML5+CSS3网页设计实例教程第6章 HTM
15、L5表单的应用文本输入控件文本输入控件l“文本输入框文本输入框”(text input boxes)在很多网在很多网页中都会使用。页中都会使用。“输入类型输入类型”是指，可用于是指，可用于对对input元素中的元素中的type特性进行设置的一些值特性进行设置的一些值，以指定该，以指定该input元素的输入类型。元素的输入类型。单行文本输入控件单行文本输入控件密码输入控件密码输入控件多行文本输入控件多行文本输入控件第18页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用新的新的HTML5输入控件类型与特性输入控件类型与特性l使用使用placeholder特性提供示例输入特性提供示
16、例输入l使用使用autocomplete特性确保用户隐私与安全特性确保用户隐私与安全l使用使用required特性确保信息提供特性确保信息提供l使用使用autofocus自动获得输入焦点自动获得输入焦点lpatternllist特性与特性与datalist元素元素lmultiplelnovalidate与与formnovalidatelform特性特性lformaction、formenctype、formmethod以及以及formtarget第19页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用按钮按钮l按钮最常被用于提交表单。不过，它们有时按钮最常被用于提交表单。不过，
17、它们有时也被用于清除或重置表单，甚至是触发客户也被用于清除或重置表单，甚至是触发客户端脚本。可以通过三种方式创建按钮：端脚本。可以通过三种方式创建按钮：使用使用元素创建按钮元素创建按钮使用图片按钮使用图片按钮使用使用元素创建按钮元素创建按钮第20页按钮的效果HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用复选框复选框l复选框类似于电灯开关，状态或者是开，复选框类似于电灯开关，状态或者是开，或者是关。在被选中时即处于开状态或者是关。在被选中时即处于开状态用户可以通过简单单击复选框使其在开与用户可以通过简单单击复选框使其在开与关两种状态间切换。关两种状态间切换。l复选框可以单独出现
18、，此时每一个复选框复选框可以单独出现，此时每一个复选框都有自己的名称；或者也可以作为复选框都有自己的名称；或者也可以作为复选框组出现，此时它们共享控件名称，并允许组出现，此时它们共享控件名称，并允许用户为同一属性选择多个值。用户为同一属性选择多个值。第21页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用单选按钮单选按钮l单选按钮同样还是使用单选按钮同样还是使用元素创建，元素创建，这一次这一次type特性的值应该为特性的值应该为radio。例如，。例如，下面的单选按钮被用于允许用户选择所希下面的单选按钮被用于允许用户选择所希望进行的旅行等级：望进行的旅行等级：第22页单选按钮的
19、效果HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用选择框选择框l下拉选择框使用户可以从下拉菜单中选择下拉选择框使用户可以从下拉菜单中选择一个条目。下拉选择框可以占用比单选按一个条目。下拉选择框可以占用比单选按钮组小得多的空间。下拉选择框还可以作钮组小得多的空间。下拉选择框还可以作为使用单行文本输入控件又希望限制用户为使用单行文本输入控件又希望限制用户输入选项时的替代方案。使用选择框则可输入选项时的替代方案。使用选择框则可以控制用户能够输入的选项。以控制用户能够输入的选项。元素元素元素元素创建滚动选择框创建滚动选择框使用使用multiple特性选择多个选项特性选择多个选项使用使
20、用元素分组选项元素分组选项第23页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用文件选择框文件选择框l如果需要上传文件，则必须使用如果需要上传文件，则必须使用“文件上文件上传框传框”(file upload box)，也被称作，也被称作“文件文件选择框选择框”(file select box)。该控件使用。该控件使用元素创建，不过这一次赋予元素创建，不过这一次赋予type特特性的值应为性的值应为file：第24页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用隐藏控件隐藏控件l有些时候需要在页面间传递信息而不希望有些时候需要在页面间传递信息而不希望被用户看到。
21、为实现这种功能，可以使用被用户看到。为实现这种功能，可以使用“隐藏表单控件隐藏表单控件”(hidden form controls)。尽管无法在页面中看到它们，如果查看。尽管无法在页面中看到它们，如果查看页面的源码，还是可以从代码中看到它们页面的源码，还是可以从代码中看到它们的值。因此，隐藏控件不要用于不希望用的值。因此，隐藏控件不要用于不希望用户看到的敏感信息。户看到的敏感信息。第25页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用新的新的HTML5表单元素表单元素l使用新的使用新的元素跟踪任务完成度元素跟踪任务完成度l使用使用元素表示一定范围内标量的元素表示一定范围内标量
22、的测量值测量值l使用使用元素及新的元素及新的元素创元素创建自动完成列表建自动完成列表第26页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第27页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表
23、单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用6.4 创建一个联系方式表单实例创建一个联系方式表单实例l在本例中，需要结合多种表单控件，为在本例中，需要结合多种表单控件，为Example Caf构建一个联系方式表单。构建一个联系方式表单。第28页 联系方式表单的效果HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第29页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为
24、控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第30页6.5 使用使用元素为控件创建标签元素为控件创建标签l如果要为网站创建一个表单，需要为它提如果要为网站创建一个表单，需要为它提供好的标签描述，以使用户能够知道在哪供好的标签描述，以使用户能够知道在哪里填写什么样的数据。一些表单控件，如里填写什么样的数据。一些表单控件，如按
25、钮，本身已经具有标签。但对于大多数按钮，本身已经具有标签。但对于大多数表单控件而言，必须为其提供标签。对于表单控件而言，必须为其提供标签。对于没有标签的控件，应该使用没有标签的控件，应该使用元素。元素。除了告知用户应该填写何种信息之外，该除了告知用户应该填写何种信息之外，该元素不会对表单产生任何影响。元素不会对表单产生任何影响。HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第31页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件
26、创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第32页6.6 使用使用及及元素组元素组织表单结构织表单结构l大型表单需要将相关表单控件组织到一起。大型表单需要将相关表单控件组织到一起。以及以及就是用来完成控件就是用来完成控件分组的元素。分组的元素。元素在表单控件组四周添加边框，以表示它们是相关联元素在表单控件组
27、四周添加边框，以表示它们是相关联元素。元素。元素可以为元素可以为元素指定标题，它将作为表单控件元素指定标题，它将作为表单控件组的标题显示。在使用时，组的标题显示。在使用时，元素应总是作为元素应总是作为元元素的第一个子元素出现。素的第一个子元素出现。HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第33页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.
28、7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用6.7 焦点焦点l当一个网页中包含了一些链接或表单控件时当一个网页中包含了一些链接或表单控件时，可以使用，可以使用Tab键在它们之间移动，或使用键在它们之间移动，或使用Shift+Tab反向在元素间移动。当在元素间反向在元素间移动。当在元素间移动时，浏览器通常会为该元素（链接或表移动时，浏览器通常会为该元素（链接或表单控件）添加某种类型的边框或高
29、亮效果。单控件）添加某种类型的边框或高亮效果。这被称作焦点。这被称作焦点。l只有用户可以与之交互的元素，如链接及表只有用户可以与之交互的元素，如链接及表单控件，可以获得焦点。单控件，可以获得焦点。第34页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用标签遍历顺序标签遍历顺序l如果想要控制元素能够获得焦点的顺序，如果想要控制元素能够获得焦点的顺序，可以使用可以使用tabindex特性赋予元素一个特性赋予元素一个0到到32767的数字，作为遍历顺序的一部分。每的数字，作为遍历顺序的一部分。每一次用户单击一次用户单击Tab键时，焦点就移动到下一键时，焦点就移动到下一个拥有最大遍历顺
30、序值的元素。同样地，个拥有最大遍历顺序值的元素。同样地，Shift+Tab以相反顺序移动焦点。当用户遍以相反顺序移动焦点。当用户遍历过文档中所有可以获得焦点的元素之后历过文档中所有可以获得焦点的元素之后，焦点可能会被赋予浏览器的其他功能区，焦点可能会被赋予浏览器的其他功能区域，最常见的情况是地址栏。域，最常见的情况是地址栏。第35页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用快捷键快捷键l快捷键的作用与键盘快捷方式很类似。快捷快捷键的作用与键盘快捷方式很类似。快捷键是文档字符集中预计应存在于用户键盘上键是文档字符集中预计应存在于用户键盘上的一个单一字符。当该键与另一按键一同
31、使的一个单一字符。当该键与另一按键一同使用时，浏览器会自动跳转到该区域。用时，浏览器会自动跳转到该区域。l快捷键使用快捷键使用accesskey特性定义。该特性的特性定义。该特性的值是希望用户按下的字符，即键盘上的按键值是希望用户按下的字符，即键盘上的按键，与之结合的其他按键取决于操作系统及浏，与之结合的其他按键取决于操作系统及浏览器。览器。第36页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第37页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.
32、5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第38页6.8 disabled与与readonly控件控件l可以带有可以带有disabled和和readonly特性的元素：特性的元素：readonly特性防止用户更改表单控件自身的值。但仍然可以通过脚特性防止用户更改表单控件自身的值。但仍然
33、可以通过脚本修改。任何本修改。任何readonly控件的名称与值仍将被发送至服务器。控件的名称与值仍将被发送至服务器。disabled特性会禁用表单控件或特性会禁用表单控件或元素中的表单控件组，从元素中的表单控件组，从而使用户无法更改。可以使用脚本重新激活控件，但除非控件被重而使用户无法更改。可以使用脚本重新激活控件，但除非控件被重新激活，否则其名称与值不会被发送至服务器。新激活，否则其名称与值不会被发送至服务器。HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第39页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表
34、单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用6.9 向服务器发送表单数据向服务器发送表单数据l当浏览器请求一个网页以及当服务器向浏当浏览器请求一个网页以及当服务器向浏览器发送回一个页面时，所使用的是览器发送回一个页面时，所
35、使用的是“超超文本传输协议文本传输协议”(HyperText Transfer Protocol，HTTP)。l浏览器向服务器发送表单数据能够使用的浏览器向服务器发送表单数据能够使用的有两种方法：有两种方法：HTTP get和和HTTP post。在。在form元素中可以使用元素中可以使用method特性指定使用特性指定使用哪一种方法。哪一种方法。第40页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用HTTP getl在使用在使用HTTP get方法向服务器发送表单数方法向服务器发送表单数据时，表单数据被附加在据时，表单数据被附加在元素中由元素中由action特性指定的特性指
36、定的URL尾部。尾部。l表单数据与表单数据与URL之间使用问号分隔。在问之间使用问号分隔。在问号之后是各表单控件的号之后是各表单控件的“名称名称/值值”对。每对。每个个“名称名称/值值”对之间使用与符号对之间使用与符号&分隔。分隔。第41页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用HTTP post方法方法l在使用在使用HTTP post方法向服务器发送来自方法向服务器发送来自表单的数据时，表单数据将在表单的数据时，表单数据将在HTTP头部中头部中透明地传送。尽管你无法看到这些头部信透明地传送。尽管你无法看到这些头部信息，但严格地说，它们自身也是不安全的息，但严格地说，它
37、们自身也是不安全的。如果发送如信用卡细节之类的敏感信息。如果发送如信用卡细节之类的敏感信息，数据应该在，数据应该在“安全套接字层安全套接字层”(Secure Sockets Layer，SSL)之下发送，同时还之下发送，同时还应被加密。应被加密。第42页HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第43页主要内容主要内容6.1 认识表单认识表单6.2 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结
38、构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用6.10 创建更有用的表单字段创建更有用的表单字段l重新创建联系方式重新创建联系方式表单，使用本章后表单，使用本章后半部分学到的技术半部分学到的技术添加新的字段并使添加新的字段并使其更加可用。其更加可用。第44页联系方式表单HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用第45页主要内容主要内容6.1 认识表单认识表单6.2
39、 使用使用元素创建表单元素创建表单6.3 元素中表单控件元素中表单控件6.4 创建一个联系方式表单实例创建一个联系方式表单实例6.5 使用使用元素为控件创建标签元素为控件创建标签6.6 使用使用及及元素组织表单结构元素组织表单结构6.7 焦点焦点6.8 disabled与与readonly控件控件6.9 向服务器发送表单数据向服务器发送表单数据6.10 创建更有用的表单字段创建更有用的表单字段6.11 本章小结本章小结HTML5+CSS3网页设计实例教程第6章 HTML5表单的应用6.11 本章小结本章小结l本章全面讲述了创建在线表单的世界，对本章全面讲述了创建在线表单的世界，对很多网站而言这都是至关重要的部分。很多网站而言这都是至关重要的部分。l在使用表单控件创建了一个表单之后，需在使用表单控件创建了一个表单之后，需要确保为每个元素都恰当地添加了标签，要确保为每个元素都恰当地添加了标签，从而用户可以了解应该填写何种信息，或从而用户可以了解应该填写何种信息，或者应该做何种选择。者应该做何种选择。l最后，讲解了何时应该使用最后，讲解了何时应该使用HTTP get或或post方法将表单数据发送至服务器。方法将表单数据发送至服务器。第46页
