应用表单和表单对象.doc

单元二 模板与表单的使用 项目三应用表单和表单对象教学目标1理解表单的概念、用途以及表单对象的注意事项；2掌握表单的创建和设置，以及表单的检查；3掌握各表单对象的插入和属性的设置，以及表单中数据的提交；4掌握商品订购界面、留言板以及注册表界面的制作；教学要求1认真听讲，专心操作, 操作规范， 认真记录实验过程，总结操作经验和写好实验报告，在实验中培养严谨科学的实践操作习惯；2遵守学校的实验室纪律，注意人身和设备的安全操作，爱护实验设备、及时上缴作业；3教学环境： 50台计算机，并安装WindowsXP操作系统以及Dreamweaver8以上系统。知识要点1理解表单的概念、用途；2认识表单对象及其注意事项；技术要点1掌握表单的创建和设置，以及表单的检查；2掌握各表单对象的插入和属性的设置，以及表单中数据的提交；3掌握商品订购界面、留言板以及注册表界面的制作；技能训练一讲授与示范正确启动计算机，在最后一个磁盘上建立以学号为名的文件夹，从指定的共享文件夹中将“实习指导书”和其他内容复制到该文件夹中。(一) 表单的概念 1表单可以实现浏览者与服务器之间信息的交互传送，实现网络信息收集处理的一种重要的方式，表单是动态网页的灵魂。2用途通过表单可以从Internet服务器网络的用户端收集信息例如收集用户资料、获取用户订单，然后将收集来的信息经过服务器处理后再反馈给用户。3通常表单的工作过程1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮；2）通过Internet将信息传送到服务器上；3）服务器上专门的程序对这些数据进行处理，若有错误会返回错误信息，并要求纠正错误；4）当数据完整无误后，服务器反馈一个输入完成信息。4表单组成一个完整的表单设计包含两个部分1）表单对象部分指在网页中进行描述的表单对象，由网页设计师制作出，即看到的页面界面，并不具备工作能力；。2）应用程序部分它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。程序设计师来编写，实现表单与数据库之间的连接。(二) 认识表单对象在 Dreamweaver 中，表单输入类型称为表单对象。选择“插入” “表单对象”来插入表单对象；或者如图1显示的“表单”面板选择某表单对象实现插入表单对象。1表单“表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。2文本域“文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。3复选框“复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。图1表单面板的表单对象4单选按钮“单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。5单选按钮组“单选按钮组”插入共享同一名称的单选按钮的集合。6列表/菜单“列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。7跳转菜单“跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。8图像域“图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。9文件域“文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。10按钮“按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。11标签“标签”在文档中给表单加上标签，以形式开头和结尾。12字段集“字段集”在文本中设置文本标签。(三)表单的创建1创建表单1）将插入点放在希望表单出现的位置。2）选择“插入” “表单”或 选择“插入”面板上的“表单”面板 “表单” 按钮图标。图2表单的插入表单在浏览网页中属于不可见元素。当页面处于“设计”视图中时，用红色的虚轮廓线指示表单。若没有看到此轮廓线，请检查是否选中了“查看” “可视化助理” “不可见元素”。2表单属性面板在文档中插入了表单对象后，用鼠标选中表单红色虚线框，或单击HTML状态栏中的标记，系统就会弹出该表单对象的属性面板，如图3所示：图3表单的属性1）表单名称：设置表单的名称，可用于程序调用；2）“动作”文本框：指定处理该表单的动态也或脚本的路径；3）“方法”下拉列表：选择将表单数据传输到服务器的方法 POST 在 HTTP 请求中嵌入表单数据。 GET 将值追加到请求该页的 URL 中。默认 使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为 GET 方法。4） “目标” 下拉列表：弹出式菜单指定一个窗口，在该窗口中显示调用程序所返回的数据。目标值有：若命名的窗口尚未打开，则打开一个具有该名称的新窗口； _blank，在未命名的新窗口中打开目标文档； _parent，在显示当前文档的窗口的父窗口中打开目标文档； _self，在提交表单所使用的窗口中打开目标文档； _top，在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中；5）MIME类型：指定提交给服务器的数据所使用的编码类型；6）类：对表单应用定义好的CSS样式；3向表单添加表单对象1）文本域是表单的重要对象之一，它的作用就是接受访问者输入的一切信息。2）隐藏域用来存储非用户输入信息或值，在提交表单时传递给服务器；例如：用户登录某些页面时需输入用户名和密码，登录成功后，会在其他页面显示用户名，此时即可用隐藏域来显示用户名。3）单选框与复选框在表单中输入有些信息的选择是有限的，例如性别、婚姻等。4）列表/菜单列表/菜单的功能与单选按钮、复选框的功能相似，。a.菜单的特点：限制访问者选一项。 b.列表的特点：允许访问者选择多项。 任务1 列表和菜单的应用要求：设置列表和菜单，并进行互换步骤： 新建站点MD23，并创建一个页面文件listMenu.html； 选择表单插入栏，点击表单按钮插入表单； 将光标放置在表单内，然后单击“列表/菜单”按钮； 在“输入标签辅助功能属性”对话框中的标签文字：分 类，样式：无标签标记，即可在表单域中实现添加“列表/菜单”； 选中“列表/菜单”表单对象，在“属性”面板设置各项的值： 名称：默认值为select； 类型：分菜单和列表，默认值为菜单； 列表值：点击“列表值”按钮，在对话框通过“+”添加项目标签内容：财经、科技、体育、娱乐、军事等项，其对应的值如图4所示。图4 菜单列表值的设置 点击“确定”，按F12保存页面，并进行预览其效果； 选中“列表/菜单”表单对象，在“属性”面板的“类型”设置为“列表”：高度：高度设置为3 (预览时列表右侧将自动出现滚动条)；允许多选：勾选，则将从列表菜单中选择多个项目； 点击“确定”，保存页面，并按F12进行预览其效果；5）跳转菜单跳转菜单是文档中的一种下拉菜单，在下拉菜单中列出各种能够链接到其它文档的选项。6）按钮在网页的表单设计中，按钮有三种基本动作：a）提交表单（Submit Form）：将表单域内的内容发送到用户指定的地址。 b）复位表单（Reset Form）：将表单域内的所有表单对象（组件）的内容还原为初始值。 c）无动作（None）：也有称为自定义，也有称无动作。 7）图像域使用一些漂亮的图像按钮代替Dreamweaver自带的按钮，从而网更美观。8）文件域可以使用浏览者选择本地计算机上的文件，并将其上传到服务器上，与文本字段相似，只是后面多了一个“浏览”按钮，通过该按钮选择要上传的文件，或在编辑框中输入要上传文件的路径及文件名。(四)表单及表单的设置任务2 验证表单数据要求：实现对E-mail格式的验证及提示步骤： 新建页面文件verify.html，在其中插入一个表单，并在表单中插入一个文本字段和一个“提交”按钮，文本字设置如图5所示；图5文本字段的设置 选中文本字段，在“属性”面板上设置“文本域”名为E-mail，字符宽度：30，最多字符数：50； 选中”提交”按钮“窗口” “行为” 打开“行为”面板“添加行为”按钮“检查表单” “检查表单”对话框，设置如图6所示；图6检查表单的设置命名的栏位：显示所有设置过名称的表单对象，从中选择要验证某一项值：必须包含某种数据或必填选项；可接受：要验证的选项； 点击确定，保存页面，按F12预览效果。 验证提示预览时不输入任何信息直接点击“提交”，出现“提示必填项”提示；若输入不包含任意字符串信息点提交，出现“不符合E-mail地址格式”提示.任务3制作一个提交留言页面要求：设置如下图7页面布局效果所示的留言板提交界面图7留言板的界面步骤： 建立站点创建一个DM23站点，新建一个页面submit.html文件； 插入表单及表单对象 选择表单插入栏，点击表单按钮插入表单，将光标放置在表单内，插入一个6行2列的表格，表格居中，宽度380px，第1列宽度为70px，表格背景颜色设置为：#FF99FF，并将表格的第1、5、6行合并； 在第1行输入相关文字信息，如图4页面布局效果所示，分别在第1列的第2、3、4行插入文本信息； 分别在第2列的第2、3行插入“文本字段” ，即文本框，在插入文本框时选择，在属性面板中设置文本域的名分别为name、password，字符数30以及类型为单行，效果如图8所示；图8文本字段的属性设置 在第2列的第第4行插入“文本区域”，即多行文本框，在属性面板设置名称、字符宽度及行数，效果设置如图9所示；图9文本区域的属性设置 在第5行插入两个按钮：提交、重置，在属性面板设置名称、值及动作，效果如图10所示；图10按钮的属性设置 制作网页跳转菜单 在表格第6行，输入“站点导航：”，并在其后选择表单插入栏中的“跳转菜单”命令，在网页中插入一个跳转菜单。 在弹出的“跳转菜单”对话框中，根据提示输入如图11所示的内容；图11跳转菜单的设置 点击确定