表单单飞的鞋子.ppt

《表单单飞的鞋子.ppt》由会员分享，可在线阅读，更多相关《表单单飞的鞋子.ppt（21页珍藏版）》请在三一办公上搜索。

1、网页设计与制作教程(第4版）,机械工业出版社同名教材配套电子教案,表单简介常用表单对象设置检查表单四 实训,第9章 表单,9.1.1 表单的基本概念 网页中的表单主要负责数据的采集，例如，图9-1所示为网页中嵌入的一个用于搜索信息的表单，其中包括1个用于输入查找关键字的文本框、1个用于提交搜索的按钮和4个用于选择搜索类型的单选按钮。用户可以使用Dreamweaver创建将数据提交到大多数应用程序服务器（包括PHP、ASP和JSP）的表单。Dreamweaver还可以编写用于验证访问者所提供的信息的代码。例如，可以检查用户输入的电子邮件地址是否包含“”符号，或者某个必须填写的文本域是否包含值等。

2、,9.1 表单简介,在Dreamweaver中，制作表单可以通过表单对象实现，表单对象位于插入工具栏的“表单”分类中，如图9-3所示。表单对象按照从左到右的顺序依次是：表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选按钮组、列表/菜单、跳转菜单、图像域、文件域、命令按钮、标签、字段集和Spry构件等。,9.1.2 表单对象,9.2.1 表单 与表单有关的标记有和，表单的基本语法及格式为：标记主要处理表单结果的处理和传送。,9.2 常用表单对象设置,9.2.2 文本域1文本框文本框是一种让访问者自己输入内容的表单对象，通常用来填写单个字或者简短的回答，如姓名、地址等。2密码框密码框是一种特

3、殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。3多行文本框在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字，使用多行文本框可以设置允许成段文字的输入。,9.2 常用表单对象设置,9.2.3 隐藏域 当表单被提交时，隐藏域就会将信息以设置时定义的名称和值发送到服务器上。代码格式：,9.2 常用表单对象设置,9.2.4 复选框 每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码格式：,9.2 常用表单对象设置,9.2.5 单选按钮 单选按钮通常以组为单位使用的，在同一组中的单选按钮都必须使用相同的名称

4、。代码格式：,9.2 常用表单对象设置,9.2.6 列表/菜单可以用标记和标记设置列表/菜单。标记的格式为：标记的格式为：列表与菜单方式的主要区别在于，前者在中的size属性值取大于1的值，此值表示在选择栏中不拖动滚动条可以显示选项的数目。,9.2 常用表单对象设置,9.2.7 跳转菜单 跳转菜单是可以导航的列表或菜单，其中的每个选项都链接到某个文档。将光标定位在表单中，单击插入面板“表单”分类中的跳转菜单按钮。跳转菜单包含三个基本部分：文本：菜单项的提示信息。选择时，转到URL：用户选择某个选项，则链接的文档或文件被打开。选项：设置菜单之后是否插入前往按钮以及更改URL后是否选择第一个项目。

5、,9.2 常用表单对象设置,9.2.8 图像域 图像域一般应用于表单中完成触发表单的相关操作，与按钮的功能和类型相似，只是以图片的方式显示。用户在浏览网站的时候经常会看到一些很漂亮的水晶提交按钮，就是通过图像域的方式建立的。用户可以在表单中插入一个使用图像域生成的图形化按钮。将光标定位在表单中，单击插入面板“表单”分类中的图像域按钮，打开“选择图像源文件”对话框，在对话框中选择用于生成图形化按钮的图像,9.2 常用表单对象设置,9.2.9 文件域 在使用文件域以前，必须保证服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=multipart/form-data来保证文件被正确编码。

6、另外，表单的传送方式必须设置为POST。文件域的代码格式：,9.2 常用表单对象设置,9.2.10 按钮1提交按钮提交按钮用来将输入的信息提交到服务器。2重置按钮重置按钮用来清除所填写的信息以方便用户重新填写。3普通按钮普通按钮用于单击按钮后要执行的动作。,9.2 常用表单对象设置,9.2.11 Spry框架简介 除了常用的表单对象之外，在插入面板的“表单”分类中还为设计者提供了Spry框架。Spry框架是一个JavaScript库，Web设计人员使用它可以为访问者提供更丰富体验的网页。有了Spry，用户就可以使用HTML、CSS和极少量的JavaScript将XML数据整合到HTML文档中，

7、创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry框架的标记非常简单而且便于具有HTML、CSS和JavaScript基础知识的用户使用。Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。用户可以方便地插入这些构件，然后设置构件的样式。,9.2 常用表单对象设置,9.2.12 案例一：制作曙光大学网站用户登录界面【案例综述】使用表单技术制作曙光大学网站首页用户登录界面。【案例展示】本案例的效果如图9-26所示。,9.2 常用表单对象设置,9.2.13 案例二：制作曙光大学网站用户注册页面【案例综述】使用表单技术制作曙光大学网站

8、用户注册页面。【案例展示】制作用户注册表单收集注册用户的基本信息，是表单应用的典型实例。表单中使用了文本框、密码框、多行文本框、单选按钮、复选框、菜单和按钮等表单对象，本案例的效果如图9-35所示。,9.2 常用表单对象设置,“检查表单”行为检查指定文本域的内容，以确保用户输入了正确的数据类型。使用onBlur事件将“检查表单”行为分别附加到各个文本域中，在用户填写表单时对域进行检查；或者使用onSubmit事件将其附加到表单中，在用户单击“提交”按钮时同时对多个文本域进行检查。将此行为附加到表单中，可以防止表单提交到服务器后出现指定的文本域中包含无效数据的情况。应当注意的是，“检查表单”行为

9、仅在文档中已插入了文本域的情况下才可用。,9.3 检查表单,9.4.1 实训一：制作“爱家美食”网站美食搜索页面【实训综述】读者在学习了表单和表单对象的基础上，进一步提高使用表单制作交互页面的能力。【实训展示】制作“爱家美食”网站美食搜索页面，浏览者可以从表单中搜索喜爱的菜谱或者餐厅，效果如图9-59所示。,9.4 实训,9.4.2 实训二：制作“爱家美食”网站用户意见反馈表单【实训综述】读者在学习了表单和表单对象的基础上，进一步提高使用表单制作交互页面的能力。【实训展示】实例效果如图9-60所示。,9.4 实训,1简答表单的工作原理及常用的表单对象。2使用表单技术制作如图9-61所示的个人注册页面。3使用表单技术制作如图9-62所示的美食搜索页面。4使用表单技术制作如图9-63所示的在线留言页面。,9.5 习题,