第5单元表单设计.pptVIP

5 表单设计 目录 5.1 表单设计 网站管理者和浏览者之间往往要相互交流。例如，要做一个产品调查时，就要向浏览者给出一个调查表，请浏览者填写意见，然后再收集他们的意见进行整理。用户要申请加入某俱乐部或者申请一个免费邮箱时，要在网页中填写一些个人资料，将自己的信息传递给服务器处理。这样的活动都是通过表单来完成的。本节将介绍表单的制作方法。 目标：通过本节学习，掌握表单的设计方法。 5.1.2 表单制作的初步知识 使用表单可以收集来自用户的信息，是网站管理者与浏览者之间沟通的桥梁。有了表单，网站不仅是“信息提供者”，同时也是“信息收集者”，也由被动提供转变为主动“出击”了。表单的通常应用是调查表、订单和搜索界面等。 通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。 5.1.2 表单制作的初步知识 表单中可以包含各种表单对象，包括文本框、列表框、复选框、单选按钮等等。通过这些表单对象可以实现网站与用户的交互。 表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如CGI、ASP等。 表单标记form包含一些参数，通过这些参数，如：action参数指定处理表单数据的服务器端脚本或应用程序的路径，method从浏览器传送数据到服务器的HTTP方法。 5.1.2 表单制作的初步知识 5.1.2 表单制作的初步知识 使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入的信息的正确性。 5.1.3 表单设计的步骤 5.1.3 表单设计的步骤 1．创建表单域 （1）新建一个文件，并保存文件到站点目录下。 （2）单击“插入”栏“表单”类别中的“表单”按钮，此时，在“文档”窗口中出现红色虚线的方框，这个方框就是表单域。如果没有看到所创建的表单虚框，请选择“查看”“可视化助理”“不可见元素”。 （3）在表单域内插入一个11行2列的表格，表格设为居中对齐，在表格的相应位置输入“用户名”、“密码”等，设置所有对象居中对齐。 5.1.3 表单设计的步骤 2．在表单中添加各个表单对象 （1）添加文本字段（也称文本框）。 （2）添加单选按钮 ，同一组的单选按钮的名称应该相同。 （3）添加复选框 ，同一组复选框的名称可以相同，也可以不相同。 （4）添加菜单（下拉列表框） ，提示：如果要设置为列表而不是菜单，请在属性检查器中选择列表，然后设置高度值（行数）。 （5）添加多行文本框 。 5.1.3 表单设计的步骤 （6）添加按钮 按钮名称：给按钮命名。Dreamweaver有两个保留名称：Submit（提交）和Reset（重设）。Submit指示表单提交表单数据给处理程序或脚本；Reset恢复所有表单域为它们各自的初值。也可以根据自己的需要给按钮指定其它名称。 值：设置显示在按钮上的文本。 动作：用户单击按钮时执行提交或重设表单之类的任务。执行何种任务，取决于在属性检查器中给按钮指定的动作类型：选择提交表单，单击按钮时将把表单数据发送给服务器处理；选择重设表单，单击按钮时将清空用户在表单中的输入；选择无，单击按钮将不发生表单的提交和重设动作，但可以执行给按钮指定的动作。 5.1.3 表单设计的步骤 3．指定表单数据处理程序 （1）单击表单的红色线框，在表单属性检查器中的动作域中输入：Mailto:infosea@163.net，把表单数据交由邮件处理程序处理；在表单名称域中输入myform，给表单命名，以便以后引用。 （2）表单属性检查器中的方法选项用于指定处理表单数据的方法。有三种表单数据处理方法，它们是： 5.1.3 表单设计的步骤 默认（默认的方法），使用浏览器默认方法（一般为GET）。 GET（发送GET请求），把表单值添加给URL，并向服务器发送GET请求。因为URL被限定在8192个字符之内，所以不要对长表单使用GET方法。当处理信用卡号或其它秘密信息时也不能使用GET方式，使用该方式传送信息是不安全的。 POST(发送POST请求)，在消息正文中发送表单值，并向服务器发送POST请求。 4.1.2 层叠样式表基础知识 4．指定表单数据的编码方法 单击工具栏中的“代码视图”按钮，切换到代码视图，找到form标记，然后在该标记的method=“post”属性后面加上enctype=“te