| 表单在HTML页面中发挥了重要作用，它是联系用户和站点拥有者的重要桥梁，在ASP程序设计的交互网页中经常使用表单来收集用户输入的信息。
1.3.1 表单的概念
表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以进行用户调查或民意测试，也可以用来显示注册或定购信息。用户在浏览Internet页面的时候，有时会遇到一些反馈性的页面，要求用户填写定货单等等，这种反馈类型的页面中包含的主要部分就是表单。
下面是一个表单的实例。
点击请浏览。
实例1-2：sample1-2.htm，获取用户信息的表单
由实例页面浏览中可看出，一个表单应该包含说明性的文字、用户填写表格、【提交】和【重置】按钮这些表单元素。用户填写了所需的资料之后，单击【提交】按钮，这样所填资料就会传送到Web
服务器上，网站所有者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到网站所有者之间的反馈和交流。
sample1-2.htm代码如下：
<html>
<head>
<title>获取用户信息的表单</title>
</head>
<body>
<form method="POST" action="sample1-2.asp"
enctype="multipart/form-data">
<div align="center">
<center>
<table border="0" cellpadding="4" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="450" id="AutoNumber1">
<tr>
<td width="490" colspan="2">
<p align="center">请您填写下列信息</td>
</tr>
<tr>
<td width="77">姓名</td>
<td width="404"><input type="text"
name="name" size="12"></td>
</tr>
<tr>
<td width="77">密码</td>
<td width="404"><input type="password"
name="password" size="12"></td>
</tr>
<tr>
<td width="77">性别</td>
<td width="404"><input type="radio"
value="男" name="mrms">男<input type="radio"
value="女" name="mrms">女</td>
</tr>
<tr>
<td width="77">年龄</td>
<td width="404"><input type="text"
name="age" size="12"></td>
</tr>
<tr>
<td width="77">职业</td>
<td width="404"><select size="1" name="job">
<option>公司职员</option>
<option>学生</option>
<option>公务员</option>
<option>个体从业者</option>
<option>工人</option>
<option>农民</option>
<option>军人</option>
</select></td>
</tr>
<tr>
<td width="77">地址</td>
<td width="404"><input type="text"
name="addr" size="40"></td>
</tr>
<tr>
<td width="77">电邮</td>
<td width="404"><input type="text"
name="email" size="20"></td>
</tr>
<tr>
<td width="77">爱好</td>
<td width="404">
<input type="checkbox" name="like1" value="看书">看书
<input type="checkbox" name="like2" value="看电视">看电视
<input type="checkbox" name="like3" value="旅游">旅游
<input type="checkbox" name="like4" value="上网">上网
<input type="checkbox" name="like5" value="书画">书画
<input type="checkbox" name="like6" value="音乐">音乐</td>
</tr>
<tr>
<td width="77">近照</td>
<td width="404"><input type="file"
name="F1" size="20"></td>
</tr>
<tr>
<td width="77">留言</td>
<td width="404"><textarea rows="5"
name="S1" cols="36"></textarea></td>
</tr>
</table>
</center>
</div>
<p align="center"><input type="submit"
value="提交" name="B1"><input type="reset"
value="重置" name="B2"></p>
</form>
</body>
</html>
说明：
仔细观察代码，一般是通过表格来布局表单元素。
表单中主要元素见表1-2。
1.3.2
表单Form元素及其常用属性
在Web上冲浪时，可以看到各式各样的输入表单(Form)，有的只有一个文本输入框，有的则很复杂，包含各种输入域，例如除了文本输入框，还有单选按钮、复选框、下拉菜单等等。这些表单虽然复杂程度不同，但它们都是由一些表单元素组合起来的。
在HTML中，Form的标记是<form>和</form>，即表单的开始和结束标记，在开始时的Form标记中一般包含两个属性：Action和Method。
（1）Action属性
<form action="…">，Action属性后面的等号表明当这个表单提交后，需要执行的动态Web程序，比如ASP程序。
（2）Method属性
<form action="…" method="…">，Method用于设定互动式表单的信息传输方式，POST或GET。
在<form>和</form>之间，可以使用<form>以外的任何HTML标记，这使Form变得非常灵活。
在HTML中，表单一般有如下的结构：
<form action="…" method="…">
<input>
…
<select>….</ select>
…
<textarea>…. </textarea>
…
</form>
1.3.3 表单输入标记Input
Input作用是用来定义表单控件，它是一个单一的标记，没有结束标记，其格式如下：
<input type="…" name="…">
Input属性见表1-3。
| 表1-3
Input属性 |
属性 |
功能 |
| Name |
表单域名称 |
| Type |
指明输入的类型，其选项比较多，见下表1-4 |
| Value |
设定可被表单提取的表单域的值 |
| Maxlength |
限制最多输入的字符数 |
| Checked |
设置单选框或复选框是否被选中 |
| Src |
指出图片源 |
| 表1-4
Type属性值 |
Type属性值 |
说明 |
| Text |
单行文本框 |
| Password |
密码框，与单行文本框相拟，不同在于输入时不显示输入内容，而以“*”回显 |
| Radio |
为用户提供单选按钮进行选择，即在多个选择之间只能选择其中一项。由于选择是惟一的，因此其属性name取相同的值，属性value的值不相同 |
| Checkbox |
为用户提供复选框进行选择，即在多个选择之间可以选择其中一项或多项 |
| Submit |
提交按钮。当用户单击这个按钮后，用户的输入信息即被传送到服务器。对于一个完整的表单，提交按钮是必不可少的 |
| Reset |
重置按钮。当用户单击这个按钮后，用户输入信息都会被全部清除，以便用户重新输入 |
| Button |
普通按钮，单击后执行设定的代码 |
| File |
上传按钮，用于上传文件 |
| Hidden |
隐藏域，该域在表单上是看不到的 |
| Image |
图片域 |
1.3.4
Select标记
在Form中使用Select标记可以在表单显示一个下拉列表或带有滚动条的列表框，用户可以在列表中选择一个或多个选项。这一点和Input中的单选按钮和复选框作用相似，只是形式上有些不同。
Select有开始和结束标记，全部选项包含在Select的开始和结束标记中。结构如下：
<select …>
<option>
…
</option >
…
</select>
其中Option标记表示选项，有几个这种标记就有几个选项。选项的具体内容放在每个Option后。
Select属性Name:下拉框或列表框名称
Size:设置列表框中选项的条数，默认为1，以下拉列表方式显示，如果为2或更高，则以滚动框方式显示
Multiple:设置是否允许多选
Option属性见表1-5。
| 表1-5
Option属性 |
Option属性 |
功能 |
| Value |
设定表单传递表项的值 |
| Selected |
表项中被默认选中的初始状态 |
1.3.5 Textarea标记
在Form中使用这个标记可以出现一个可输入多行文字的输入框，它叫多行文本框，也称为文本区。它有开始和结束标记，类似于Text类型的Input框，区别在于Text类型的Input框只能输入单行信息，而Textarea为用户提供了输入多行信息的途径。
Textarea属性见表1-6。
| 表1-6
Textarea属性 |
Textarea属性 |
功能 |
| Name |
多行文本框名称 |
| Rows |
设置最多可以输入的行数 |
| Rols |
设置每行可以输入的字符数 |
以上这些表单元素大家可以通过仔细分析sample1-2.htm代码，来加深对它们的理解。
1.3.6 表单提交
通过上面的介绍，相信你对表单有了初步的了解，下面将介绍如何处理表单的信息。
表单的必要属性Method用于指定表单信息的提交方式，提交方式有两种：GET方式和POST方式。
1．GET方式
GET方式对表单的元素名称和值进行编码，并将信息分配给名为QUERY＿STRING的服务器变量，在提交后的新页面地址栏中将会显示这些变量的内容，一般它传送给服务器的信息不能超过255个字符。
2．POST方式
POST方式所提交的信息在地址栏中不显示，表单的元素名称和值作为输入直接传送给表单处理程序，它传送给服务器的信息长度没有限制，Action属性对应的字符串是表单所要提交的处理程序。
信息处理方式可以是文本文件的形式保存到服务器上的某个文件夹中，也可以把表单信息发送到某个电子邮件地址，但通常的做法是使用动态网页程序例如CGI或ASP程序来处理。
在范例1-2中，sample1-2.htm包含一个让用户输入或进行选择信息的表单，那么用户所输入或选择的信息如何处理呢？注意观察这段代码：
<form method="POST" action="sample1-2.asp"
>
它表示sample1-2.htm中用户的信息是以POST的方式送往sample1-2.asp进行处理。sample1-2.htm和sample1-2.asp是两个不同的文件，它们的后缀不同，sample1-2.asp其实是包含ASP程序的文件，通过这个文件的ASP程序来对表单信息进行处理。
ASP就是本书主要的学习内容，ASP与表单的联系是很紧密的，所以我们一定要对表单有比较详细的了解。
我们再看一个范例。
范例1-3：sample1-3.htm
<html>
<head>
</head>
<body>
<Form method="post" action="sample1-3.asp">
<p>姓名：<input type="text" name="T1"
size="12">
密码：<input type="password" name="T2" size="12"></p>
<p>你会什么CGI编程语言：</p>
<p><input type="checkbox" name="C1"
value="ON">VbScript
<input type="checkbox" name="C2" value="ON">JavaScript
<input type="checkbox" name="C3" value="ON">PHP
<input type="checkbox" name="C4" value="ON">ASP</p>
<p>你最擅长哪种CGI编程语言：</p>
<p><input type="radio" value="V1" name="R1">VbScript
<input type="radio" value="V2" name="R1">JavaScript
<input type="radio" value="V3" name="R1">PHP
<input type="radio" value="V4" name="R1">ASP</p>
<p><input type="submit" value="提交"
name="B1">
<input type="reset" value="全部重写" name="B2"></p>
</Form>
</body>
</html>
sample1-3.htm通过<Form method="post" action="sample1-3.asp">中的action="sample1-3.asp"将表单信息传递给sample1-3.asp处理。在sample1-3.asp中用程序把表单域和表单域的值组成一个表格显示出来。范例中的相关知识点将在后面的章节中学到。
sample1-3.asp：
<html>
<head>
</head>
<body>
<center><table border="1"><tr>
<td align="center"><b>表单域</td>
<td align="center">表单值</b></td></tr>
<%
for each I in request.form ' 得到第I列的表单域的值。
Valure=request(i) ' 显示第I列的表单域的名称。
response.write "<tr><td>"&i&"</td>"
' 显示第I列的表单域的值。
Response.write "<td>" &request.form.item(i)&
"</td></tr>"
next
%>
</table>
</body>
</html>
说明：
表单域的名称和值请参考sample1-3.htm的代码，通过对比就可以知道选择的是哪一项。
用户在sample1-3.htm中经过一番输入和选择后，单击提交按钮，就可把表单信息传递到sample1-3.asp进行处理。
点击浏览sample1-3.htm和sample1-3.asp效果。
我们设计动态网站时，一般要用到数据库，下面我们就来介绍Web数据库的基本知识。
|
教学前言
相关的基础知识
Web的基本概念及相关知识
为什么学习动态网页制作，掌握表单很重要？
动态网页就要是实现交互功能，即网站浏览者与网站交互，进行信息在线交流，而采集用户信息的方式，即是通过表单形式，例如，