ASP入门基础教程-使用输入型表单控件

为了让用户通过表单输入数据，可以使用INPUT标记创建各种表单控件，通过将INPUT标记的TYPE属性设置为不同的值，可以创建不同类型的输入型表单控件。

1、单行文本框，格式如下：

一）格式：

</form>

二）属性：单行文本框具有以下属性(表一）属性

含

意

NAME

指定文本框的名称，通过它可以在脚本中引用该文本框。

VALUE

指定单行文本框的初始值。

SIZE

指定单行文本框的宽度。

MAXLENGTH

指定允许在文本框内输入的最大字符数。

三）实例的代码：

实例1(1.asp)

<html>

<head><title>简单的登录表单</title>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

dim t1,a,b

t1=request.form("姓名")

if t1<>"" then

a="<center><b>您的姓名为："

b="</b></center>"

response.write a & t1 & b

else

response.write "<center><b>您还没有输入大名</b></center>"

end if

</body>

</html>

2、在表单中使用密码控件。格式如下：

一）格式：

</form>

其属性有NAME、VALUE、SIZE 和 MAXLENGTH 四项，其含意请参见表一。

二）实例代码：

实例2(2.asp)

<html>

<head><title>简单的登录表单</title>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

dim t1,ps,a,b,c

t1=request.form("姓名")

ps=request.form("密码")

if t1<>"" and ps<>"" then

a="<center><b>您的姓名为："

b="</b></center>"

c="<center><b>您的密码为："

response.write a & t1 & b & "<br>"

response.write c & ps & b

else

response.write "<center><b>您还没有输入大名和密码。</b></center>"

end if

</body>

</html>

3、在表单中添加按钮控件，格式如下：

一）格式：

</form>

二）属性按钮控件具有以下属性(表二）属性

含

意

NAME

指定按钮控件的名称。

VALUE

指定单行按钮控件的初始值。

TYPE

指定按钮控件的类型，取值有以下三种。

1、submit: 创建一个提交按钮。在表单中添加提交按钮后，站点访问者可以在填写好表单之后提交。当提交表单时，表单数据（包括提交按钮的名称和值）以ASCII文本形式送到由表单的action属性指定的表单处理程序。一般来说，表单中必须有一个提交按钮。

2、reset: 创建一个重置按钮。在表单中添加重写按钮后，站点访问者可以将表单重新设回其默认值。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。但是，如果框中含有默认文本或选项为默认，单击重置按钮将会恢复这些设置值。

3、button: 创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为按钮编写脚本。

三）事件：

按钮控件还支持 onClick 事件。

四）实例代码：

实例3(3.asp)

<HTML>

<HEAD><TITLE>在表单中使用按钮控件</TITLE>

SUB MYSUB()

AB="这是按钮的单击事件"

MSGBOX AB

END SUB

SUB MYSUB1()

Window.location.href=http://www.ddvip.com

end sub

</SCRIPT>

</HEAD>

<BODY>

<center><H3>调用事件过程</H3><HR WIDTH="70%" color="#009999">

</center>

</BODY>

</HTMl>

五）代码注解：

1、在表单中定义了二个自定义按钮，并通过单击按钮事件（onClick)分别调用名为MYSUB和名为MYSUB1二个过程。

2、MYSUB()过程的功能是弹出一个信息框。

3、MYSUB1()过程的功能是将当前网页跳转到网易的首页。

4、在表单中添加图形化按钮，格式如下：

一）格式：

</form>

二）属性：图形化按钮具有以下属性(表三）属性

含

意

NAME

指定图形化按钮的名称。

TYPE="IMAGE"

表示以一个图像作为提交按钮。

URL

指定图像的URL地址。

三）实例的代码：

实例4(4.asp)

<HTML>

<HEAD><TITLE>图形化按钮的使用</TITLE>

SUB MYSUB1()

Window.location.href="http://www.ddvip.com/"

end sub

SUB MYSUB2()

Window.location.href="http://www.ddvip.com/"

end sub

SUB MYSUB3()

Window.location.href="http://www.ddvip.com/"

end sub

SUB MYSUB4()

AB="这是按钮的单击事件"

MSGBOX AB

END SUB

</SCRIPT>

</HEAD>

<BODY>

<center><H1>图形化按钮的使用</H1><HR WIDTH="70%" color="#009999">

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

dim t1,a,b

t1=request.form("姓名")

if t1<>"" then

a="<center><b>您的姓名为："

b="</b></center>"

response.write a & t1 & b

else

response.write "<center><b>您还没有输入大名</b></center>"

end if

</center>

</BODY>

</HTMl>

5、在表单中添加复选框，格式如下：

如果想让访问者去选择一个或多个选项或都不选取时，可以在表单中添加复选框。

一）格式：

</form>

二）属性：单行文本框具有以下属性(表四）属性

含

意

NAME

指定复选框的名称。

VALUE

指定提交时的值。

TYPE="checkbox"

TYPE属性设置为checkbox,表明是复选框控件。

CHECKED

可选项，若使用该属性，则当第一次打开表单时该复选框处于选中状态。

三）实例的代码：

实例5(5.asp)

<html>

<head><title>使用复选框控件</title>

</head>

<body>

<h1>使用复选框控件</h1><hr>

斜体<input type="checkbox" name="chk" checked>

粗体<input type="checkbox" name="chk">

下划线<input type="checkbox" name="chk">

删除线<input type="checkbox" name="chk">

</center>

if chk(0).checked then

text1.Style.Fontstyle="italic"

else

text1.Style.Fontstyle="normal"

end if

if chk(1).checked then

text1.Style.Fontweight="bold"

else

text1.Style.Fontweight="normal"

end if

text1.Style.textdecorationUnderline=chk(2).checked

text1.Style.TextdecorationlineThrough=chk(3).checked

</Script>

</body>

</html>

6、在表单中添加单选按钮，格式如下：

如果想让访问者从一组选项中选择其中之一，可以在表单中添加单选按钮。

一）格式：

</form>

二）属性：单行文本框具有以下属性(表五）属性

含

意

NAME

指定单选按钮的名称。

VALUE

指定提交时的值。

TYPE="radio"

表明是单选按钮。

CHECKED

可选项，若使用该属性，则当第一次打开表单时该单选按钮处于选中状态。

三）实例的代码：

实例6(6.asp)

<html>

<head><title>熟悉单选按钮的使用</title>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

dim t1,r1,a,c,d

a="<center><b>欢迎"

c="大侠的到来。</b></center>"

d="侠女的到来。 </b></center>"

t1=request.form("姓名")

r1=request.form("性别")

if t1<>"" and r1="男" then

response.write a & t1 & c

else

response.write a & t1 & d

end if

</body>

</html>

7、在表单中添加文件域，格式如下：

如果想让站点访问者通过表单来选择文件，可以在表单中添加文件域。文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。

一）格式：

</form>

二）属性：文件域具有以下属性(表六）属性

含

意

NAME

指定文本域的名称。

VALUE

给出文本域的初始值。

SIZE

指定文本域的宽度。

TYPE="FILE"

表明是文件域控件。

三）实例代码：

实例7(7.asp) 本实例通过一个文本域来选择一个文件的路径和文件名，然后在同一页显示选择文件的绝对路径。

<html>

<head><title>文件域示例</title>

</head>

<body>

<tr>

</tr>

<tr>

<td height="50" align="right"><font color="000000">请选择文件：</font></td>

</tr>

<tr>

</tr>

</table>

</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>

8、在表单中添加隐藏域，格式如下：

若要在表单结果中包含不希望让站点访问者看见的信息，可以在表单中添加隐藏域。每一个隐藏域都有自己的名称和值。当提交表单时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

一）格式：

</form>

二）属性：文件域具有以下属性(表七）属性

含

意

NAME

指定隐藏域的名称。

VALUE

给出隐藏域的默认值。

TYPE="hidden"

表明是隐藏域控件。

三）实例：（11.htm)

<html>

<head><title>隐藏域的应用</title></head>

<body>

<b>下面是你隐藏域的信息:</b>

</center>

</form>

alert("隐藏域的值是: "+document.form1.yourhiddeninfo.value)

</script>

<body>

</html>

实例（11.asp)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

.STYLE1 {

color: #FFFFFF;

font-size: 24px;

}

.STYLE2 {font-size: 18px}

-->

</style>

</head>

<body>

<tr>

<td height="50" align="center" bgcolor="#6699CC"><span class="STYLE1">隐藏域练习</span></td>

</tr>

<tr>

<td height="50" align="center" bgcolor="#CCCCCC"><span class="STYLE2">姓名</span>：

</tr>

<tr>

<input type="submit" name="Submit" value="提

交" />

<input type="reset" name="Submit2" value="重

置" /></td>

</tr>

</table>

</form>

name=request.form("姓名")

h=request.form("h")

if name<>"" and h=name then

file="http://www.ddvip.com/index.html"

response.redirect file

else

response.write "您还没有访问此页面的权限"

end if

</center>

</body>

</html>