《《表单单飞的鞋子》PPT课件.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：用户选择某个选项，则链接的文档或文件被打开。 选项：设置菜单
5、之后是否插入前往按钮以及更改URL后是否选择第一个项目。,9.2 常用表单对象设置,9.2.8 图像域 图像域一般应用于表单中完成触发表单的相关操作，与按钮的功能和类型相似，只是以图片的方式显示。用户在浏览网站的时候经常会看到一些很漂亮的水晶提交按钮，就是通过图像域的方式建立的。用户可以在表单中插入一个使用图像域生成的图形化按钮。 将光标定位在表单中，单击插入面板“表单”分类中的图像域按钮 ，打开“选择图像源文件”对话框，在对话框中选择用于生成图形化按钮的图像,9.2 常用表单对象设置,9.2.9 文件域 在使用文件域以前，必须保证服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=
6、multipart/form-data来保证文件被正确编码。另外，表单的传送方式必须设置为POST。 文件域的代码格式： ,9.2 常用表单对象设置,9.2.10 按钮 1提交按钮 提交按钮用来将输入的信息提交到服务器。 2重置按钮 重置按钮用来清除所填写的信息以方便用户重新填写。 3普通按钮 普通按钮用于单击按钮后要执行的动作。 ,9.2 常用表单对象设置,9.2.11 Spry框架简介 除了常用的表单对象之外，在插入面板的“表单”分类中还为设计者提供了Spry框架。Spry框架是一个JavaScript库，Web设计人员使用它可以为访问者提供更丰富体验的网页。有了Spry，用户就可以使用H
7、TML、CSS和极少量的JavaScript将XML数据整合到HTML文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。 在设计上，Spry框架的标记非常简单而且便于具有HTML、CSS和JavaScript基础知识的用户使用。Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。用户可以方便地插入这些构件，然后设置构件的样式。,9.2 常用表单对象设置,9.2.12 案例一：制作曙光大学网站用户登录界面 【案例综述】使用表单技术制作曙光大学网站首页用户登录界面。 【案例展示】本案例的效果如图9-26所示。,9.2 常用表单对象设置,9.2
8、.13 案例二：制作曙光大学网站用户注册页面 【案例综述】使用表单技术制作曙光大学网站用户注册页面。 【案例展示】制作用户注册表单收集注册用户的基本信息，是表单应用的典型实例。表单中使用了文本框、密码框、多行文本框、单选按钮、复选框、菜单和按钮等表单对象，本案例的效果如图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 习题,
《表单单飞的鞋子》PPT课件.ppt
