通过本章学习，应该掌握以下内容：
1,认识网页表单
2,利用 Dreamweaver MX创建表单的方法
3,利用 Dreamweaver MX编辑表单的方法
4,利用 HTML处理网页表单的方法第 7章 网页表单的处理
7.1 表单概述为了制作好复杂的表单网页,在 Dreamweaver MX
中提供了文本框,文本区,单选按钮,复选框,下拉列表框,提交按钮和重置按钮等丰富的表单域 。 这些表单域具有以下各自不同的功能：
（ 1） 单行文本框单行文本框用来输入比较简单的信息 。
（ 2） 多行文本框如果需要输入建议,需求等大段文字,使用 单行 文本框就显得力不从心了,这时通常使用带有滚动条的多行文本框 。
（ 3） 单选按钮单选按钮常用于表示唯一的选择结果,如,同学录注册,表单中的,性别,按钮 。
（ 4） 复选框复选框常用来表示许多项可以同时选中的事物,
比如个人爱好,所学科目和选购的产品种类等 。
（ 5） 下拉列表框当需要选择职业,文化程度等事项时,除了文本区以外,还可以考虑使用下拉列表框 。
（ 6） 提交按钮和重置按钮当用户完成了表单的填写后,如果需要提交数据,则可以单击表单中的提交按钮,通常按钮上的文字为,提交,或,确认,等 。 如上图中的,确定,
按钮；如果希望恢复表单为填写前的状态,以便重新填写,则可以单击重置按钮,通常按钮上的文字为,重置,,,重填,或,重新填写,等 。
Dreamweaver MX提供了一个专门的表单对象插入面板,面板上包含了各种表单对象 。 选择,窗口,|“插入,命令,打开插入面板,单击插入面板上的,表单,标签,切换到插入,表单,面板如图 2
所示 。
7.2 利用 Dreamweaver MX处理表单
7.2.1 表单插入面板
7.2.2 创建空白表单因为在发送表单时是以整个表单发送的,所以在插入表单元素前,先要在网页中插入空白的表单,
然后才能在表单中插入表单元素 （ 如文本框,按钮,
列表 /菜单,图片等 ）,以达到整体发送的效果 。
演示创建空白表单的过程 。
7.2.3 插入文本框文本框是一个接受文本信息的空白框 。 在文本框中几乎可以容纳任何类型的文本数据 。 利用它可以使网页设计师不必限制访问者提交的内容 。 在网页中,常见的文本框有 3种形式：
（ 1） 单行文本框 只能用来输入一行的信息 。
（ 2） 多行文本框 可以由设计者限定行数,并决定是否出现滚动条 。 该文本框可以输入多行信息 。
（ 3） 密码文本框 在该文本框中输入的信息,都会以,*” 显示在屏幕上 。
1,插入单行文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本域,命令 。 此时会在表单中插入一个单行文本框 。
2,插入多行文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本区域,命令 。 此时会在表单中插入一个单行文本框 。
3,插入密码文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本域,命令 。 此时会在表单中插入一个单行文本框 。 用鼠标单击此单行文本框,在属性面板上的
,类型,下单击,密码,单选按钮,则单行文本框变成了密码文本框 。
4,设置文本框属性在表单中插入文本框后,选择所插入的文本框,d
打开属性面板 设置文本框属性 。
7.2.4 插入单选按钮
1,插入单选按钮要在表单中插入单选按钮,首先将光标置于表单中的相应位置,输入提示信息,然后单击插入,表单,
面板上的图标,或选择,插入,|“表单对象,|“单选按钮,命令,插入单选按钮 。
2,设置单选按钮的属性在表单中选择单选按钮后,属性面板将变为如图所示 。
（ 1） 单选按钮：给单选按钮命名 。 同一组的单选按钮的名称必须相同,这一点非常重要 。
（ 2） 选定值：设置单选按钮被选时的取值 。 当用户提交表单时,该值被传送给处理程序 （ 如 CGI脚本 ）,应赋给同组的每个单选按钮不同的值 。
（ 3） 初始状态：指定首次载入表单时单选按钮是
,已勾选,还是,未勾选,。 一组单选按钮中,
只能有一个按钮的初始状态被设为选中 。
1,插入复选框
7.2.5 插入复选框将光标置于表单中适当位置,输入提示信息
,兴趣,,再给复选框添加说明性语言,读书,,
,旅游,,,体育,和,音乐,；然后单击插入
,表单,面板上的图标,或选择,插入,|“表单对象,|“复选框,命令,在选项的合适位置加入复选框 。
在表单中选择复选框后,其属性面板的显示与单选按钮属性面板基本相同 （ 只是图标不同 ） 。 但在给复选框命名时,要注意复选框与单选按钮命名的区别 。 单选按钮是以,组,为单位的,而复选框则是以,个,为单位的,所以每一个复选框的名称都不应该相同 。
2,设置复选框的属性
7.2.6 插入下拉列表框
1,插入下拉列表框要在表单中插入下拉列表框,应按如下步骤进行：
（ 1） 将光标定位在表单中适当位置,输入提示信息 。
（ 2） 单击插入,表单,面板上的图标,或选择
,插入,|“表单对象,|“列表 /菜单,命令,则在表单中出现下拉列表框的框架；选中该下拉列表框,
属性面板变成下拉列表属性面板,如图所示；
（ 3） 选择,类型,为,列表,,单击属性面板上的
,列表值,按钮 （ 确保下拉列表框处于选择状态 ）,
弹出,列表值,对话框,如图所示 。
（ 4） 在,列表值,对话框的,项目标签,下输入要在列表框中显示的内容,在,值,下输入与显示内容相应的值 （ 传送到服务器中的即为该值 ）,即可为列表框加入显示的内容 。
在表单中插入下拉列表框后,选择所插入的下拉列表框,其属性面板如图所示 。
2,设置下拉列表框属性根据要求完成下拉列表框类型,高度,列表值,
选定范围等属性的设置 。
7.2.7 插入按钮
1,插入,提交,按钮首先将光标置于需要插入按钮的表单中,单击插入,表单,面板上的图标,或选择,插入,|“表单对象,|“按钮,命令,则在表单中将插入一个,提交,
按钮 。2,插入,重置,按钮首先在表单中插入,提交,按钮,选中此按钮,
在属性面板上的,动作,下单击,重设表单,单选按钮 。 则在表单中出现,重置,按钮 。
3,插入普通按钮普通按钮的创建方法与,重置,按钮的创建方法基本上相同,但在属性面板上的,动作,下要选择,无,
单选按钮 。
4,按钮属性设置表单中的 3种按钮可以通过选择属性面板,动作,
中的不同选项实现相互转换 。
因为表单是以表格的形式创建的,所以可以通过设置表格的背景颜色来设置表单的背景颜色 。
7.2.8 设置表单的背景颜色利用 HTML也可以创建表单,创建表单时要用到表单标记符和表单输入标记符 。
7.3 利用 HTML处理表单
HTML中表单标记符为 FORM,其主要作用是设定表单的起止位置,并指定处理表单数据程序的
URL地址 。 其基本语法结构如下：
< FORM action= "URL" method= "GET"/"POST" </FORM>
其中 Action用于设定处理表单数据程序 URL的地址 。
method指定数据传送到服务器的方式 。 有两种主要的方式,当 method="GET"时,将输入数据加在 action
指定的地址后面传送到服务器；当 method="POST"
时则将输入数据按照 HTTP输送协议中的 POST传输方式传送到服务器 。
7.3.1 表单标记符
INPUT是表单输入标记符,在表单创建中使用频繁,大部分表单内容需要用到此标记符 。 其语法如下：
<INPUT type=text/textarea/password/checkbox/radon
/submit/reset/file/hidden/image/button>
各项的意义是：
type,text表示输入单行文本 。
type,textarea表示输入多行文本 。
type,password表示输入数据为密码,用,*” 表示 。
7.3.2 表单输入标记符
type,checkbox表示复选框 。
type,radio表示单选框 。
type,submit表示提交按钮,数据将被送到服务器 。
type,reset表示清除表单数据,以利于重新输入 。
type,file表示插入一个文件 。
type,hidden表示隐藏按钮 。
type,image表示插入一个图像 。
type,button表示普通按钮 。
创建单行文本框的基本语法如下：
<INPUT type="text" name=" "value=" "size="
"maxlength=" ">
其中 name属性指定了控件的名称； value属性指定了控件的初始值； size属性指定了文本框的宽度；
maxlength属性指定了在文本框中可以输入的最长文本数 。
7.3.3 控件定义方法
1,文本框和口令框创建复选框和单选框也是使用 INPUT标记符,语法分别如下：
<INPUT type="checkbox" name=" "value=" ",（ checked） >
<INPUT type="radio" name=" "value=" ",（ checked） >
type属性为 "checkbox",说明该控件是一个复选框,
type属性为 radio,说明该控件是一个单选框； name
属性和 value属性的值都是程序处理表单数据时需要的； checked属性是可选的,
2,复选框与单选按钮创建提交按钮,重置按钮和自定义按钮的语法分别如下：
<INPUT type="submit" value=" " name=" ">
<INPUT type="reset" value=" " name=" " >
<INPUT type="button" value=" " name=" " >
3,按钮利用 HTML创建多行文本框应使用 TEXTAREA标记符,其使用格式如下：
<TEXTAREA name=" " rows=" " cols=" ">默认多行文本 </TEXTAREA>
其中 name属性用于指定控件名； rows属性用于设置多行文本框的行数 （ 用户的输入可以多于这个行数,
超过可视区域的内容可以用滚动条进行控制操作 ） ；
cols属性用于设置多行文本框的列数 。
4,多行文本框 （ 文本区 ）
要创建选项菜单应使用 SELECT标记符,并将每个可独立选取的项用一个 OPTION标记符标出来 。 创建选项菜单的语法如下：
<SELECT name=" " size=" " （ multiple） >
<OPTION label=" " value=" " （ selected） >选项 1内容
</OPTION>
<OPTION label=" " value=" " （ selected） >选项 2内容 </OPTION>
<!--更多 OPTION标记 -->
</SELECT>
5,选项菜单其中,SELECT标记符的 name属性用于指定控件名；
size属性用于指定选项菜单中一次显示多少行 （ 默认值为 1） ； multiple属性用于设置允许用户选择多个选项 （ 如果不设置此属性,则仅允许选择一个选项 ） 。
OPTION标记符的 label属性可以为选项指定一个标记符,当使用此属性时,浏览器将采用此属性的值而非
OPTION标记符中的内容作为选项标记符； selected
属性用于设置当前选项为预先选中状态； value属性指定了控件的初始值 。
E N D
1,认识网页表单
2,利用 Dreamweaver MX创建表单的方法
3,利用 Dreamweaver MX编辑表单的方法
4,利用 HTML处理网页表单的方法第 7章 网页表单的处理
7.1 表单概述为了制作好复杂的表单网页,在 Dreamweaver MX
中提供了文本框,文本区,单选按钮,复选框,下拉列表框,提交按钮和重置按钮等丰富的表单域 。 这些表单域具有以下各自不同的功能：
（ 1） 单行文本框单行文本框用来输入比较简单的信息 。
（ 2） 多行文本框如果需要输入建议,需求等大段文字,使用 单行 文本框就显得力不从心了,这时通常使用带有滚动条的多行文本框 。
（ 3） 单选按钮单选按钮常用于表示唯一的选择结果,如,同学录注册,表单中的,性别,按钮 。
（ 4） 复选框复选框常用来表示许多项可以同时选中的事物,
比如个人爱好,所学科目和选购的产品种类等 。
（ 5） 下拉列表框当需要选择职业,文化程度等事项时,除了文本区以外,还可以考虑使用下拉列表框 。
（ 6） 提交按钮和重置按钮当用户完成了表单的填写后,如果需要提交数据,则可以单击表单中的提交按钮,通常按钮上的文字为,提交,或,确认,等 。 如上图中的,确定,
按钮；如果希望恢复表单为填写前的状态,以便重新填写,则可以单击重置按钮,通常按钮上的文字为,重置,,,重填,或,重新填写,等 。
Dreamweaver MX提供了一个专门的表单对象插入面板,面板上包含了各种表单对象 。 选择,窗口,|“插入,命令,打开插入面板,单击插入面板上的,表单,标签,切换到插入,表单,面板如图 2
所示 。
7.2 利用 Dreamweaver MX处理表单
7.2.1 表单插入面板
7.2.2 创建空白表单因为在发送表单时是以整个表单发送的,所以在插入表单元素前,先要在网页中插入空白的表单,
然后才能在表单中插入表单元素 （ 如文本框,按钮,
列表 /菜单,图片等 ）,以达到整体发送的效果 。
演示创建空白表单的过程 。
7.2.3 插入文本框文本框是一个接受文本信息的空白框 。 在文本框中几乎可以容纳任何类型的文本数据 。 利用它可以使网页设计师不必限制访问者提交的内容 。 在网页中,常见的文本框有 3种形式：
（ 1） 单行文本框 只能用来输入一行的信息 。
（ 2） 多行文本框 可以由设计者限定行数,并决定是否出现滚动条 。 该文本框可以输入多行信息 。
（ 3） 密码文本框 在该文本框中输入的信息,都会以,*” 显示在屏幕上 。
1,插入单行文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本域,命令 。 此时会在表单中插入一个单行文本框 。
2,插入多行文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本区域,命令 。 此时会在表单中插入一个单行文本框 。
3,插入密码文本框先输入提示信息,然后选择,插入,|“表单对象,|“文本域,命令 。 此时会在表单中插入一个单行文本框 。 用鼠标单击此单行文本框,在属性面板上的
,类型,下单击,密码,单选按钮,则单行文本框变成了密码文本框 。
4,设置文本框属性在表单中插入文本框后,选择所插入的文本框,d
打开属性面板 设置文本框属性 。
7.2.4 插入单选按钮
1,插入单选按钮要在表单中插入单选按钮,首先将光标置于表单中的相应位置,输入提示信息,然后单击插入,表单,
面板上的图标,或选择,插入,|“表单对象,|“单选按钮,命令,插入单选按钮 。
2,设置单选按钮的属性在表单中选择单选按钮后,属性面板将变为如图所示 。
（ 1） 单选按钮：给单选按钮命名 。 同一组的单选按钮的名称必须相同,这一点非常重要 。
（ 2） 选定值：设置单选按钮被选时的取值 。 当用户提交表单时,该值被传送给处理程序 （ 如 CGI脚本 ）,应赋给同组的每个单选按钮不同的值 。
（ 3） 初始状态：指定首次载入表单时单选按钮是
,已勾选,还是,未勾选,。 一组单选按钮中,
只能有一个按钮的初始状态被设为选中 。
1,插入复选框
7.2.5 插入复选框将光标置于表单中适当位置,输入提示信息
,兴趣,,再给复选框添加说明性语言,读书,,
,旅游,,,体育,和,音乐,；然后单击插入
,表单,面板上的图标,或选择,插入,|“表单对象,|“复选框,命令,在选项的合适位置加入复选框 。
在表单中选择复选框后,其属性面板的显示与单选按钮属性面板基本相同 （ 只是图标不同 ） 。 但在给复选框命名时,要注意复选框与单选按钮命名的区别 。 单选按钮是以,组,为单位的,而复选框则是以,个,为单位的,所以每一个复选框的名称都不应该相同 。
2,设置复选框的属性
7.2.6 插入下拉列表框
1,插入下拉列表框要在表单中插入下拉列表框,应按如下步骤进行：
（ 1） 将光标定位在表单中适当位置,输入提示信息 。
（ 2） 单击插入,表单,面板上的图标,或选择
,插入,|“表单对象,|“列表 /菜单,命令,则在表单中出现下拉列表框的框架；选中该下拉列表框,
属性面板变成下拉列表属性面板,如图所示；
（ 3） 选择,类型,为,列表,,单击属性面板上的
,列表值,按钮 （ 确保下拉列表框处于选择状态 ）,
弹出,列表值,对话框,如图所示 。
（ 4） 在,列表值,对话框的,项目标签,下输入要在列表框中显示的内容,在,值,下输入与显示内容相应的值 （ 传送到服务器中的即为该值 ）,即可为列表框加入显示的内容 。
在表单中插入下拉列表框后,选择所插入的下拉列表框,其属性面板如图所示 。
2,设置下拉列表框属性根据要求完成下拉列表框类型,高度,列表值,
选定范围等属性的设置 。
7.2.7 插入按钮
1,插入,提交,按钮首先将光标置于需要插入按钮的表单中,单击插入,表单,面板上的图标,或选择,插入,|“表单对象,|“按钮,命令,则在表单中将插入一个,提交,
按钮 。2,插入,重置,按钮首先在表单中插入,提交,按钮,选中此按钮,
在属性面板上的,动作,下单击,重设表单,单选按钮 。 则在表单中出现,重置,按钮 。
3,插入普通按钮普通按钮的创建方法与,重置,按钮的创建方法基本上相同,但在属性面板上的,动作,下要选择,无,
单选按钮 。
4,按钮属性设置表单中的 3种按钮可以通过选择属性面板,动作,
中的不同选项实现相互转换 。
因为表单是以表格的形式创建的,所以可以通过设置表格的背景颜色来设置表单的背景颜色 。
7.2.8 设置表单的背景颜色利用 HTML也可以创建表单,创建表单时要用到表单标记符和表单输入标记符 。
7.3 利用 HTML处理表单
HTML中表单标记符为 FORM,其主要作用是设定表单的起止位置,并指定处理表单数据程序的
URL地址 。 其基本语法结构如下：
< FORM action= "URL" method= "GET"/"POST" </FORM>
其中 Action用于设定处理表单数据程序 URL的地址 。
method指定数据传送到服务器的方式 。 有两种主要的方式,当 method="GET"时,将输入数据加在 action
指定的地址后面传送到服务器；当 method="POST"
时则将输入数据按照 HTTP输送协议中的 POST传输方式传送到服务器 。
7.3.1 表单标记符
INPUT是表单输入标记符,在表单创建中使用频繁,大部分表单内容需要用到此标记符 。 其语法如下：
<INPUT type=text/textarea/password/checkbox/radon
/submit/reset/file/hidden/image/button>
各项的意义是：
type,text表示输入单行文本 。
type,textarea表示输入多行文本 。
type,password表示输入数据为密码,用,*” 表示 。
7.3.2 表单输入标记符
type,checkbox表示复选框 。
type,radio表示单选框 。
type,submit表示提交按钮,数据将被送到服务器 。
type,reset表示清除表单数据,以利于重新输入 。
type,file表示插入一个文件 。
type,hidden表示隐藏按钮 。
type,image表示插入一个图像 。
type,button表示普通按钮 。
创建单行文本框的基本语法如下：
<INPUT type="text" name=" "value=" "size="
"maxlength=" ">
其中 name属性指定了控件的名称； value属性指定了控件的初始值； size属性指定了文本框的宽度；
maxlength属性指定了在文本框中可以输入的最长文本数 。
7.3.3 控件定义方法
1,文本框和口令框创建复选框和单选框也是使用 INPUT标记符,语法分别如下：
<INPUT type="checkbox" name=" "value=" ",（ checked） >
<INPUT type="radio" name=" "value=" ",（ checked） >
type属性为 "checkbox",说明该控件是一个复选框,
type属性为 radio,说明该控件是一个单选框； name
属性和 value属性的值都是程序处理表单数据时需要的； checked属性是可选的,
2,复选框与单选按钮创建提交按钮,重置按钮和自定义按钮的语法分别如下：
<INPUT type="submit" value=" " name=" ">
<INPUT type="reset" value=" " name=" " >
<INPUT type="button" value=" " name=" " >
3,按钮利用 HTML创建多行文本框应使用 TEXTAREA标记符,其使用格式如下：
<TEXTAREA name=" " rows=" " cols=" ">默认多行文本 </TEXTAREA>
其中 name属性用于指定控件名； rows属性用于设置多行文本框的行数 （ 用户的输入可以多于这个行数,
超过可视区域的内容可以用滚动条进行控制操作 ） ；
cols属性用于设置多行文本框的列数 。
4,多行文本框 （ 文本区 ）
要创建选项菜单应使用 SELECT标记符,并将每个可独立选取的项用一个 OPTION标记符标出来 。 创建选项菜单的语法如下：
<SELECT name=" " size=" " （ multiple） >
<OPTION label=" " value=" " （ selected） >选项 1内容
</OPTION>
<OPTION label=" " value=" " （ selected） >选项 2内容 </OPTION>
<!--更多 OPTION标记 -->
</SELECT>
5,选项菜单其中,SELECT标记符的 name属性用于指定控件名；
size属性用于指定选项菜单中一次显示多少行 （ 默认值为 1） ； multiple属性用于设置允许用户选择多个选项 （ 如果不设置此属性,则仅允许选择一个选项 ） 。
OPTION标记符的 label属性可以为选项指定一个标记符,当使用此属性时,浏览器将采用此属性的值而非
OPTION标记符中的内容作为选项标记符； selected
属性用于设置当前选项为预先选中状态； value属性指定了控件的初始值 。
E N D
