表单.ppt
- 文档编号:6564237
- 上传时间:2023-05-10
- 格式:PPT
- 页数:23
- 大小:778KB
表单.ppt
《表单.ppt》由会员分享,可在线阅读,更多相关《表单.ppt(23页珍藏版)》请在冰点文库上搜索。
第13章表单,了解表单如何传值掌握表单元素的使用制作表单与服务器端程序或客户端脚本程序进行交互。
本章学习知识点,开始,上一张,下一张,返回,13.1了解表单,本章内容目录,13.2表单域的创建与修改,13.3常用表单元素,13.4检查表单,13.1了解表单,在页面中添加表单传递数据需要两个步骤,一是制作表单,二是编写处理表单提交的数据的服务器端应用程序或客户端脚本,通常是ASP、JSP等。
对表单进行处理的程序可以放在服务器端执行,现在比较流行的Web编程语言有ASP、PHP和JSP等。
网站中最常见的表单应用是注册页面、登陆页面等,也就是客户向服务器提交信息的场合,以申请论坛会员为例,用户填写好表单,单击某个按钮提交给服务器,服务器记录下用户的资料,并提示给用户操作成功的信息,还会返回给用户账号等信息,这时就成功完成了一次与服务器的交互,用户登陆论坛时,要填写正确的账户和密码,提交给服务器,服务器审核正确后,才允许用户登陆论坛,有时候还会分配给用户一些会员才有的权限。
如图13-1所示为常见的注册页面,如图13-2所示为常见的登录页面。
图13-1注册页面,图13-2登录页面,13.2表单域的创建与修改,13.2.1创建表单域,13.2.2设置表单属性,13.2.1创建表单域,将鼠标光标定位至要插入表单域的位置,选择主菜单“插入”“表单”“表单”命令,即可在指定位置插入一个表单域,表单域是一个红色的虚线矩形框,如图13-3所示。
还可以通过单击“表单”插入栏中的“表单域”按钮插入表单域,如图13-4所示。
图13-3表单域,图13-4“表单”插入栏,创建的表单域四周的红色虚线只在Dreamweaver8中可见,在浏览器中并不会显示出来。
只需根据自己的需要把表单元素拖到表单域中,表单域会自动调整大小以容纳下所有的表单元素。
13.2.2设置表单属性,表单的属性通过“属性”面板来设置。
单击创建的表单域,在编辑窗口下方出现表单的“属性”面板,如图13-5所示。
图13-5表单的“属性”面板,“属性”面板中的各项属性功能如下:
1、表单名称:
可以在这里为表单命名,在对表单数据进行处理的应用程序中有时候会用到。
2、动作:
用来处理表单数据的程序所在的地址。
可以直接在文本框中输入地址,也可以单击右侧的“浏览”按钮,在打开的“选择文件”对话框中进行选择。
3、方法:
设置表单的提交方式,也就是传递数据的方法。
在“方法”下拉列表框的选项中可以看到共有3种提交方式,分别是“默认”、GET和POST。
默认:
选择“默认”方式,数据提交方式将由浏览器决定,通常是GET方式。
GET:
选择GET方式,表单中的数据将附在“动作”中指定的页面的地址末尾传送出去,GET方式传送的速度快,但是能传送的数据量小,而且数据会在地址栏中被显示出来。
POST:
POST方式不限制所传送数据的大小,它是将整个表单中的所有数据作为一个文件(POSTDATA.ATT)传送出去的,一般情况下都使用这种方式提交表单。
4、目标:
目标用来设置要新打开的页面在什么地方显示,在“目标”下拉列表框中可以看到有4种选项,分别是_blank、_parent、_self和_top。
_blank:
在新打开的空白窗口中显示。
_parent:
在显示链接的框架的父框架集中打开,同时替换整个框架集。
_self:
在当前框架中打开链接,同时替换该框架中的内容。
_top:
在当前浏览器窗口中打开链接的文档,同时替换所有框架。
5、MIME类型:
用来指定对提交给服务器的数据的编码类型。
默认为application/x-www-form-urlencode,可以传送数值,multipart/form-data类型用来上传文件。
13.3常用表单元素,13.3.3按钮,13.3.4单选按钮,13.3.1文本字段,13.3.2文本区域,13.3.5复选框,13.3.6单选按钮组,13.3.13列表/菜单,13.3.8文件域,13.3.1文本字段,文本字段可以在表单中插入文本框,供用户输入数据,例如姓名、年龄和电话号码等。
文本字段的“属性”面板如图13-6所示。
图13-6文本字段的“属性”面板,文本字段的属性功能如下:
1、文本域:
用来给文本字段指定一个名称,每个文本域必须有一个名称,且必须是惟一的,多个文本字段名称不能相同。
2、字符宽度:
设置文本字段的长度。
3、最多字符数:
当类型为单行文本域或者密码文本域的时候,设置文本字段中最多可以输入的字符数,这个数字可以比“字符宽度”大。
4、类型:
设置文本字段为单行,多行或者密码。
5、初始值:
设置文本域首次载入到页面中时其中所显示的内容。
13.3.2文本区域,文本区域其实就是一个多行文本域,供用户输入留言,说明等多行的文字或者段落等。
选择主菜单“插入”“表单”“文本区域”命令,或者在“表单”插入栏中单击“文本区域”按钮,即可在指定位置插入一个文本区域。
文本区域的“属性”面板中的“换行”选项共有四个选项,功能如下:
1、默认:
由浏览器决定当输入的字符超过字符宽度的时候是否换行,在输入过程中可以通过按Enter键强制换行。
2、关:
当输入的字符超过字符宽度的时候不会换行,而是在下方出现水平滚动条。
3、虚拟:
当输入的字符超过字符宽度的时候会自动重起一行,当行数超过了能够显示的行数时会出现垂直滚动条,选择该选项,提交给后台程序处理的该文本字段内容不会换行。
4、实体:
会自动换行,一样会出现滚动条帮助查看文本内容,所不同的是选择此选项后,提交给程序处理的该文本字段内容也会换行。
13.3.3按钮,按钮是比较常见也是很重要的一种表单元素,通过单击按钮可以触发程序的执行。
将鼠标光标定位到要插入按钮的位置,选择主菜单“插入”“表单”“按钮”命令,或者在“表单”插入栏中单击“按钮”按钮,在弹出的“输入标签辅助功能属性”对话框中单击“取消”,即可在指定位置插入一个按钮。
按钮的“属性”面板如图13-13所示。
图13-13按钮的“属性”面板,按钮的属性功能如下:
1、按钮名称:
为按钮设置一个名字,尽量为按钮设置一个惟一的而且能代表它的意义的名字,因为通常会编写一些程序来响应按钮的单击事件,即按钮被单击后自动执行的一系列操作。
2、值:
设置显示在按钮上的文字。
3、动作:
动作属性包含3个选项,分别是“提交表单”、“重设表单”和“无”。
提交表单:
将把按钮设置为提交按钮,在单击此按钮后,会把表单提交给程序进行处理。
重设表单:
将把按钮设置为重设按钮,在单击按钮后,会将表单中各个元素的值清除,提供给用户一个空白表单供用户重新输入各个表单元素的值。
无:
按钮在被单击后将没有任何响应,必须再另外为该按钮编写要触发的程序。
否则该按钮不起任何作用。
4、类:
为按钮选择一个事先设置好的样式。
13.3.4单选按钮,单选按钮常用来让用户在一组互斥的选项中选择一项,比如性别,学历等。
在几个单选按钮中,用户选择了一个选项就不能选择其他的选项,当用户选中其他的选项时,以前选择的选项会自动取消选中状态。
将鼠标光标定位到要插入单选按钮的位置,选择主菜单“插入”“表单”“单选按钮”命令,或者单击“表单”插入栏中的“单选按钮”按钮,即可在指定位置插入一个单选按钮。
单选按钮的“属性”面板如图13-8所示。
图13-8单选按钮的“属性”面板,属性功能如下:
1、单选按钮:
设置单选按钮的名字。
2、选定值:
为此单选按钮设定一个值,这个值在提交表单时将会被传递给应用程序进行处理。
3、初始状态:
设置该单选按钮在页面中第一次载入的时候的状态,选中“已勾选”单选按钮,此单选按钮将是被选中状态;相反的,选中“未选中”单选按钮,则是没有选中的状态。
一定要注意将同一组中的单选按钮的名字都设为相同的,这样它们才能互斥,否则将不会产生只能单选一项的效果。
13.3.5复选框,复选框与单选按钮作用相似,但是复选框允许选择多个选项,它只关心哪些选项被选中,可以一次选中一个,也可以一次选中多个。
将鼠标光标定位至需要插入复选框的位置,选择“插入”“表单”“复选框”命令,或者单击“表单”插入栏中的“复选框”按钮,即可在需要插入复选框的位置插入复选框。
复选框的“属性”面板如图13-9所示。
图13-9复选框的“属性”面板,13.3.6单选按钮组,单选按钮组的作用是快速的插入一组单选按钮。
将鼠标光标定位到要插入单选按钮组的位置,选择主菜单“插入”“表单”“单选按钮组”命令,或者单击“表单”插入栏中的“单选按钮组”按钮,将会弹出“单选按钮组”对话框,如图13-10所示。
图13-10“单选按钮组”对话框,在对话框中可进行如下设置:
1、名称:
为单选按钮组设置一个名字。
2、单选按钮:
设置要添加的单选按钮的信息。
单击“加号”按钮可以添加一个单选按钮,“减号”按钮则是删除一个单选按钮,右侧的黑色上三角按钮和黑色下三角按钮可以为列表中的单选按钮排序。
“标签”项设置单选按钮的注释文字,“值”则是设置单选按钮的选定值。
3、布局,使用:
可以使用“换行符(标签)”或者“表格”布局这些单选按钮,使用“表格”方式将创建一个1列的表格,将单选按钮放在表格中,标签放在右边。
使用“换行符(标签)”则是使用换行区别每个单选按钮。
插入的单选按钮组如图13-11所示。
图13-11单选按钮组,13.3.13列表/菜单,列表/菜单可以创建一个列表或者菜单来显示一组选项,根据设置而定,可以一次选择一项,也可以一次选择多项。
将鼠标光标定位至要插入列表/菜单的位置,选择主菜单“插入”“表单”“列表/菜单”命令,或者单击“表单”插入栏的“列表/菜单”按钮,即可在指定的位置插入一个列表/菜单。
列表/菜单的“属性”面板如图13-12所示。
图13-12列表/菜单的“属性”面板,1、列表/菜单:
为此列表/菜单设置一个名字。
2、类型:
设置此列表/菜单元素是菜单还是列表。
选择“列表”时,“高度”可用,用来设置列表框中显示的内容的行数,“选定范围”也变为可用,把“允许多选”前面的复选框选中,可以允许用户一次选择多个选项。
3、初始化时选定:
设置列表/菜单元素第一次被页面载入的时候,哪个选项处于被选中状态。
4、列表值:
单击“列表值”按钮,将打开“列表值”对话框,如图13-13所示。
插入的列表/菜单如图13-14所示。
图13-13“列表值”对话框,图13-14列表/菜单,13.3.8文件域,文件域就是一个文本框和一个按钮,文本框用来输入或者获取某个文件的路径和名称,按钮用来浏览文件资源。
选择主菜单“插入”“表单”“文件域”命令,或者单击“表单”插入栏中的“文件域”按钮,即可插入一个文件域,如图13-15所示。
文件域的“属性”面板如图13-16所示,“字符宽度”设置文本框的长度,“最多字符数”设置文本框中能接纳的最多字符数。
图13-16文件域的“属性”面板,图13-15文件域,13.4检查表单,表单是用户和服务器进行交互的通道,信息的正确性和完整性非常重要,比如用户忘记了填写一些重要的内容,由于疏忽或者故意的输入一些没有意义的数据,把这些数据传递给服务器不仅损害用户的利益,还可能对服务器端的安全性和效率造成难以预料的损害。
检查表单功能可以对表单元素进行约束,如设置某些内容没有填写就提交表单时会提醒用户,在“年龄”和“电话号码”之类的文本框中填写了不是数字的内容时会提醒用户重新填写。
选择主菜单“窗口”“行为”命令,或者按下Shift+F4键,打开“行为”面板,单击“行为”面板上的按钮,在弹出的菜单中选择“检查表单”命令,弹出“检查表单”对话框,如图13-113所示。
图13-113“检查表单”对话框,“检查表单”对话框的设置如下:
1、命名的栏位:
表单元素将显示在这个列表框中。
2、值:
选中“必须的”复选框,设置在上面列表框中选择的表单元素为必填,如果用户没有填写,在提交表单时会提示。
3、可接受:
选中“任何东西”,表单元素可以接受任何数据;选中“数字”,表单元素只能接受数字;选中“电子邮件地址”,会检查表单元素的内容是不是一个电子邮件的地址;选中“数字从”,可在后面的文本框中输入两个数字,设置表单元素只能接受此指定范围内的数字。
如图13-18所示为检查出表单中的错误数值时弹出的错误提示框。
图13-18错误提示框,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 表单