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