制作表单网页
- 格式:ppt
- 大小:268.50 KB
- 文档页数:11


第7章表单在制作动态网页时,要实现信息交互,常常用到表单。
常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。
本章节将和大家一起探讨在表单的基本概念和各个元素,以及在Dreamweaver CS4中如何创建表单,并通过实例掌握表单制作的方法。
【学习目标】●了解Web服务器的作用。
●掌握IIS的安装和设置方法。
●掌握更改站点设置的方法。
●知道表单域的含义;熟练掌握各种表单栏目的插入与设置。
●能够综合使用各种表单栏目制作留言簿。
●知道发送表单结果的多种方法。
●掌握验证表单的方法。
7.1 关于表单表单是用来收集站点访问者信息的域集,可实现网页与浏览者间的交互,达到收集浏览者输入信息的目的。
表单是浏览网页的用户与网站管理者进行交互的主要窗口,Web管理者和用户之间可以通过表单进行信息交流。
表单内有多种可以与用户进行交互的表单元素,如文本框、单选框、复选框、提交按钮等元素。
在服务器端,信息处理由CGI (Common Gete Way Interface)、JSP (Javaserver Page)或ASP (Active Server Page)等应用程序处理。
下面是几个表单应用的例子,邮箱用户注册表单如图14.1所示,搜索引擎表单如图14.2所示,在线测试表单如图14.3所示。
7.2 表单元素表单域简单地说,表单就是用户可以在网页中填写信息的表格,其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。
表单域,也称表单控件,是表单上的基本组成元素,用户通过表单中的表单域输入信息或选择项目。
在建立表单网页之前,首先就要建立一个表单域。
在7.1节中详细介绍了表单的基本概念,使用Dreamweaver CS4可以创建各种表单元素,如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。
在“插入”工具栏的“表单”类别中列出了所有表单元素,如图14.4所示7.2.1 插入表单(1)将光标放在“编辑区”中要插入表单的位置;然后在“插入”工具栏的“表单”类别中,单击“表单”按钮;此时一个红色的虚线框出现在页面中,表示一个空表单,如图14.5所示(2)单击红色虚线,选中表单;在“属性检查器”中,“表单名称”文本框中输入表单名称,以便脚本语言Javascript通过名称对表单进行控制;在“方法”下拉列表框中,选择处理表单数据的传输方法,“Post”方法是在信息正文中发送表单数据,“Get”方法是将值附加到请求该页面的URL中;在“目标”下拉列表框选择服务器返回反馈数据的显示方式,这里选择“_blank”,即在新窗口打开;“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。
学生实验报告课程名称电子商务网页制作实验成绩批阅教师沈金实验工程名称表单网页的制作及数据库创立和连接实验者学号专业班级电商1111 实验日期一、实验预习报告〔实验目的、内容,主要设备、仪器,根本原理、实验步骤等〕〔可加页〕实验内容:1、登录和注册网页的制作〔截图展示〕,并说明两个网页中共使用哪些控件2、对应数据库的建立,分别使用SQL server和ACCESS建立相应的数据库和数据表,并用截图+关系模式表示出来。
二、实验过程记录〔包括实验过程、数据记录、实验现象等〕〔可加页〕1.新建站点,翻开网页一,插入div标记,并设置相关字体的标题,插入表单及表单中的相应的选项,其中包括“字段集〞、“文本域〞及按钮等选项,页面一中的代码如下列图所示:1添加表单后的效果图如下所示;给登录页面添加如下样式;添加样式后效果图如下:预览该页面,会看到最终的登录页面的效果图如下图:单击登陆页面的“注册〞超链接,将跳转到注册页面,新建HTML文档并保存为2-html,切换至代码视图,在<body>和</body>间插入一下的代码:添加样式后的效果图点击预览该网页,会看到最终的注册页面的效果图,如下图:添加spry样式,点击菜单栏中的“插入〞-“spry〞,选择相应的选项进行添加预览该页面,会出现如下的效果图:启动access,选择“文件〞|“新建〞命令,再选择“空数据库〞选项,输入文件名“登录表〞,单击“创立〞按钮即可完成新建登录数据库,此时Access程序就会弹出登录数据库的窗口,如下图:双击“使用设计器创立表〞选项,弹出创立表的输入界面,在界面填入name和password两个字段,将name 设为主键,单击“保存〞命令,弹出“另存为〞窗口,在表名称中输入“登录表〞,点击确定双击“登录〞表并翻开,在表中添加相应的数据按照同样的方法创立“注册〞数据库,将name设为主键,如下图:双击“注册〞表,在表中填入相关的数据:在站点的下方会出现一个web.config网页,翻开网页会出现如下的代码:在Dreamweaver中选择“新建〞命令,在弹出的“新建文档〞中选择“空白页〞选项,然后再选择“ASP VBScript〞,单击“确定〞按钮新建一个ASP文档,如下图:〔2〕单击“数据库〞面板上的“添加〞图标,选择“自定义连接字符串〞选项,在弹出的对话框中输入连接名称和连接的字符串:点击“测试〞按钮,会弹出如下的对话框:点击“确定〞,系统自动创立名为cong的数据库连接,如图:启动SQL Server效劳,然后启动“SQL Server Management Studio〞,输入连接用户名和密码,单击“连接〞按钮,进入主界面,右击“数据库〞—“新建数据库〞,在弹出的对话框中输入所建的数据库的名称,修改路径名称,点击“确定〞,会看到左边的栏目下多出了一个“wan〞的数据库:在数据库wan的下方找到表,点击右键中的新建表,在表中编辑字段和填入相关的数据类型,并将name 设置为主键:选中“登录〞表,点击右键鼠标中的“编辑前两百行〞,在其中填入相关的数据,在数据库wan的下方找到表,点击右键中的新建表,在表中编辑字段和填入相关的数据类型选中“注册〞表,点击右键鼠标中的“编辑前两百行〞,在其中填入相关的数据,在Dreamweaver CS5中,点击菜单栏中的“窗口〞—“数据库〞再点击数据库下方的“+〞中的数据源名称会弹出如下的窗口点击“定义〞中的“驱动程序〞中的点击确定,数据源名称没有显示,如下列图::三、实验结果分析〔可加页〕在创立表单的过程中,注意表单中各个选项中的功能,以便更好的到达自己想要的效果在建立与Access连接的过程中,要将表放在自己熟悉的路径中,这样可以更好的调用数据库在最后建立与SQLServer过程中出现了点问题,导致不能链接,具体的原因我也不是很清楚。