html 表单.ppt

1、Page 1,第3章 表单,HTML语言与企业网站,Page 2,学习目标,掌握各种表单元素的语法和使用 熟悉各表单元素的常用属性 了解请求方法get和post,Page 3,3.1 文本域,表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（）定义。.input 元素 . ,Page 4,3.1 文本域,定义和用法标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、le

2、gend 和 label 元素。 表单用于向服务器传输数据。 提示和注释 注释：form 元素是块级元素，其前后会产生折行。,Page 5,3.1 文本域,实例：First name: Last name: ,Page 6,3.1 文本域,必需的属性 可选的属性详见教材。,Page 7,3.1 文本域,输入多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。,Page 8,3.1 文本域,定义和用法标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 提示和注释： 提示

3、：请使用 label 元素为某个表单控件定义标签。,Page 9,3.1 文本域,可选属性详见教材。,Page 10,3.1 文本域,文本域（Text Fields） 当用户要在表单中键入字母、数字等内容时，就会用到文本域。First name: Last name: 注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。,Page 11,3.1 文本域, 标签标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会

4、自动将焦点转到和标签相关的表单控件上。标签的 for 属性应当与相关元素的 id 属性相同。,Page 12,3.1 文本域,实例： 带有两个输入字段和相关标记的简单 HTML 表单：MaleFemale,Page 13,3.1 文本域,标签标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。 注释：在文本输入区内的文本行间，用 “%OD%OA“ （回车/换行）进行分隔。,Page 14,3.1 文本域,实例：这

5、里填写内容。 ,Page 15,3.1 文本域,必需的属性 可选的属性详见教材。,Page 16,3.1 文本域, 标签 fieldset 元素可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。标签没有必需的或唯一的属性。标签为 fieldset 元素定义标题。,Page 17,3.1 文本域,实例： 组合表单中的相关元素：health informationheight: weight: ,Page 18,3.1 文本域,实例1：

6、 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。名：姓：,Page 19,3.1 文本域,实例2： 本例演示如何创建 HTML 的密码域。用户：密码：请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。,Page 20,3.1 文本域,实例3： 本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。The cat was playing in the garden.这是一个多行文本框。 ,Page 21,3.1 文本域,实例4： 本例演示如何在数据周围绘制一个带标题的框。健康信息：身高： 体重：如果表单周围没有

7、边框，说明您的浏览器太老了。,Page 22,3.1 文本域,实践案例为个人网站添加一个登录页面。,Page 23,3.2 下拉列表, 标签 select 元素可创建单选或多选菜单。 当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。,Page 24,3.2 下拉列表,实例： 创建带有 4 个选项的选择列表：VolvoSaabOpelAudi ,Page 25,3.2 下拉列表,可选的属性详见教材。,Page 26,3.2 下拉列表, 标签 option 元素定义下拉列表中的一个选项（一个条目）

8、。 浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。 option 元素位于 select 元素内部。 可选的属性详见教材。,Page 27,3.2 下拉列表, 标签标签定义选项组。 optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。,Page 28,3.2 下拉列表,实例： 通过 标签把相关的选项组合在一起：VolvoSaabMercedesAudi,Page 29,3.2 下拉列表,实例1：Volvo Saab Fiat Audi,Page 30,3.2 下拉列表,实例2：Volvo Saab Fiat Audi,Pa

9、ge 31,3.2 下拉列表,实践案例为个人主页添加下拉列表。,Page 32,3.3 单选按钮,当用户从若干给定的的选择中选取其一时，就会用到单选框。MaleFemale ,Page 33,3.3 单选按钮,实例：男性：女性：当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。,Page 34,3.3 单选按钮,实践案例为个人主页添加单选按钮。,Page 35,3.4 复选框,当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。I have a bikeI have a car ,Page 36,3.4 复选框,实例：我喜欢自行车：我喜欢汽车：,Pag

10、e 37,3.4 复选框,实践案例为个人主页添加复选框。,Page 38,3.5 按钮,当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。Username: 假如你在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp“ 的页面。,Page 39,3.5 按钮, 标签标签定义一个按钮。 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。控件 与 相比，提供了更为强

11、大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button“，而其他浏览器中（包括 W3C 规范）的默认值是 “submit“。,Page 40,3.5 按钮,实例： 以下代码标记了一个按钮： Click Me!,Page 41,3.5 按钮,可选属性详见教材。,Page

12、 42,3.5 按钮,实例1：,Page 43,3.5 按钮,实例2：First name: Last name: 请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。,Page 44,3.5 按钮,实例3：I have a bike:I have a car: I have an airplane: 如果您点击 “Submit“ 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。,Page 45,3.5 按钮,实例4：Male: Female: 如果您点击 “Submit“ 按钮，您将把输入传送到名为 html_form_act

13、ion.asp 的新页面。,Page 46,3.5 按钮,实例5：这个表单会把电子邮件发送到指定邮箱。 姓名：电邮：内容：,Page 47,3.5 按钮,实践案例为表单添加按钮。,Page 48,3.6 请求方法get、post,method属性method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。表单数据可以作为 URL 变量（method=“get“）或者 HTTP post （method=“post“）的方式来发送。,Page 49,3.6 请求方法get、post,实例： 在下面的例子中，表单数据将通过 method 属性附加到 URL 上：Fir

14、st name: Last name: ,Page 50,3.6 请求方法get、post,POST和GET 浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。 如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。 在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务

15、器会明确指定应用程序应该如何接受这些参数。 另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。 一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。,Page 51,3.6 请求方法get、post,POST 还是 GET？如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种

16、方法呢？下面是有关这方面的一些规律： 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。 一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。 如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。 如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样

17、网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 标签的内容。,Page 52,3.6 请求方法get、post,明确传递参数 前面的一些建议也可以作为选择此种方式的一定解释。假设你有一个很简单的表单，其中只包含 x 和 y 这两个参数。在对这些元素的值进行编码时，它们的形式如下所示：x=28y=66“ 由于这样还是不能在 URL 中使用 & 符号，并且有可能在将来带来混乱，因此我们鼓励服务器设置最后也能够接受用分号作为参数分隔符。你也可以看看自己的服务器文档，了解服务器是否支持这种功能。,Page 53,知识点小结,表单和表单元素 文本域 下拉列表 单选按钮 复选框 按钮 请求方法get和post,