ASP入门基础教程-使用其他表单控件

　2006-10-26 12:00:19　来源：WEB开发网　　　

核心提示：除了使用INPUT标记创建输入型表单控件外，也可以使用TEXTAREA标记创建多行文本框，ASP入门基础教程-使用其他表单控件，或使用SELECT标记创建选项选单，还可以使用FIELDSET标记以表单中的控件进行分组，第二个分组控件用于组织提交“专业与课程”的控件，2、表单内那个二行一列的表格，

除了使用INPUT标记创建输入型表单控件外，也可以使用TEXTAREA标记创建多行文本框，或使用SELECT标记创建选项选单，还可以使用FIELDSET标记以表单中的控件进行分组。

1、在表单中使用多行文本框控件

一）格式：

　　<form name="表单的名称" method="get | post" action="URL">
　　<TEXTAREA name="字符串" ROWS="整数" COLS="整数" [READONLY] >......</TEXTAREA>
　　</form>

注：在<TEXTAREA></TEXTAREA>中输入的文本将作为该控件的初始值。

二）属性：

多行文本框具有以下属性(表一）

属性	含　　意
NAME	指定多行文本框的名称。
ROW	指定多行文本框的行数。
COLS	指定多行文本框的宽度（以字符串为单位）。
READONLY	指定多行文本框不能被用户所修改。

三）实例的代码：

实例8(8.asp)

<html>
<head><title>多行文本域</title>
<style type="text/css">
body,td,th {
font-size: 11pt;
color: #000000;
line-height: 1.5;
}
body {
margin-top: 50px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form method="post" name="form1" action="8.asp">
<table align="center" bgcolor="#d6d3ce">
<tr>
<th bgcolor="#0099cc"><font color="ffffff">多行文本域</font></th>
<tr>
<td height="50" align="left"><font color="000000">请您留言：</font></td>
</tr>
<tr>
<td height="50"><textarea name="内容" cols="50" rows="4">赠人玫瑰，手留余香。</textarea></td>
</tr>
<tr align="center">
<td height="50" align="center"><input type="submit" value="提交" name="btnSubmit">
<input type="reset" value="重置" name="btnReset"></td>
</tr>
</table>
<p><p><center>**********************************************</center>
</form>
<%
dim f1
f1=request.form("内容")
if f1<>"" then
a="<center><b>您的留言为："
b="</b></center>"
response.write a & f1 & b
else
response.write "<center><b>您还没有留言。</b></center>"
end if
%>
</body>
</html>

2、在表单中使用选项控件

一）格式：

使用列表框控件，可以让访问者从列表单中选择选项。

　　<form name="表单的名称" method="get | post" action="URL">
　　　 <SELECT name="字符串" size="整数" [MULTIPLE]>
　　　　　<OPTION [SELECTED] value="字符串">选项1</OPTION>
　　　　　 <OPTION [SELECTED] value="字符串">选项1</OPTION>
　　　　　　......
　　　 </SELECT>
　　</form>

二）属性：

列表框具有以下属性(表二）

属性	含　　意
NAME	指定选项控件的名称。
SIZE	指定在列表中一次可以看到的选项数目。
MULTIPLE	指定是否允许作多项选择。
SELECTEDINDEX	返回或设置哪个选项被选取。
LENGTH	返回列表框中的选项个数。
style	设置列表框的样式，如高度，宽度，字体等 "style=width:100px;height=30px"。

OPTION具有以下属性(表三）

属性	含　　意
TEXT	指定选项文本。
VALUE	指定选项的值。
SELECTED	可选项，加上本项表示该项是预置的，同一个<SELECT>标记只能有一个。

三）实例代码：

实例9(9.asp)

<html>
<head><title>使用列表框</title>
<style type="text/css">
body,td,th {
font-size: 11pt;
color: #000000;
line-height: 1.5;
}
body {
margin-top: 50px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<center><h3>使用列表框</h3><hr width="50%">
<Select size=2 style="width:100px;" name="select1">
<option value="Bei jings">北京</option>
<option value="Shang hai">上海</option>
<option value="Tian jin">天津</option>
<option value="Chong qing">重庆</option>
</Select>
<p>
列表框中的选项个数：<input type="text" name="text1" size=3></p>
选定项的Value值为：<input type="text" name="text2" size=10></p>
选定项的text值为：<input type="text" name="text3" size=10></p></center>
<Script for="select1" event="onClick" Language="VBScript">
i=select1.selectedindex
text1.value=select1.length
text2.value=select1.options(i).value
text3.value=select1.options(i).text
</Script>
</body>
</html>

四）代码注解：

1、本例通过<select></select>标记定义了一个名为select1的列表框，并通过<option></option>标记定义各个选项。

2、在同一页面处理该表单，并显示各项值。

3、对表单控件分组

为了便于管理，可以将表单中的各控件进行分组。用<FIELDSET>标记必须以LEGEND标记开头，以指定控件组的标题，在LEGEND标记之后可以跟其他表单控件，也可以嵌套LEGEND标记。

一）格式：

　　<form name="表单的名称" method="get | post" action="URL">
　　<FIELDSET>
　　<LEGEND>控件组标题</LEGNED>
　　组内表单控件
　　</FIELDSET>
　　</form>

二）实例代码：

实例10(10.asp)

<html>
<head><title>控件组件实例</title></head>
<body>
<form>
<table align="center">
<tr><td>
<fieldset>
<legend><b>个人资料</b></legend>
<table bgcolor="#d6d3ce" width="400" align="center">
<tr>
<td align="right">姓名：</td>
<td><input type="text" name="t1" size="20"></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="r1" checked value="男">男  　
<input type="radio" name="r1" value="女">女</td>
</tr>
<tr><td align="right">出生日期：</td>
<td><input type="text" name="t2" size="20"></td>
</tr>
<tr>
<td valign="top" align="right">个人特长：</td>
<td><textarea rows="3" name="s1" colos="20"></textarea></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<!-- ***************************************** -->
<fieldset>
<legend><b>专业与课程</b></legend>
<table bgcolor="#d6d3ce" width="400" align="center">
<tr>
<td valign="top" align="right">所学专业：</td>
<td><select size="1" name="d1">
<option selected>计算机及应用</option>
<option>计算机网络技术</option>
<option>计算机软件</option>
</select></td></tr>
<tr><td valign="top" align="right">所学课程：</td>
<td><select size="3" name="22" multiple>
<option>计算机应用基础</option>
<option>办公软件</option>
<option>数据库应用基础</option>
<option>Visual BASIC程序设计</option>
<option>ASP动态网页设计</option>
</select></td>
</tr>
</table>
</fieldset>
<p align="center">
<input type="submit" value="提交" name="b1">　
<input type="reset" value="全部重写" name="b2"></p>
</td>
</tr>
</table>
</form>
</body>
</html>