下载文档原格式
第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连接的过程中，要将表放在自己熟悉的路径中，这样可以更好的调用数据库在最后建立与ＳＱＬＳｅｒｖｅｒ过程中出现了点问题，导致不能链接，具体的原因我也不是很清楚。
表单页面的开发实验总结全文共四篇示例，供读者参考第一篇示例：表单页面是Web开发中常见的一种页面类型，用于收集用户输入的信息或进行交互操作。
在实际开发中，设计优秀的表单页面可以提高用户体验、增加用户参与度，因此在开发表单页面时需要注意设计、交互、数据验证等方面。
本文将通过一个关于表单页面的开发实验总结，分享一些开发表单页面的经验和技巧。
一、设计阶段1. 界面设计在设计表单页面时，需要考虑页面布局、颜色搭配、字体大小等因素，以保证页面的整体美观和用户友好性。
可以采用响应式设计，使表单页面在不同设备上都能展现良好的用户体验。
2. 表单组件选择根据页面需求，选择合适的表单控件，如文本框、单选框、复选框、下拉框等。
需要考虑表单控件的排列顺序和位置，以便用户能够顺利填写信息。
3. 数据验证为了保证用户输入的数据的正确性和完整性，需要为表单中的每个控件添加相应的数据验证规则，如必填字段、格式验证等。
在界面上给用户明确的提示信息，让用户知道需要填写和如何填写。
二、开发阶段1. HTML编写在编写表单页面的HTML代码时，需要为每个表单控件添加合适的标记和属性，以便进行后续的样式和逻辑处理。
需要注意表单标签的嵌套关系，保证页面结构的清晰和可维护性。
2. CSS样式设计通过CSS样式设计，美化表单页面的外观，使其更加吸引人。
可以使用各种样式技巧，如边框、背景色、字体样式等，来增强页面的整体表现。
3. JavaScript交互通过JavaScript编写交互逻辑，实现表单控件之间的联动效果，如依赖性或条件性显示、隐藏某些控件等。
可以使用JavaScript对用户输入的数据进行实时验证和反馈，提高用户填写表单的体验。
三、测试阶段1. 兼容性测试在测试阶段，需要检查表单页面在不同浏览器和设备上的兼容性，确保页面在各种情况下都能正常显示和工作。
可以使用工具或在线服务进行测试，及时发现并解决兼容性问题。
2. 功能测试对表单页面的功能进行全面测试，包括用户输入、数据验证、提交操作等，检查是否符合设计要求，并且能够正常工作。
网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。
而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。
首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。
教师资格证面试《制作表单网页》教案一、教学目标1.知识与技能(1)学生知道表单网页的作用和构成要素，能够使用FrontPage 软件制作简单的表单网页。
2.过程与方法(1)学生通过观察与探索，听老师对表单网页的讲解，知道表单网页的用途和基本构成要素;(2)学生能够利用计算机，进行简单表单网页制作的基本操作。
3.情感态度与价值观学生在解决问题的过程中，能够选择合适的软件和方法来解决生活中和工作中的问题，形成实事求是的态度，逐步养成将科学技术应用于日常生活、社会实践的意识。
二、教学重难点【教学重点】制作表单。
【教学难点】根据需求确定表单要素，并设置合适的控件属性。
三、教学方法任务驱动法，讲授法，合作探究。
四、教学过程1.新课导入，提出任务在前几节课，同学们已经学习了如何创建“发布网页”，我们在日常的生活中，仅仅学会发布信息是远远不够的，通常我们还需要学会如何去搜集信息。
最近啊，学校想组织一次出游的的活动，给我们班的学生安排了一个任务，让大家搜集在校所有学生的个人信息，并且征询一下各位学生出游的意愿，个人信息包括，姓名，性别，班级，想出游的地方，还有家庭住址，还有父母等联系方式，通常会采用哪些方法呢??(学生可能说用采访登记，打电话，向各个班主任去了解等。
)这些方法虽然可以完成任务，但是太耗费时间了。
老师没有那么时间来逐个的打电话或者问班主任。
其实啊，大家如果会制作表单网页的话，利用网页来搜集大家的信息是非常方便的，那么老师本节课就要带领大家一起来学习一下“简单表单网页的制作”，制作好了网页，让每一个学生到网站上填写一下信息就可以了。
这节课就让大家和老师一起来完成学校交给我们这么一个艰巨的的任务吧。
表单网页通常是用来搜集访问者对网站的访问信息，还有个人注册信息，意见、反馈等信息的搜集，首先让大家看一下我们本节课的任务，本节课的任务就是制作一个“网上调查”的简单网页。
制作表单网页老师一共给大家分配了四个小任务，因为网页的制作分为四个步骤。
网页制作表单教学设计教案(共5页)-本页仅作为预览文档封面，使用时请删除本页-5．2网页制作——表单教学方法：教学演示、任务驱动、自主练习一、教学目标：1、知识与技能了解表单的概念掌握表单网页的制作方法2、过程与方法体验表单网页的制作过程体验用表单网页进行信息的采集过程3、情感、态度、价值观认识信息技术对人们日常生活、学习、工作的影响激发学生对信息技术的求知欲，形成积极主动地学习和使用信息技术、参与信息活动的态度二、重点难点：表单网页的概念表单网页的制作方法三、课程标准：选修模块3：网络技术应用---网站设计与评价---内容标准---能够根据表达任务的需求，使用常用的网页制作软件制作网页四、教学媒体：(本教案需用到的各种教学媒体和资源)1.硬件：网络机房2.软件：多媒体广播教学软件，FrontPage2000学生在学习本节内容之前，已经学习过因特网的相关知识、会上网，并且已经掌握常用网络工具软件的使用，如QQ、E-mail等等，并且有着浓厚的兴趣。
大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段，对申请QQ号码和E-mail时的网页结构形式知之甚少。
本节课的关键是通过学习，了解表单网页的制作过程和方法，为以后信息获取和处理打下基础。
六、教材分析：网络基础及应用是高中信息技术课程的重点，是培养学生信息素养的关键章节，对于培养学生获取、评价、利用和表达信息的能力，起着举足轻重的作用。
而表单网页在基于网络的信息收集处理方面有着明显的优势。
一、一、问题的提出制作一张如下所示的用户登记表二、二、问题：1．上述用户登记表中有哪几种表单域？2．表单的工作原理是什么？三、三、表单的构成表单域：是容纳输入信息的容器，是用户输入数据的地方。
表单控制器：负责处理用户在表单中填写的信息。
“提交”和“重置”按钮：将信息提交到站点服务器、清除表单中已填写的内容。
四、四、制作用户登记表单行文本框：用于让用户输入一行文本信息，并能够被Web 服务器接受，用户登记表中的姓名、年龄和E_mail均是单行文本框。
网络选修模块1.有关IP地址右击“网上邻居”－属性，右击“本地连接”—属性添加TCP/IP协议：单击“安装”－“协议”－“TCP/IP Protocol”－“添加”－确定设置IP地址：单击“Internet协议（TCP/IP）”－属性2.有关IE（浏览器）操作打开IE浏览器设置主页：单击菜单“工具”－Internet选项，单击“常规”收藏夹整理：单击菜单“收藏”—整理收藏夹，按顺序创建文件夹、移动项目设置代理：单击菜单“工具”－Internet选项，单击“连接”－局域网设置3.网页制作中的常见操作设置网页标题：右击网页，单击属性，在打开网页属性对话框，输入指定标题。
设置网页背景音乐、背景图片：操作同上。
背景图片在“背景”标签中修改。
设置滚动字幕：双击滚动字幕，打开“字幕属性”对话框，可更改方向等参数，字幕的字体、字号可以在“样式—格式”中设置。
【注意】“网页背景”、“表格背景”、“单元格背景”的操作都只需右击对应的对象（网页、表格、单元格），然后单击属性，再进行修改。
在设置对象的高度、宽度时，要注意单位是像素还是百分比。
4.表单网页表单（Form）是一种结构化的文件，用于收集和发布信息。
它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。
目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。
在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。
制作表单网页的操作：单击菜单“插入”—表单—表单字段，表单字段根据具体要求来选择。
【注意】在插入多个表单字段时，注意插入点要放在表单虚线框中的某一位置（在插入第一个表单字段时会产生表单虚线框）。
5.框架网页框架（Frame）的主要作用是将浏览器窗口分割成几个相对独立的小窗口，浏览器可以将不同网页文件同时传送到这几个小窗口中，这样就可以同时浏览不同的网页文件。
制作表单网页说课稿
尊敬的各位评委、专家：
大家好！今天我说课的内容是《制作表单网页》。
一、说教材
网页设计是我校计算机应用技术专业的一门选修课，使用教材是航空工业出版社的《网页设计案例教程》。
今天我说课的内容是第7章表单在网页中的应用，讲述了表单元素在网页中的操作与应用。
表单用来收集用户信息，使网页具有交互功能，因此广泛使用。
由于表单元素比较多，用法各不相同，有一定难度。
因此，我把课本的知识进行了分解与重组，由易到难，设计成三个任务，各有侧重点。
二、说教学重点与难点
教学重点：1.创建表单。
2.掌握各表单元素
教学难点：熟练应用各表单元素
关键点：表单元素属性的设置
三、说教学目标
(一)知识目标
掌握表单的基本构成要素，了解表单设计及制作流程，理解、掌握并熟练运用表单各知识点。
(二)技能目标
1.根据场合灵活制作表单。
2.培养学生使用Dreamweaver 软件的综合能力，提高应用水平。
(三)情感目标
1. 培养学生的自主学习能力、自我探究能力；
2. 增强学生的审美意识、组织能力和团结协作的精神；
四、说学情
我所教授的对象是大专二年级计算机专业的学生。
他们学习能力参差不齐，学习不主动。
但他们具备了一定的分析能力和探究意识，同时会带着问题投入到课程学习当中，具有强烈的好奇心和求知欲。
五、说教法
根据对教材、学生情况、教学目标的认真分析，我确定使用以案例教学法、小组合作法、任务驱动法为主并辅以演示、辅导等其他教学方法。
1．任务驱动下的案例教学法：从生活中常见的表单网页例子，比如常用的淘宝注册页面，游戏注册界面等，引入本节课的学习，吸引学生的好奇心。
2．演示法：通过多媒体演示关键的知识点和关键步骤，或使用课件演示。
这种方法比较直观，还可活跃课堂气氛。
激起学生学习兴趣，
训练学生实际问题的解决能力。
3．实践法：让学生自己上机去实现任务，让他们在亲身实践中体会、提高，在同学之间的互相学习和交流，甚至争论中提高学习兴趣，开阔思路。
六、说教学过程
一、创设情境，导入新课
教师利用大屏幕展示生活中常见的各种表单页面，让学生一边欣赏一边思考：这些常见的页面能实现什么功能？在网页设计中怎样实现这些功能？以此激发学生的学习兴趣，导入本节学习内容——制作表单页面。
【设计意图】这一环节，通过展示图片，从现象到本质总结出表单在我们生活中的实用性，锻炼了学生的归纳总结能力，激发了学生学习新知的欲望，为后面的学习做了铺垫。
1.表单创建的作用在网页制作中，表单主要作用就是收集来自用户的信息，例如用户名、密码、电子邮箱地址、兴趣、爱好等等，主要完成调查、注册、搜索、订购等功能，它是网站管理者与浏览者之间沟通的桥梁。
让学生举例说明在生活中常见的表单有哪些？
2.认识表单元素文本域，密码域，单选按钮，复选框，文件域，提交重置按钮等。
二、任务驱动，层层深入
屏幕展示实例效果图，师生共同分析操作过程，制定操作步骤，教师上机操作演示表单中插入文本域“用户名”的步骤。
任务一：学生打开桌面“素材”网页，阅读教材完成密码和留言文本域的添加操作。
学生操作，教师巡回指导。
操作结束后教师先让顺利完成任务的同学示范讲解，再与全班同学一起交流，最后教师进行总结，并讲解演示整个操作过程。
操作时教师要注重和学生交流，及时强调知识点。
【设计意图】通过本环节，一方面培养了学生的自学能力，另一方面使学生对学习内容有了更深的理解，同时也引导没有完成任务的同学掌握了方法。
任务二：在完成“任务一”的基础上，阅读教材完成性别和工资单选按钮的添加操作。
学生进行组内讨论，归纳总结单选按钮和单选按钮组的操作。
【设计意图】本环节意在培养学生的自主实践、发现问题、解决问题能力，增强学生的合作意识。
任务三：在以上操作基础上，阅读教材完成复选按钮的添加操作。
通过操作分析比较单选按钮和复选框在添加及属性设置上的不同。
教师总结导入知识点，师生共同为表单添加按钮，操作完成后展示最终效果图。
七、归纳总结，梳理知识
总结：今天我们主要学习了哪些知识？
教师与学生一起简短回顾本节课的主要知识点，将前面所学的零散知识进行汇总，把学生掌握的感性知识上升为理性知识，并提醒学生要灵活合理运用所学知识。
【设计意图】通过知识回顾，培养学生归纳总结和语言表达能力。
八、布置作业做一个小型的调查问卷，先输入几个元素，包括用户名、性别、工资、电子邮箱、留言、提交按钮等元素。
【设计意图】通过作业布置，引导学生将所学的课本知识运用到现实生活中，提高学生搜集信息、处理信息的能力和探究意识。
我的说课完了，谢谢大家！。
