表单Form.ppt

第8章 表单Form 万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交互的一个入口。只要有交互出现的地方，就会有表单。本章将介绍表单的用法。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。 8.1 插入表单 表单是交互过程不可缺少的工具，那么如何在网页中添加表单，具体步骤如下： 8.1 插入表单 单击【表单】按钮，完成插入表单，效果如图左所示。按F12键进行预览，如图右所示。 8.2 文字对象 在网页的交互过程中，文字是一个重要内容。如何把文字内容从客户端传送到服务端，表单的文字对象就是传送文字的入口。文本对象有单行文本域、多行文本域和密码文本域。单行文本域适用于输入少量文字内容；多行文本域适用于输入大量文字内容；密码文本域用于页面密码验证。 8.2.1 使用单行文本域 单行文本域适用于输入少量文字，例如页面验证的用户名及文章标题等。如何在网页中加入单行文本域？具体步骤如下： 8.2.1 使用单行文本域 按Ctrl+F3组合键，打开【属性】面板，如图上所示。在【初始值】文本框中输入“文本内容”，视图如图下所示。 8.2.2 使用多行文本域 前面介绍了单行文本域，了解了如何把客户端的内容通过单行文本域提交到服务端。但是单行文本域提交的内容毕竟是有限的。如果需要提交更多的内容，则要用到多行文本域。使用多行文本域的具体步骤如下： 8.2.2 使用多行文本域 选中多行文本域，按Ctrl+F3组合键，打开【属性】面板，如图上所示。在【字符宽度】文本框中输入10，在【行数】文本框中输入5，在【初始值】多行文本域中输入“多行文本域”，按Enter键，效果如图下所示。 8.2.3 使用密码文本域 在网页提交的内容中包含密码，用于验证用户身份。这时就要用到密码文本域，这是因为提交的密码不能以明文显示。如何在网页中添加密码文本域，具体步骤如下： 8.2.4 使用隐藏域 在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。如何向网页添加隐藏域，具体步骤如下： 8.3 选择标签 在网页中除了需要提交输入的文字，还有许多内容需要做成选项，从而为用户提供多种选择，使用起来更方便。在选择的时候可以是单选，也可以是多选。单选时使用单选按钮，多选时使用复选框。本小节将介绍如何对这两种选择方式进行操作。 8.3.1 使用单选按钮 单选按钮用于在众多选项中只能选取一个。例如填写个人信息的性别，只能是男或女，不可能同时是男又是女，此时需要用到单选按钮。插入单选按钮的具体步骤如下： 8.3.1 使用单选按钮 从图中可以看出，单选按钮的初始状态是未选中的。修改单选按钮可以改变初始值。 8.3.2 使用单选按钮组 前面介绍了如何操作单选按钮。通过上面的方法可以插入一个单选按钮组，但显示却有点繁琐。Dreamweaver提供了一个更简便的方法，可以直接插入一个单选按钮组，具体步骤如下： 8.3.3 使用复选框 前面介绍了如何操作单选按钮和单选按钮组。有时在选择时需要同时选择多个选项，例如用户提交的个人兴趣爱好，可以同时选择音乐、旅游和体育等，此时可以使用复选框，具体步骤如下： 8.4 列表与菜单 在网页中除了单选按钮和复选框供用户选择，还可以通过列表和菜单的方式提供选择。本小节将介绍如何在网页中添加列表与菜单。 8.4.1 使用菜单 像应用程序中的菜单一样，可以在很小的空间内为用户提供多种选择和操作。在网页添加菜单的具体步骤如下： 8.4.2 使用列表 前面介绍了菜单的操作，本小节介绍列表的操作，其操作的前8个步骤与插入菜单的步骤一样，这里就从第9步开始介绍，具体步骤如下： 8.4.3 使用跳转菜单 在网页中可以设计一个下拉跳转菜单，从而为网页节省很多空间。设计跳转菜单可能需要脚本编程，但在Dreamweaver中通过简单的步骤便可实现。具体步骤如下： 8.5 表单按钮 表单按钮用于控制网页中的表单。提交按钮用于提交已经填写好的表单内容，重置按钮用于重新填写表单的内容，它们是表单按钮的两个最基本的功能。除此之外还可以用作完成其他的任务，例如，通过单击按钮产生一个事件，调用脚本程序等。 8.5.1 表单按钮 填写好表单内容，最终要提交到服务端，此时单击提交按钮把表单内容发送到服务端。本小节将介绍如何在网页中插入表单按钮，具体步骤如下： 8.5.2 图像域 上一小节介绍了如何插入表单按钮，但这些按钮的外观都是由系统预设的。如果需要插入自定义的个性按钮，可以使用图像域，具体步骤如下： 8.6