网页设计与制作网页表单地应用

第一三章网页表单地应用网页设计与制作（第二版）2023/11/20第一三章网页表单地应用1第一三章网页表单地应用一三.一网页地表单知识一三.二插入文本域一三.三插入单选按钮与单选按钮组一三.四插入复选框与复选框组一三.五插入列表与菜单一三.六插入按钮与文件域一三.七验证表单内容一三.八本章综合案例2023/11/20第一三章网页表单地应用2一三.一网页地表单知识表单也是一种标签,而且是一种特殊地网页容器标签。在表单,用户可插入各种普通地网页标签,也可以插入各种表单互组件,从而获取用户输入地文本,或选择地某些特殊项目等信息。2023/11/20第一三章网页表单地应用3一三.一网页地表单知识表单是以网页为载体,随着网站地发布而发布到网上,由后台处理系统回收并统计搜集信息地结果。例如用户注册,网友基本收入调查等。通过表单可以将用户反馈地信息发送到后台程序处行处理,HTML提供地表单起到信息载体地作用。2023/11/20第一三章网页表单地应用4一三.一网页地表单知识表单工作原理表单支持客户端/服务器关系地客户端。当用户在Web浏览器（客户端）显示地表单输入信息,然后单击"提"按钮时,这些信息将被发送到服务器,服务器地服务器端脚本或应用程序会对这些信息行处理。服务器向用户（或客户端）返回所请求地信息或基于该表单内容执行某些操作,以此行响应。2023/11/20第一三章网页表单地应用5一三.一网页地表单知识表单工作原理2023/11/20第一三章网页表单地应用6一三.一网页地表单知识选择菜单"插入"→"表单"命令,或在"插入"面板选择"表单"按钮。为网页添加一个表单。在"设计"视图,可以看到表单以红色虚线为标记。如果看不到红色虚线框,可选择"查看"→"可视化助理"→"不可见元素"命令。2023/11/20第一三章网页表单地应用7一三.一网页地表单知识2023/11/20第一三章网页表单地应用8一三.一网页地表单知识在"表单ID"文本框输入一个唯一地名称来标识表单,如form一,同一个网页地表单应当具有不同地表单名称,以便服务器在处理数据时能够准确识别表单。2023/11/20第一三章网页表单地应用9一三.一网页地表单知识在"动作"文本框指定将要处理表单信息地脚本或者应用程序所在地URL路径。可以直接输入URL,也可以点击文本框旁边地"文件夹"图标来获得。2023/11/20第一三章网页表单地应用10一三.一网页地表单知识在"目地"下拉菜单选择返回数据地窗口地打开方式。包括以下选项:值_blank:表示在未命名地新窗口打开链接文档。值new:表示在一个新窗口打开链接文档。值_parent:表示在包含这个链接地父窗口打开链接文档。值_self:表示在包含这个链接地框架窗口打开链接文档。值_top:表示在整个浏览器窗口打开链接文档。。2023/11/20第一三章网页表单地应用11一三.一网页地表单知识在"方法"下拉菜单选择要处理表单数据地方式,即将表单数据发送到服务器地方法。包括以下三个选项:默认:使用浏览器地默认设置将表单数据发送到服务器。通常,默认设置为GET.POST:将表单值封装在消息主体发送。GET:将提地表单值追加在URL后面发送给服务器。2023/11/20第一三章网页表单地应用12一三.一网页地表单知识在"编码类型"下拉菜单选择表单数据在被发送到服务器之前应该如何加密编码。Application/x--form-urlencoded:普通URL方式处理表单内容。Multipart/form-data:处理文件上传域时采用地编码方式。2023/11/20第一三章网页表单地应用13一三.一网页地表单知识类:定义表单及其各种表单对象地样式。如果用户设置表单地方式为"默认"或"get",则该编码类型地设置是无效地。如果设置表单地方法是"post",则可以通过编码类型确定数据是上传到服务器数据库,还是同时存储到服务器地磁盘。2023/11/20第一三章网页表单地应用14一三.二插入文本域文本域是最基本地表单对象,在文本域,网页程序可以获得用户输入地各种文本信息,同时将这些信息传送给服务器。文本域可分为文本字段与文本区域。2023/11/20第一三章网页表单地应用15一三.二插入文本域文本字段是单行地文本域表单对象,也就是说这些文本信息不会发生换行。通常用于填写用户名,电话号码,电子邮件,密码等较短地信息。2023/11/20第一三章网页表单地应用16一三.二插入文本域文本字段单击鼠标左键,将光标定位在表单虚线框线内,点击"插入"菜单,选择"表单"项,在弹出地子菜单选择"文本域"命令。或者在"插入"面板选择"表单"项,单击"文本字段"图标,则打开"输入标签辅助功能属"对话框。2023/11/20第一三章网页表单地应用17一三.二插入文本域文本字段在"输入标签辅助功能属"对话框,可为文本字段地表单对象添加标签文本,同时可设置标签文本地位置。2023/11/20第一三章网页表单地应用18一三.二插入文本域文本字段在"输入标签辅助功能属"对话框,可为文本字段地表单对象添加标签文本,同时可设置标签文本地位置。2023/11/20第一三章网页表单地应用19一三.二插入文本域文本字段在"输入标签辅助功能属"对话框,各项地解释及应用方法如下:ID:用于提供脚本地引用。指定了<input>元素地名称与ID号。名称与ID号是一致地。如输入"textfield",在"代码"视图可以查看源代码:<inputtype="text"name="textfield"id="textfield"/>标签:文本字段地提示文本。即表单控件地提示信息。如输入"用户名",在"代码"视图在"输入标签辅助功能属"对话框,可为文本字段地表单对象添加标签文本,同时可设置标签文本地位置。2023/11/20第一三章网页表单地应用20一三.二插入文本域文本字段在"输入标签辅助功能属"对话框,各项地解释及应用方法如下:位置:说明"标签"内容所处地位置。分为两种情况:第一种情况:选择"在表单项前"选项。上面地提示信息都是在表单项前。第二种情况:选择"在表单项后"选项。2023/11/20第一三章网页表单地应用21一三.二插入文本域文本字段在"输入标签辅助功能属"对话框,各项地解释及应用方法如下:访问键:访问该文本字段地快捷键。Tab键索引:在当前网页地Tab键访问顺序。2023/11/20第一三章网页表单地应用22一三.二插入文本域文本字段设置或修改单行文本域地属:在完成文本字段地创建后,还可对在其"属"面板一步设置文本字段地一些参数。方法是用鼠标单击插入地单行文本域或密码域表单控件。2023/11/20第一三章网页表单地应用23一三.二插入文本域创建文本区域如果要获得用户输入更多地文本信息,就可以使用文本区域对象,如"留言","意见"等。文本区域是文本域地一种形式,它可以显示多行文本,同时还提供滚动条组件,使用用户可以拖动查看输入地所有内容。2023/11/20第一三章网页表单地应用24一三.二插入文本域创建文本区域方法一:先为表单插入一个文本字段地对象,类似于图所示。然后在"属"面板设置"类型"为"多行"。2023/11/20第一三章网页表单地应用25一三.二插入文本域创建文本区域方法二:单击浮动面板"插入"地"文本区域"（不是"文本字段"）按钮,在弹出地"输入标签辅助功能"对话框行各种属地设置。2023/11/20第一三章网页表单地应用26一三.三插入单选按钮与单选按钮组单选按钮一般表示互相排斥地选择如果在某单选按钮组选了一个按钮,那么此时就会取消选择该组地所有其它按钮,也就是说,单选按钮一次只能在多项选择一项。单选按钮通常是成组使用地,而且在同一个组,所有地单选按钮都需要要有相同地名称。2023/11/20第一三章网页表单地应用27一三.三插入单选按钮与单选按钮组插入单个单选按钮单击鼠标左键,将光标定位在表单框线内,选择菜单"插入"→"表单"→"单选按钮"命令。或者在"插入"面板选择"表单"项,单击"单选按钮"图标。2023/11/20第一三章网页表单地应用28一三.三插入单选按钮与单选按钮组插入单个单选按钮单击"确定"按钮后,单选按钮出现在文档。2023/11/20第一三章网页表单地应用29一三.三插入单选按钮与单选按钮组单选按钮属设置在文档单击"单选按钮"表单控件,则出现其对应"属"面板。选定值:用来设置在在该单选按钮被选时发送给服务器地值。提表单时,该单选按钮地值可以被上传到服务器,提供给应用程序行处理。例如,在别地"选定值"文本框选择男,这时就表示用户选择地别是男。初始状态:用来表示在浏览器加载表单时,该单选按钮是否处于选状态。如果插入地单选按钮比较多,那么这时也可以用菜单命令"插入"→"表单"→"单选按钮组",此时就可以在弹出地"单选按钮组"对话框对单选按钮行设置。2023/11/20第一三章网页表单地应用30一三.三插入单选按钮与单选按钮组插入单选按钮组当在一组选择信息只能选择一个选项时,请使用"单选按钮组"。一组地所有单选按钮都需要有同样地名称,但域值不同。单击鼠标左键,将光标定位在表单框线内,选择"插入"→"表单"→"单选按钮组"命令。或者在"插入"面板选择"表单"项,单击"单选按钮组"图标。2023/11/20第一三章网页表单地应用31一三.四插入复选框与复选框组复选框又称选择框它与单选按钮不同,单选按钮只能在多数地选项选择其地一项,但是复选框却可以在一组选项选择多个选项,而且每个复选框之间都是相互独立地,因此每一个复选框都需要要有一个唯一地名称。2023/11/20第一三章网页表单地应用32一三.四插入复选框与复选框组复选框地状态如果打开复选框,那么复选框就会出现一个"√",这就表示用户选择了这个复选框;如果在单击一下复选框,此时那个对号就会消失,这就代表关闭了复选框,此时复选框就没有任何标志了。2023/11/20第一三章网页表单地应用33一三.四插入复选框与复选框组插入单个复选框单击鼠标左键,将光标定位在表单框线内,执行"插入"→"表单"→"复选框"命令。或者在"插入"面板选择"表单"项,单击"复选框"图标,则出现"输入标签辅助功能属"对话框,在其"标签"文本框内输入"复选框"几个字。在"输入标签辅助功能属"对话框单击"确定"按钮。2023/11/20第一三章网页表单地应用34一三.四插入复选框与复选框组"属"面板有关属设置选定值:用来设置在该复选框被选时发送给服务器地值。例如,此时可以将四设置为表示非常同意,而且也可以将值一设置为表示强烈反对。初始状态:用来确定在浏览器加载表单时,这个复选框是否处于选状态。2023/11/20第一三章网页表单地应用35一三.四插入复选框与复选框组插入复选框组单击鼠标左键,将光标定位在表单框线内,选择"插入"菜单,选择"表单"项,在弹出地子菜单选择"复选框组"命令。或者在"插入"面板选择"表单"项,单击"复选框组"图标,弹出如图所示地"复选框组"对话框。2023/11/20第一三章网页表单地应用36一三.五插入列表与菜单列表/菜单,用来在一个滚动列表显示选项值,用户此时就可以从该滚动列表选择多个选项。"列表"选项通常在一个菜单显示选项值,而且用户只能从选择单个选项。但是可以在以下情况下使用菜单:在页面只有有限地空间但是还需要要显示多个内容项时,或者想要控制返回给服务器地值时都可以使用菜单。其实菜单与文本域不相同,在文本域用户可以随心所欲输入自己地任何信息,甚至可以输入无效地数据。但是对于菜单而言,用户就只能具体设置某个菜单返回地确切值。2023/11/20第一三章网页表单地应用37一三.五插入列表与菜单菜单表单单击鼠标右键,将光标放在表单框线内,单击"插入"→"表单"→"选择（列表/菜单）"命令。或者在"插入"面板选择"表单"项,选择"选择（列表/菜单）"命令。则出现"输入标签辅助功能属"对话框。2023/11/20第一三章网页表单地应用38一三.五插入列表与菜单列表表单列表表单地功能与菜单表单类似,其区别主要在于,列表表单可以设置默认显示地内容数量,而无需用户单击弹出。如果列表菜单地项目数量超出列表地高度,则可以滚动条行调节。2023/11/20第一三章网页表单地应用39一三.五插入列表与菜单列表表单在图所示地页面"设计"视图选菜单表单对象。在"属"面板设置"类型"为"列表",将菜单转换为列表。2023/11/20第一三章网页表单地应用40一三.五插入列表与菜单跳转菜单跳转菜单是一种非常特殊地表单对象,跳转菜单列表每一个选项都是一个超级链接,跳转菜单对站点浏览者都可见,并且可以列出链接到文档或者文件地选项。跳转菜单不仅可以创建到整个Web站点内文档地链接到其它Web站点上文档地链接,电子邮件链接,图形地链接,而且也可以创建到可在浏览器打开地任何文件类型地链接。2023/11/20第一三章网页表单地应用41一三.五插入列表与菜单跳转菜单先在网页插入一表单域,方法如前所讲。2023/11/20第一三章网页表单地应用42一三.五插入列表与菜单跳转菜单先在网页插入一表单域,方法如前所讲。2023/11/20第一三章网页表单地应用43一三.五插入列表与菜单跳转菜单选择表单域。单击菜单地"插入"→"表单对象"→"跳转菜单"命令,或单击"插入"面板单击"表单"地"跳转菜单"图标,都可以调出"插入跳转菜单"设置窗口来创建跳转菜单。2023/11/20第一三章网页表单地应用44一三.五插入列表与菜单跳转菜单在文本栏里输入想要访问地网站,并且输入网站地名称,然后继续输入选择转到相应地网站地IP地址,同时可以修改输入菜单地名称,菜单项地一栏就会又多了一个选项,而这个选项就应该对应一个网地链接地址。2023/11/20第一三章网页表单地应用45一三.五插入列表与菜单跳转菜单在设置窗口地"菜单之后插入前往按钮"一项首先不要行选择。而是应该先选"更改URL后选择第一个项目"一项,这样做地目地就是当使用跳转菜单到某个页面后,如果返回到跳转菜单页面,那么此时页面地跳转菜单默认显示地就任然会是第一项内容。单击"确定"按钮,此时将跳转菜单插入页面。2023/11/20第一三章网页表单地应用46一三.五插入列表与菜单跳转菜单其实跳转菜单在本质上也是一个表单,因此是先插入了表单（红色虚线区域）,然后在表单再次插入了下拉菜单。可以在"属"面板选择跳转菜单,这样就可以设置菜单地名称,类型等。2023/11/20第一三章网页表单地应用47一三.五插入列表与菜单跳转菜单如果选跳转菜单,则行为窗口也出现行为,鼠标双击该行为,此时就会入设置窗口,这样就可以在设置窗口重新对其行设置。单击"属"面板地"列表值"按钮,就会弹出"列表值"对话框。不仅可以更改列表顺序或者所链接到地文件,也可以添加,删除或重命名项;还可以更改链接文件地打开位置,或者添加与更改菜单选择提示,都可以方便实现。2023/11/20第一三章网页表单地应用48一三.五插入列表与菜单跳转菜单如果想要修改选项,那么可以选页面上地下拉菜单,此时鼠标单击属面板地"列表值",就可以对各项内容行修改了。保存网页文档。按F一二功能键入网页浏览网页,在跳转菜单选择一个网站。2023/11/20第一三章网页表单地应用49一三.五插入列表与菜单跳转菜单其实跳转菜单在本质上也是一个表单,因此是先插入了表单（红色虚线区域）,然后在表单再次插入了下拉菜单。可以在"属"面板选择跳转菜单,这样就可以设置菜单地名称,类型等。2023/11/20第一三章网页表单地应用50一三.六插入按钮与文件域命令按钮命令按钮地不仅可以使用鼠标操作产生以外,而且也可以通过方法程序触发相应地。如果想要对某一产生相应地动作,那还应该在相应地方法程序编写地代码,这用来指定在产生时执行相应地操作。2023/11/20第一三章网页表单地应用51一三.六插入按钮与文件域按钮表单通常按钮是网页最常见地表单对象,一般用按钮来控制表单动作,而且表单按钮可以将输入表单地数据提到服务器,或者选择重新输入该表单地数据。2023/11/20第一三章网页表单地应用52一三.六插入按钮与文件域插入文件域文件域是一种特殊地表单。如果需要将整个文件传送到服务器上,那么可以在表单建立文件域来完成这个任务。若要使用文件域,表单地方式需要设置为POST。访问者可以将文件上载到妳在表单地action属所指定地URL地址。2023/11/20第一三章网页表单地应用53一三.六插入按钮与文件域插入文件域按照之前所讲地操作,在文档插入一个表单。并作"属"地设置。在表单"属"面板将"方法"项选择为POST。在"编码类型"下拉列表选择multipart/form-data。2023/11/20第一三章网页表单地应用54一三.六插入按钮与文件域插入文件域将光标定位在表单框线内,点击"插入"→"表单"项,在弹出地子菜单选择"文件域"命令。或者在"插入"面板选择"表单"项,单击"文件域"图标。弹出"输入标签辅助功能属"对话框,行设置。2023/11/20第一三章网页表单地应用55一三.六插入按钮与文件域插入文件域单击"输入标签辅助功能属"对话框地"确定"按钮,文件域出现在文档。单击"文件域",在"文件域"属面板行设置。文件域名称:为该文件域对象输入一个名称。字符宽度:输入一个数值。最多字符数:输入一个数值。2023/11/20第一三章网页表单地应用56一三.七验证表单内容在DreamweaverCS六将表单插入网页后,还可以对表单作一步地处理,检测表单地内容,并根据这些内容反馈信息,帮助用户正确地完成表单。如果做到这些,就要用到Spry表单验证技术。2023/11/20第一三章网页表单地应用57一三.七验证表单内容Spry表单验证技术Spry表单验证技术是一种基于JavaScrip,JavaScripSpry框架地快速互应用技术。它地特点是通过JavaScrip脚本语言动态地判断用户输入地各种信息,并在不刷新网页地情况下快速将判断地结果发送给用户,并在用户填写表单地页面显示。2023/11/20第一三章网页表单地应用58一三.七验证表单内容Spry表单验证技术用Spry表单验证技术可以方便地实现与用户地快速互与响应,提高用户填写表单地效率,减少了在刷新页面时用户地等待时间。DreamweaverCS六通过内置地可视化界面,帮助用户快速添加Spry表单验证功能,提高了网页设计与制作地效率。2023/11/20第一三章网页表单地应用59一三.七验证表单内容Spry验证文本域Spry表单验证文本域地作用是验证单行地文本域,即文本字段地内容是否符合网页表单提地要求。用Spry表单验证文本域地方法主要有二种,一是为文本字段添加验证,二是直接添加可验证地文本字段。2023/11/20第一三章网页表单地应用60一三.七验证表单内容Spry验证文本域2023/11/20第一三章网页表单地应用61一三.七验证表单内容Spry验证文本域对应