当前位置:首页 >> 高中教育 >> 表单

表单


第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-3 表单域

还可以通过单击“表单”插入栏中的“表单域”按钮插入表单域,如 图13-4所示。

图13-4 “表单”插入栏

创建的表单域四周的红色虚线只在Dreamweaver 8中可见,在浏览器中 并不会显示出来。 只需根据自己的需要把表单元素拖到表单域中,表单域会自动调整大 小以容纳下所有的表单元素。

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.1 13.3.2 13.3.3 13.3.4 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、布局,使用:可以使用“换行符(<br>标签)”或者“表格”布局这些单 选按钮,使用“表格”方式将创建一个1列的表格,将单选按钮放在表格中,标签 放在右边。使用“换行符(<br>标签)”则是使用换行区别每个单选按钮。

插入的单选按钮组如图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-15 文件域

图13-16 文件域的“属性”面板

13.4 检查表单
表单是用户和服务器进行交互的通道,信息的正确性和完整性非常 重要,比如用户忘记了填写一些重要的内容,由于疏忽或者故意的输入 一些没有意义的数据,把这些数据传递给服务器不仅损害用户的利益, 还可能对服务器端的安全性和效率造成难以预料的损害。 检查表单功能可以对表单元素进行约束,如设置某些内容没有填写 就提交表单时会提醒用户,在“年龄”和“电话号码”之类的文本框中 填写了不是数字的内容时会提醒用户重新填写。

选择主菜单“窗口”→“行为”命令,或者按下Shift+F4键,打开 “行为”面板,单击“行为”面板上的 按钮,在弹出的菜单中选择 “检查表单”命令,弹出“检查表单”对话框,如图13-113所示。

图13-113 “检查表单”对话框

“检查表单”对话框的设置如下:
1、命名的栏位:表单元素将显示在这个列表框中。 2、值:选中“必须的”复选框,设置在上面列表框中选择的表单元素为必填, 如果用户没有填写,在提交表单时会提示。 3、可接受:选中“任何东西”,表单元素可以接受任何数据;选中“数字”, 表单元素只能接受数字;选中“电子邮件地址”,会检查表单元素的内容是不是一 个电子邮件的地址;选中“数字从”,可在后面的文本框中输入两个数字,设置表 单元素只能接受此指定范围内的数字。

如图13-18所示为检查出表单中的错误数值时弹出的错误提示框。

图13-18 错误提示框


更多相关文档:

网页表单细节与规范

___ 表单的制作规范为视觉规范的其中一部分,它需要和视觉规范的其他版块配合使用,不可独立。 此方法在项目工作中能迅速的完成表单制作,作为一个标准去检测开发的实...

表单_基础知识

插入表单域 要在网页中插入表单对象, 首先应该插入一个表单域, 否则服务器将无法处理用户填写 的信息。操作步骤如下: 步骤 1: “插入”面板中,选择“表单”分类...

Dreamweaver表单应用详解

Dreamweaver表单应用详解_互联网_IT/计算机_专业资料。玩转表单玩转表单 本专题从最基础的表单知识,到表单的高级应用,让你有一个比较全面地认识,相信你在读完本专题...

表单分类

比如,现在要建的是“请假表单” ,它属于“行政办公管理” ,那么我们就在“表单分类” 中新增一个类别。如下图所示: 填写表单类 别信息。 3. 新建分类以后,...

表单设计教程

通过“表单”向导来创建表单,表单向导有“单个表创建数据的表单”,“一对多表单向 导”合适创建基于两个具有一对多关系的两表的表单。 实例:制作成绩表按学校的...

WEB表单设计学习总结

WEB表单设计学习总结_互联网_IT/计算机_专业资料。表单设计WEB 表单设计学习总结 1 前言多数人不喜欢表单,因为填写表单是件麻烦的事。我们想做的是投票、申请 或者...

html网页表单制作

1.表单标签…… 1.表单标签…… 表单标签 语法:<FORM name=“form_name” ACTION=“URL” METHOD=“GET|POST”>…</FORM> Name :定义表单的名称 Method: ...

员工招聘录用表单大全

员工招聘录用表单大全_管理学_高等教育_教育专区。员工招聘录用表单 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 企业员工招聘申请单 ...

20120296 表单设计(一)

江西科技师范大学电子版实验报告 实验十二实验课程名称 实验项目名称 姓名 Visual FoxPro 程序设计 表单设计(一) 班级 指导老师 号 20120296 5 月 13 日 企法一...

网页制作中的表单应该如何设计?[凡科建站]

对于网站来说,用户注册、用户反馈、问卷调查、订阅服务等各种基本功能都是必不可 少的,而它们一般都需要用到表单功能,如果想提高这些方面的用户体验,那么就要在凡...
更多相关标签:
表单大师 | 表单设计器 | 麦客表单 | 在线表单 | html表单 | 表单设计 | 表单提交 | 表单样式 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com