第10章 表单的应用

第10章表单的应用第10章表单的应用第10章表单的应用•内容提要•表单的概念•如何创建表单•表单对象的添加第10章表单的应用10.1创建表单•10.1.1了解表单表单的组成：表单域和表单对象第10章表单的应用10.1创建表单•10.1.2如何创建表单1.通过菜单栏创建表单a)建立一个网页文档b)将插入点放置到要插入表单的位置c)使用主菜单中的“插入”——“表单”——“表单”命令第10章表单的应用10.1创建表单•10.1.2如何创建表单2.通过“插入”栏创建表单a)建立一个网页文档b)将插入点放置到要插入表单的位置c)将“插入”栏切换到“表单”类别，并单击其中的“表单”按钮，即可插入表单。第10章表单的应用10.1创建表单•10.1.3设置表单属性表单名称：设置表单的名称，可用于处理程序的调用。动作：在文本框中输入或者浏览处理该表单的动态页或脚本程序，用于处理表单提交的数据。目标：指定一个目标窗口来处理该表单的动态页或脚本程序的打开方式。方法：指定将表单数据传输到服务器的方法，有3个选项：POST（发送）GET（获取）默认MIME类型：指定提交给服务器进行处理的数据所使用的编码类型第10章表单的应用10.2添加表单对象•10.2.1添加文本域•文本域有三种类型•单行文本域•密码域•多行文本域第10章表单的应用10.2添加表单对象1.单行文本域用来填写单行文本信息，不允许用户对文字进行换行添加步骤：（1）将光标插入到要添加文本域的表单内。（2）执行“插入”→“表单”→“文本域”命令，或将插入工具栏切换到“表单”类别，单击“文本域”，即可在光标所在处添加文本域。（3）选中“文本域”表单对象，在其属性面板中选择“单行”文本域类型。第10章表单的应用10.2添加表单对象2.多行文本域提供输入多行文本信息的文本框，用于设置留言板等文字较多的部分。添加步骤：同单行文本域的添加步骤第10章表单的应用10.2添加表单对象3.密码文本域用来让用户输入密码，输入的字符以占位符“●”显示，以隐藏原始内容。第10章表单的应用10.2添加表单对象10.2.2添加单选按钮和单选按钮组1.单选按钮用户在一组选项中只能选择单个选项时用到单选按钮添加单选按钮的步骤：a)将光标插入到要添加单选按钮的表单中b)执行“插入”——“表单”——“单选按钮”命令或单击按钮c)在弹出的对话框中输入标签文字，并选择文字所在的位置，最后单击“确定”按钮即可。第10章表单的应用10.2添加表单对象2.单选按钮组单选按钮组是为了方便插入一组单选按钮。•插入单选按钮组的具体操作步骤如下：（1）将光标插入到要添加单选按钮组的表单中。（2）执行“插入”→“表单”→“单选按钮组”命令，或将插入工具栏切换到“表单”类别，单击“单选按钮组”按钮，弹出“单选按钮组”对话框，如图10.11所示。第10章表单的应用10.2添加表单对象10.2.3添加复选框复选框具有多选性，允许在一组选项中选择一个或多个选项，如图10.13所示。第10章表单的应用10.2添加表单对象10.2.3添加复选框•添加复选框的具体操作步骤如下：（1）将光标放在表单中要添加复选框的位置。（2）执行“插入”→“表单”→“复选框”命令，或将插入工具栏切换到“表单”类别，单击“复选框”按钮，即可插入复选框，复选框显示为一个小方块，在它后面可以加上说明文字。（3）选中添加的某个“复选框”对象，可以在“属性”面板中进行相关设置，如图10.14所示，“复选框”对象具有下列属性：第10章表单的应用10.2添加表单对象10.2.4添加列表/菜单当需要选择的项目比较多时，为了节省空间，可以把这些选项集中到一个“列表/菜单”的表单对象中，浏览者可以通过列表或菜单提供的选项选择适当的值。在列表中允许用户选择多个选项，而菜单只允许访问者从中选择一项，第10章表单的应用10.2添加表单对象10.2.4添加列表/菜单1.插入列表/菜单（1）将光标放到表单中要插入列表/菜单的位置。（2）执行“插入”→“表单”→“列表/菜单”命令，或将插入工具栏切换到“表单”类别，单击“列表/菜单”，即可插入列表/菜单对象。第10章表单的应用10.2添加表单对象10.2.4添加列表/菜单2.设置列表/菜单属性列表/菜单：设置列表/菜单的名称。类型：指定此对象是列表还是菜单。如果是列表，用户可以设置其高度，即在不滚动情况下能显示出来的选项数；选定“允许多选”复选框，也可以设置是否允许用户从列表中选择多项。高度：该项只用于列表类型，指定列表中可显示的行数。选定范围：选中“允许多选”后，可以结合Shift键对列表中的项目进行多选，否则为单选。第10章表单的应用10.2添加表单对象10.2.4添加列表/菜单2.设置列表/菜单属性初始化选定：指定列表/菜单框开始显示时定位在哪一个选项上。列表值：单击该按钮，打开“列表值”对话框，在“项目标签”下可输入列表/菜单内容，单击按钮，添加新内容，单击按钮删除内容；添加完成后，可单击“确定”按钮，如图10.18所示即为添加后的列表值。第10章表单的应用10.2添加表单对象10.2.5添加跳转菜单跳转菜单的外观和列表/菜单中的菜单类型差不多，不同的是跳转菜单具有超级链接的功能，在其中选择一个选项，将跳转到相应的页面中。第10章表单的应用10.2添加表单对象10.2.5添加跳转菜单•创建跳转菜单的具体操作步骤如下：（1）将光标放到要插入跳转菜单的位置。（2）执行“插入”→“表单”→“跳转菜单”命令，或单击“表单”类别工具栏中的“跳转菜单”按钮，打开“插入跳转菜单”对话框，如图所示。第10章表单的应用10.2添加表单对象10.2.6添加按钮网页文档中存在3种类型的按钮，分别是：•提交按钮：单击时将表单数据提交到表单域Action属性所指定的服务器端程序或一个E-mail地址。•重置按钮：单击后表单中各项数据恢复为初始值状态。•命令按钮：必须为它编制相应的脚本程序，将按钮链接到特定的函数，否则默认状态下，添加的按钮是一个提交类型的按钮。第10章表单的应用10.2添加表单对象10.2.6添加按钮1.添加按钮添加按钮的具体操作步骤如下：（1）将光标放到要插入按钮的位置。（2）执行“插入”→“表单”→“按钮”命令，或单击“表单”类别工具栏中的“按钮”，即可插入按钮，如图10.21所示为插入的提交按钮和重置按钮。第10章表单的应用10.2添加表单对象10.2.6添加按钮2.设置按钮属性按钮名称：给按钮命名，Dreamweaver有两个保留名称：“提交”和“重置”。值：设置显示在按钮上的文本。动作：设置按钮被单击时发生什么动作。有3个选项：提交表单、重设表单和无。选择“无”时，单击按钮则不会发生任何动作。第10章表单的应用10.2添加表单对象10.2.7其他表单对象1.隐藏域隐藏域可存储用户输入的信息内容，并向服务器提供这些数据，便于通过后台处理程序实现在该用户下次访问此站点时显示这些数据的目的。第10章表单的应用10.2添加表单对象10.2.7其他表单对象2.图像域使用Photoshop或Fireworks等图形处理软件制作一些漂亮的按钮图像后，利用Dreamweaver中的表单对象图像域来插入该按钮以替代Dreamweaver中默认的按钮。如图10.24所示，提交按钮是由Photoshop软件制作而成，通过插入图像域对象添加到网页中。第10章表单的应用10.2添加表单对象10.2.7其他表单对象3.文件域文件域是由一个文本框和一个显示“浏览”字样的按钮组成，它的作用就是使访问者能浏览到本地计算机上的某个文件，并将该文件作为表单数据上传，如图10.25所示。第10章表单的应用10.3表单应用实例•BBS登陆界面第10章表单的应用