用表单收集数据课件

1、网页设计与制作实用教程第1页，共25页。第11章用表单收集数据22022/7/29学习目标掌握创建表单和添加表单对象的方法；掌握表单和表单对象的属性设置方法。第2页，共25页。第11章用表单收集数据32022/7/29目录实例1 制作登录网页实例2 制作新闻编辑网页本章小结配套实训练习题第3页，共25页。第11章用表单收集数据42022/7/29实例1 制作登录网页 设计目标页面分析实训引导制作步骤第4页，共25页。第11章用表单收集数据52022/7/29设计目标制作一个效果如图11.1所示的登录网页。要求输入用户名、密码，单击“登录”按钮，浏览器首先检查用户名、密码的输入是否为空，如果为空

2、则作出提示，否则将表单内容提交到Web服务器进行登录验证；另外，选择“友情链接”下拉菜单中的选项，浏览器将自动跳转到相应网页。 返回第5页，共25页。第11章用表单收集数据62022/7/29页面分析本页面包含如下对象：1“用户名”输入框为单行类型的“文本域”对象。2“密码”输入框为密码类型的“文本域”对象。3“登录”按钮为“提交表单”类型的“按钮”对象。4“重置”按钮为“重置表单”类型的“按钮”对象。5“友情链接”下拉菜单为“跳转菜单”类型的“菜单”对象。返回第6页，共25页。第11章用表单收集数据72022/7/29实训引导1本实例创建的是HTML网页，可以直接打开网页进行测试，不需要We

3、b服务器。2页面效果请参见配套光盘webcoursechapter11result文件夹下的ex11_Login.html文件。返回第7页，共25页。第11章用表单收集数据82022/7/29制作步骤首先新建一个文件，将页面标题设置为“登录”，然后将网页保存到本地站点的根文件夹futurewebpages下，取名为ex11_Login.html。接下来依次按照下述内容进行操作：1在网页中插入了一个4行1列的表格，并设置表格的相关属性。2在表格第1行输入标题“登录”，在表格第4行输入文字“版权所有”。3创建表单。4插入表单对象。5为“登录”按钮添加验证表单的行为。6插入“友情连接”跳转菜单。返回

4、第8页，共25页。第11章用表单收集数据92022/7/2911.2了解创建表单的基本方法创建表单以及插入表单对象的操作方法有以下两种。1使用菜单命令。把插入点置于插入表单的位置，在菜单栏中选择“插入”“表单”“表单”命令。把插入点置于红色的表单区域内，在菜单栏上选择“插入”“表单”命令中的某种表单对象，就可以在表单区域内添加各种表单对象。2使用“插入”栏。在“插入”栏的“表单”类别中，单击相应的表单对象按钮，如图11.3所示。此后就可以用“表单”栏中的工具方便地创建表单了。 第9页，共25页。第11章用表单收集数据102022/7/2911.3创建“登录”表单页面 11.3.1创建表单11.

5、3.2插入表单对象11.3.3为“登录”按钮添加检查表单的行为11.3.4插入“友情连接”下拉菜单第10页，共25页。第11章用表单收集数据112022/7/2911.3.1创建表单 具体操作步骤见教材第228页：1添加表单2给表单重命名3指定处理提交表单程序4指定表单处理程序窗口打开的位置5指定处理表单数据的方法6指定表单数据的MIME类型返回第11页，共25页。第11章用表单收集数据122022/7/2911.3.2插入表单对象 具体操作步骤见教材第230页：1创建用户名文本域对象2插入密码文本域对象3插入按钮对象返回第12页，共25页。第11章用表单收集数据132022/7/2911.3

6、.3为“登录”按钮添加检查表单的行为为“登录”按钮添加检查“用户名”文本域是否为空的行为，操作步骤如下：（1）在页面中选中“登录”按钮，在菜单栏上选择“窗口”“行为”命令，在窗口右边的面板组中将显示“行为”面板。（2）在“行为”面板中单击“添加行为”按钮，在弹出的行为列表中选择“检查表单”选项，弹出“检查表单”对话框，如图11.12所示。在“检查表单”对话框的“命名的栏位”列表中，选中“文本UserName在表单form1”选项，选中“必需的”复选框，单击“确定”按钮完成验证表单行为“检查表单”的添加。返回第13页，共25页。第11章用表单收集数据142022/7/2911.3.4插入“友情连

7、接”下拉菜单 具体操作步骤见教材第234页：1插入“跳转菜单”2修改友情链接返回第14页，共25页。第11章用表单收集数据152022/7/29实例2 制作新闻编辑网页设计目标页面分析实训引导制作步骤第15页，共25页。第11章用表单收集数据162022/7/29设计目标制作一个录入新闻的表单网页，效果如图11.17所示。要求输入新闻标题、新闻内容，选择新闻分类、内容主题、发布时长，单击“提交”按钮录入一条新闻；单击“浏览”按钮选定要上传新闻图片附件，单击“上传”按钮为新闻添加附件。 返回第16页，共25页。第11章用表单收集数据172022/7/29页面分析本页面包含如下对象：1“标题”右边

8、的输入框为单行类型的“文本域”对象。2“内容”右边的输入框为多行类型的“文本域”对象。3“新闻分类”右边的“单选按钮”对象。4“主题内容”右边的“复选框”对象。5“发布时长”右边的“菜单”对象。6“隐藏域”对象。7“新闻图片附件”右边为“文件域”对象。8“提交”按钮和“上传”按钮为“提交表单”类型的“按钮”对象。9“重置”按钮为“重置表单”类型的“按钮”对象。返回第17页，共25页。第11章用表单收集数据182022/7/29实训引导1本实例和上一实例的实现过程类似，创建的是HTML网页，可以直接打开网页进行测试，不需要Web服务器。2页面效果请参见配套光盘webcoursechapter11

9、result文件夹下的ex11_NewsInsert.html文件。返回第18页，共25页。第11章用表单收集数据192022/7/29制作步骤首先新建一个文件，将页面标题设置为“新闻编辑”，然后将网页保存到本地站点的根文件夹futurewebpages下，取名为ex11_NewsInsert.html。接下来依次按照下述内容进行操作：1在网页中插入了一个5行1列的表格，并设置表格的属性。2在表格第1行输入标题“新闻编辑”，在表格第5行输入文字“版权所有”，并将第1行和第5行的行高设置为40。表格的最终效果如图11.17所示。3创建新闻内容表单。4插入新闻编辑表单对象。5插入文件上传表单对象。

10、返回第19页，共25页。第11章用表单收集数据202022/7/2911.5.1创建新闻内容表单 具体操作步骤见教材第238页：（1）将插入点置于表格的第2行内，插入一个表单。（2）选中表单，将表单名称更改为“formNews”。（3）在“动作”输入框中输入“ex11_NewsInsert.html”。（4）指定表单的MIME类型为application/x-www-form-urlencode。（5）将插入点置于表单内，插入了一个7行2列的内表格，用作插入文本域、按钮等表单对象。（6）在表格输入相关文字并设置表格的属性。返回第20页，共25页。第11章用表单收集数据212022/7/2911

11、.5.2插入新闻编辑表单对象 具体操作步骤见教材第238页：1插入标题文本域对象2插入内容文本域对象3插入新闻分类单选按钮组对象4插入内容主题复选框对象5插入“发布时长”下拉菜单对象6插入包含新闻编辑时间的隐藏域7插入按钮对象8为“提交”按钮添加验证表单的行为返回第21页，共25页。第11章用表单收集数据222022/7/2911.5.3插入文件上传表单对象 具体操作步骤见教材第244页：插入一个表单，设置其属性；插入一个2行2列的表格，设置单元格对齐方式，添加说明文字；插入一个文件域；插入一个按钮，设置按钮上的文字为“上传”。返回第22页，共25页。第11章用表单收集数据232022/7/29本章小结 作为网页浏览者，用表单提交信息是上网中经常遇到的操作，也是进行网络交互的常用手段之一。日常的网上注册、登录、写邮件、网上商务、网上搜索等等都是通过表单来提交信息的。作为要收集信息的网页，通常是先插入表单，然后在表单内插入一些表单对象，例如：文本域、按钮、单选按钮、复选框、文件域、隐藏域等。表单对象插入后，还要设置其名称和其它一些属性，以使服务器端的处理程序能“对号入座”。表单被提交到服务器后，处理表单的程序有多种技术可以实现，本书将