第08章 表单的设计.ppt

1、第8章西餐设计，8.1标记8.2标记8.3下拉菜单select/option 8.4多行文本框textarea 8.5西餐网页应用程序节目，上一页，下一页，目录，结束，牙齿部分，8.2标记，8.2.1文本框文本8.2.2提交按钮submitHTML使用西餐(Form)设计交互界面。“西餐”是指接受网页内访问者的动作，这些动作传递到服务器内的节目(如CGI节目)，包括动态、输入框和按钮。通过使用表格和CGI程序，网页可以知道浏览的人做了什么，对这些事情做出适当的反应，网页进行交互。牙齿章节的内容是使用表单和CGI程序告诉自己的网页和网页浏览者如何进行徐璐沟通。上一页、下一页、目录、结尾、牙齿部分

2、、西餐标签是标签对，第一个标签和结束标签之间的内容是表单。西餐表单在具有明确文本提示的表单中创建表单，以便访问者可以在表单中输入自己的信息，然后使用提交按钮将浏览器中的信息传递到服务器。西餐form中的HTML代码执行两个茄子操作。一个表示CGI的路径和名称，另一个表示将在表单中输入的信息传递给CGI。关于CGI的概念，我们在下一节中会说，读者只需把它当作在服务器上运行的应用程序即可。8.1标记、上一页、下一页、目录、结尾、牙齿部分和HTML中form的语法结构如下：标签具有两个茄子属性：action和method。上一页、下一页、目录、退出、牙齿部分、1action属性WWW使用客户/服务器

3、工作方式。浏览器端接收的用户反馈将传递到网页伺服器，由相应的处理程序处理。Action属性用于指示与表单对应的处理函数的位置。参数值是程序的URL。目前，由于服务器端的处理程序更多，因此action属性指定了牙齿form牙齿应运行的CGI节目的名称。通常，处理用户反馈信息的节目CGI程序位于网页伺服器CGI-BIN目录下。用户提交输入信息后，启动服务器牙齿程序完成查询操作。上一页、下一页、目录、退出、牙齿节和2method属性method属性指定表单的工作方式。属性的参数值为get和post，默认方法为get。值为get时，表单主要从服务器获取信息，因此传递给服务器的反馈消息长度不能超过255

4、个字符。值为post表示表单主要发送到服务器消息，服务器反馈长度没有限制。仅使用牙齿标签很难完成用户信息输入。在的开始和结束标记之间，除了前面介绍的标记外，还存在三个茄子特殊标记：input、select和textarea。现在一起学习吧。上一页、下一页、目录、结束、牙齿部分、8.2标记是单个标记，没有结束标记。必须嵌套在西餐标记中以定义用户输入。标签具有6个茄子属性：type、name、size、value、maxlength和checked。其中name和type是两个茄子必需的属性。Name属性的参数值是该处理程序的变量名，网页伺服器将牙齿输入信息的值赋给name属性规定的变量。Type

5、属性用于指定牙齿项目提供的输入方法。也就是说，它指示浏览器输入的值的类型。标记格式略有不同，其他5茄子属性的含义取决于类型类型。Type有9种茄子类型：text、password、radio、checkbox、submit、reset、image、hidden和file。上一页、下一页、目录、结束、牙齿部分，如果类型为文本，则表示该项的输入信息为字符串。浏览器现在显示一个文本框，用户可以在其中输入信息。牙齿文本框是只能输入一行文本的输入框。Type=text时，标记除了具有不能设置为默认值的两个茄子属性name和Type外，还具有三个茄子可选属性：value、size和maxlength。1s

6、ize属性：用于指定文本框的长度。默认值为20(字节)。2value属性：设置文本框中预先显示的内容。3maxlength属性：指示文本框用户可以输入的最大字符数。牙齿值始终等于或大于size属性的参数值。如果输入的字符数超过了文本框长度，可以移动光标以查看部分或更多内容。8.2.1文本框文本、上一页、下一页、目录、退出、牙齿部分、8.2.2提交按钮submit和重置按钮reset，type=submit将在该位置生成浏览器，用户单击按钮时，浏览器将表单的输入信息传递到服务器。您可以将提交按钮的name属性设置为默认值。除了Name属性外，还有可选属性value，用于指定在提交按钮上显示的文本

7、。Value属性的默认值为提交查询内容。表单必须包含“提交”按钮。否则，无法传递服务器信息。如果Type=reset，浏览器将在该位置生成重置按钮。当用户单击执行牙齿按钮时，浏览器清除表单中的所有输入信息，并返回到初始状态。您还可以将重置按钮的name属性设置为默认值。除了Name属性外，还有可选属性value，用于指定要在清除按钮上显示的文本。值属性的默认值为“重置”。通常，“提交”和“重置”按钮应同时出现。上一页、下一页、目录、退出、牙齿部分、8.2.3密码框password和password类型与text类型非常相似。但是，如果浏览器输入内容时未显示输入的内容，并且星号、上一页、下一页、

8、目录、退出、牙齿部分、8.2.4单选框radio，type=radio，则表明项目是单个选项。单一选项必须是唯一的。也就是说，用户只能选择表单中所有单个选项中的一个作为输入信息。因此，所有属性name必须具有相同的值，但属性value的值必须不同。其中，checked属性用于指定最初选择选项。上一页、下一页、目录、退出、牙齿部分，如果type=checkbox，则指示项目是复合选项。用户可以同时从表单中选择一个或多个复合选项作为输入信息。由于有多个选择，因此属性name必须具有不同的值。属性value的参数值是选择并提交项，然后web浏览器将其作为服务器数据传递。因此，value属性的参数值必

9、须与选项内容相同或几乎相同，并且是必需的属性。Checked属性指定最初选择牙齿选项。8.2.5复选框如果checkbox、上一页、下一页、目录、退出、牙齿部分、type=image，则浏览器在该位置创建图像按钮，并且用户单击按钮时，浏览器需要服务器图像类型的src属性以获取表单的输入信息。牙齿属性用于设置图像文件的路径。图像按钮中也提供了图像标签中使用的许多属性规定。8.2.6图像按钮图像、上一页、下一页、目录、结尾、牙齿部分和image=hidden表示浏览器窗口中不显示条目。如果用户不想在不显示特定选项的情况下从文档中删除某个选项，则可以通过将这些选项中type属性的参数值更改为hidd

10、en来实现此目的。8.2.7隐式框hidden、上一页、下一页、目录、结尾、牙齿部分和档案选择输入框在档案上载程序中使用最广泛。档案选择输入框看起来很复杂，但在HTML中，您只需通过即可。8.2.8档案选择输入框档案、上一页、下一页、目录、结尾、牙齿部分、表单中的和标记可以在浏览器中显示带有下拉菜单或滚动条的菜单。浏览器可以从菜单中选择一个或多个选项。这类似于使用标签的单选框和多选框，但格式不同。8.3下拉菜单选择/选项、上一页、下一页、目录、结尾、牙齿部分、标记是标记对，第一个和结束标记之间的内容是下拉菜单的内容。标签必须与定义下拉菜单各个选项的标签一起使用。标签有三个茄子属性：name、s

11、ize和multiple。其中，name属性用于命名下拉菜单。Size属性是可选的，用于定义菜单的长度。Size属性的参数值是一个数字，指示菜单中显示的选项数。如果Size属性的参数值小于列表框中列表项的数量，浏览器会向菜单中添加滚动条，用户可以使用滚动条查看所有选项。Szie属性的默认值为1。Multiple属性用于预先选择多个选项。8.3.1 select标签、上一页、下一页、目录、结尾、牙齿部分和标签定义菜单中的选项。标记是嵌套在标记中必须使用的单个标记。菜单包含几个茄子选项。应该有一些对应的标签。选项的具体内容写在每个后面。(David aser，Northern Exposure(美

12、国电视电视剧)，菜单)标签中有两个茄子属性：value和selected，都是可选的。其中，value属性的参数值是选择并提交项时web浏览器传递给服务器数据的值。默认情况下，浏览器传递选项的内容。Selected属性指定选项的初始状态。这表示最初选择了该选项。在标签中设置multiple属性允许多个标签具有selected属性。也就是说，可以同时预先选择多个选项。8.3.2可选标记、上一页、下一页、目录、结尾和牙齿部分使用标记定义高度超过两行的文本输入框。标签是标签对，第一个标签和结束标签之间的内容是显示在文本输入框中的原始描述。标签有三个茄子属性：name、rows和cols。其中，nam

13、e属性用于命名文本输入框。Cols属性用于指定文本输入框的宽度。属性的参数值是一个数字，指示一行可以显示的最大字符数。如果输入信息的一行或多行字符大于cols属性的参数值，浏览器会在文本输入框中添加水平滚动条。Rows属性指定文本输入框的高度。属性的参数值是一个数字，指示文本输入框占用的行数。浏览器自动将垂直滚动条添加到高度超过两行的文本输入框中。但是，如果输入信息的行数小于或等于rows属性的参数值，则滚动条不起作用。8.4多行文本框textarea、上一页、下一页、目录、结尾、牙齿部分、网页中真正的指挥表单，需要使用CGI程序，因此首先了解CGI程序的概念。网页8.5西餐应用程序节目，8.

14、5.1 CGI程序的概念，简而言之，CGI是服务器和HTML档案之间的介面程序，用于处理HTML文件和服务器的节目之间的数据交换。可以是编译后的节目、批处理任务档案或任何可运行的二进制文件。CGI和服务器之间的交互过程如图8.9所示。、上一页、下一页、目录、退出、牙齿部分、CGI程序和服务器之间的交互进程、上一页、下一页、目录、退出、牙齿部分、首先在浏览器中发出请求，浏览器输入查询条件，牙齿请求等于访问所有URL。根据请求中提供的档案名称，在CGI-BIN子目录中运行CGI程序。牙齿CGI程序可以调用系统下计算值或将运行结果返回到CGI程序的程序。CGI程序将结果转换为可识别网页服务器的HTML格式，网页伺服器将以HTML格式表示的数据返回到请求的web浏览器。上一页、下一页、目录、退出、牙齿部分和实施CGI节目交互式访问是创建网页的最高步骤，并且要求很高。不仅要熟悉HTML，还要熟悉网页服务器驻留主机的操作系统和操作系统支持语言。此外，在编写CGI程序之前，必须系统管理员公开对CGI-BIN目录的访问。为此，普通网页很少使用CGI，当然，如果你的网页很大，就应该使用CGI。幸运的是，在互联网上，有现成的CGI程序，你只能下载和使用。因此，此处仅教授如何将CGI程序添加到HTML，有关如何编