表单及其对象的属性

1　概　述

　　本文是介绍利用Dreamweaver制作表单，设置表单及其对象属性的方法。
　　表单，是Web用户提交信息的工具。其作用是接收浏览者填写的信息（如，填写商品定单、登录用户名和密码等），并将其提交给表单处理程序进行处理。
　　表单收集的信息可直接保存到数据库中。
　　电子商务网站中，表单是必不可少的。因此，有必要详细了解表单及其对象的属性。
　　表单－由两部分组成。即，
　　⑴描述表单的HTML代码－“刊登”表单的网页。
　　⑵处理表单信息的服务器端应用程序或客户端脚本。
　　表单中，包含若干个与访问者交互的表单对象。如，文本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表/菜单、跳转菜单、图形域、文件字段、按钮等。
　　提示：
　　⑴表单对象，也称表单域或表单控件。
　　⑵对象名称，在不同地方（如，教材），可能不同。上述的对象名称与Dreamweaver“插入”面板“表单”选项卡上的相符。
　　⑶表单对象，还有标签和字段集。
　　标签－表单中显示的文本。在下面讲解单选按钮和单选按钮组时，简单介绍。
　　字段集－作用等与标签类似。
　　提示：不添加标签、字段集，也可以在表单中添加（在网页上显示）文本，因此，没有什么特别的作用，因此，很少用。

2　表单属性

　　表单属性，包括：
　　⑴“表单名称”－给表单命名。为了便于脚本语言对其控制。
　　⑵“动作”－输入表单处理程序的URL。如果需要通过电子邮件方式发送，则键入电子邮件地址，并在前面加“mailto:”。例如：mailto:go2002@mail.hf.ah.cn
　　提示：如果使用表单所在网页处理，则“动作”框空白。
　　⑶“目标”－指定显示表单数据处理结果网页的打开方式（在那个窗口中打开）。
　　⑷“方法”－传输表单信息的“方法”。有Get或Post两种，其中，
　　Post方法－允许传输大量数据的方法。一般情况，应该选用该方法。尤其是安全性好。
　　Get方法－将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量（≤8192字符）就会受到限制，但是执行效率却比Post方法好
　　提示：“方法”框中“默认”选项，表示使用浏览器缺省方式，通常是Get。
　　⑸“MIME类型”－选择发送数据的MIME编码类型。
　　有两个选项：application/x-www-form-urlencode和multipart/form-data。前者是默认选项，通常与POST方法协同使用；如果表单中包含文件上传域，则应选择后者。

4　表单对象属性

4.1　文本域和文本区域

　　属性面板：
　　“文本域”－对象名称
　　文本域和文本区域，可以互换。
　　“类型”－选择“单行”或“密码”时，是文本域；选择“多行”，就是文本区域。
　　提示：选择“密码”，则在网页中输入的字符，均显示为“*”。
　　文本域：“字符宽度”和“最大字符数”－设定文本框的宽度和允许输入的字符最大数量。
　　文本区域：“行数”仅仅控制显示区域的“高度”，不限制输入文本的行数。“换行”，选项“默认”和“虚拟”，则自动换行；选项“关”，则字符数超过宽度时，出现水平党滚动条；选项“实体”则不但在文本区域中自动换行，且在提交数据处理时，也自动换行。“初始值”设置的初始显示文本。
　　代码注释：
　　一、文本区域代码： <textarea name="a1" rows="3" wrap="OFF">你好</textarea>
　　⑴<textarea>……</textarea>－文本区域
　　⑵name－文本区域名称
　　⑶rows－行数
　　⑷wrap－选项
　　⑸你好－初始值
　　二、文本域代码：<input name="a2" type="text" value="">
　　⑴input－输入标记
　　⑵name－保存浏览者填入信息的变量
　　⑶type－类型。text－文本；password－密码
　　提示：如果没有默认值，则value不出现。

4.2　隐藏域

　　隐藏域不在浏览器中显示。
　　属性面板：
　　“隐藏区域”－隐藏域的名称。
　　“值”－嵌入（需要传递）的数据。
　　代码注释：
　　<input type="hidden" name="hiddenField2" value="" >
　　⑴input－输入标记
　　⑵name－保存需要“暗中”传递的数据的变量名。
　　⑶value－需要“暗中”传递的数据

4.3　复选框

　　属性面板：
　　“复选框名称”－复选框名称
　　“选定值”－选定该复选框后，提交表单时，传递的值
　　“初始状态”－“未选中”和“已选中”两者之一
　　代码注释：
　　<input type="checkbox" name="checkbox"="checkbox" checked>
　　⑴input输入标记
　　⑵type－类型。checkbox是复选框；radio是单选按钮
　　⑶value－将被传递的数据
　　⑷checked－有它表示初始状态为“已选中”，没有则表示初始状态为“未选中”

4.4　单选按钮和单选按钮组

　　提示：单选按钮组是由一个以上单选按钮组成的。在同一个单选按钮组中，每个单选按钮的名称相同。
　　属性面板：
　　“单选按钮”－单选按钮（组）名称
　　“选定值”－选定该单选按钮（组）后，提交表单时，传递的值
　　“初始状态”－“未选中”和“已选中”两者之一
　　代码注释：
　　<label><input name="C1" type="radio" value="单选">单选</label><br>
　　<label><input name="C1" type="radio" value="单选" checked>单选</label>
　　⑴<label>……</label>标签的标记
　　⑵type－类型。checkbox是复选框；radio是单选按钮
　　⑶value－将被传递的数据
　　⑷checked－有它表示初始状态为“已选中”，没有则表示初始状态为“未选中”
　　提示：即使将同一单选按钮组中，所有单选按钮的初始状态均设定为“已选中”，在网页上，也只有最后一个被设定的单选按钮显示为已选中。

4.5　列表/菜单（跳转菜单）

　　属性面板：
　　“列表/菜单”－列表/菜单的名称
　　“类型”－两种选择，选中“菜单”单选按钮，网页中只能显示一行；选中“列表”，则“高度”、“选定范围”均可行选择多行。
　　“列表值”按钮，单击后，在“列表值”对话框上设置列表值。
　　代码注释：
　　列表/菜单的代码：
　　<select name="select3">
　　<option>123</option>
　　<option value="www.920mm.com">456</option>
　　<option value="www.cctv.com" selected>789</option>
　　</select>
　　跳转菜单的代码：
　　<SELECT name=select7 onchange="if(this.selectedIndex) window.open(this.options[this.selectedIndex].value);">
　　<option selected>=＜友情链接＞=</option>
　　<option value="http://www.bjxiang.com">北京宙地科学</option>
　　<option value="http://www.lsk-lys.com">绿寿康</option>
　　<option value="http://www.oldurchin.com">老顽童</option>
　　</SELECT>
　　对比上述两个对象的代码后，不难发现，区别主要是，选择标记<SELECT>的属性设置不同，跳转菜单的，多了行为设置。鼠标事件－onchange，事件代码－在新窗口中打开相应的网页（网站的主页）。
　　⑴<SELECT>……</SELECT>－选择标记
　　⑵<OPTION>－选项标记
　　⑶value－项目标签的值。如，项目标签“北京宙地科学”的值是，http://www.bjxiang.com

4.6　图形域

　　提示：图形域的作用是，用更美观的图像，替代（提交）按钮。
　　属性面板：
　　“图像区域”－图像域的名称
　　“宽”、“高”－设定图像“按钮”在网页中显示的尺寸，不自行设定，则用默认值。
　　“源文件”－图像文件的URL
　　“替代”－当浏览器不能显示图像时，替代显示的文字
　　“对齐”－图像在网页中的对齐方式
　　代码注释：
　　<input name="imageField" type="image" src="../affiche.gif" width="60" height="17" border="0">
　　⑴name－图像域的名称
　　⑵src－图像的URL
　　⑶border－图像边框宽度

4.7　文件字段

　　属性面板：
　　“文件域名称”－文件域名称
　　“字符宽度”－设定网页上显示文件域文本框的宽度
　　“最多字符数”－设定网页上显示文件域文本框中，最多能输入多少字符数
　　代码注释：
　　<input name="file" type="file" size="10" maxlength="10">
　　⑴type－对象类型。是file时，才会有“浏览”按钮出现
　　⑵size－网页上显示文件域文本框的宽度
　　⑶maxlength－网页上显示文件域文本框中，最多能输入多少字符数

4.8　按钮

　　属性面板：
　　“按钮名称”－按钮的名称
　　“标签”－在按钮上显示的文字
　　“动作”－单击按钮后引发的事件。有三个单选按钮供选择：提交表单、重设表单和无
　　代码注释：
　　<input type="submit" name="Submit" value="提交">
　　⑴type－标明submit，说明对象的类型
　　⑵name－按钮的名称
　　⑶value－单击按钮后引发的事件