表单Form最新.ppt

表单的应用 万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交互的一个入口。只要有交互出现的地方，就会有表单。本章将介绍表单的用法。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。 1 插入表单 表单是交互过程不可缺少的工具，那么如何在网页中添加表单，具体步骤如下： 1 插入表单 单击【表单】按钮，完成插入表单，效果如图左所示。按F12键进行预览，如图右所示。 插入表单效果 预览效果 2 文字对象 在网页的交互过程中，文字是一个重要内容。如何把文字内容从客户端传送到服务端，表单的文字对象就是传送文字的入口。文本对象有单行文本域、多行文本域和密码文本域。单行文本域适用于输入少量文字内容；多行文本域适用于输入大量文字内容；密码文本域用于页面密码验证。 2.1 使用单行文本域 单行文本域适用于输入少量文字，例如页面验证的用户名及文章标题等。如何在网页中加入单行文本域？具体步骤如下： 【输入标签辅助功能属性】对话框 单行文本域效果图 2.1 使用单行文本域 按Ctrl+F3组合键，打开【属性】面板，如图上所示。在【初始值】文本框中输入“文本内容”，视图如图下所示。 【属性】面板 输入文本内容效果 2.2 使用多行文本域 前面介绍了单行文本域，了解了如何把客户端的内容通过单行文本域提交到服务端。但是单行文本域提交的内容毕竟是有限的。如果需要提交更多的内容，则要用到多行文本域。使用多行文本域的具体步骤如下： 【输入标签辅助功能属性】对话框 多行文本域效果 2.2 使用多行文本域 选中多行文本域，按Ctrl+F3组合键，打开【属性】面板，如图上所示。在【字符宽度】文本框中输入10，在【行数】文本框中输入5，在【初始值】多行文本域中输入“多行文本域”，按Enter键，效果如图下所示。 【属性】面板 设置属性效果 2.3 使用密码文本域 在网页提交的内容中包含密码，用于验证用户身份。这时就要用到密码文本域，这是因为提交的密码不能以明文显示。如何在网页中添加密码文本域，具体步骤如下： 密码文本域效果 2.4 使用隐藏域 在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。如何向网页添加隐藏域，具体步骤如下： 隐藏域效果 3 选择标签 在网页中除了需要提交输入的文字，还有许多内容需要做成选项，从而为用户提供多种选择，使用起来更方便。在选择的时候可以是单选，也可以是多选。单选时使用单选按钮，多选时使用复选框。本小节将介绍如何对这两种选择方式进行操作。 3.1 使用单选按钮 单选按钮用于在众多选项中只能选取一个。例如填写个人信息的性别，只能是男或女，不可能同时是男又是女，此时需要用到单选按钮。插入单选按钮的具体步骤如下： 【输入标签辅助功能属性】对话框功夫 单选按钮效果图 3.1 使用单选按钮 从图中可以看出，单选按钮的初始状态是未选中的。修改单选按钮可以改变初始值。 【属性】面板 初始选中状态效果 3.2 使用单选按钮组 前面介绍了如何操作单选按钮。通过上面的方法可以插入一个单选按钮组，但显示却有点繁琐。Dreamweaver提供了一个更简便的方法，可以直接插入一个单选按钮组，具体步骤如下： 【单选按钮组】对话框 单选按钮组效果 3.3 使用复选框 前面介绍了如何操作单选按钮和单选按钮组。有时在选择时需要同时选择多个选项，例如用户提交的个人兴趣爱好，可以同时选择音乐、旅游和体育等，此时可以使用复选框，具体步骤如下： 【输入标签辅助功能属性】 复选框效果 4 列表与菜单 在网页中除了单选按钮和复选框供用户选择，还可以通过列表和菜单的方式提供选择。本小节将介绍如何在网页中添加列表与菜单。 4.1 使用菜单 像应用程序中的菜单一样，可以在很小的空间内为用户提供多种选择和操作。在网页添加菜单的具体步骤