ASP入门基础教程-使用输入型表单控件
2006-10-26 12:00:21 来源：WEB开发网核心提示：为了让用户通过表单输入数据，可以使用INPUT标记创建各种表单控件，ASP入门基础教程-使用输入型表单控件，通过将INPUT标记的TYPE属性设置为不同的值，可以创建不同类型的输入型表单控件，一）格式：<form name="表单的名称" method="get | post&quo
为了让用户通过表单输入数据，可以使用INPUT标记创建各种表单控件，通过将INPUT标记的TYPE属性设置为不同的值，可以创建不同类型的输入型表单控件。
1、单行文本框，格式如下：
一）格式：
<form name="表单的名称" method="get | post" action="URL">
<input type="text" name="字符串" value="字符串" size="整数" maxlength="整数">
</form>二）属性：
单行文本框具有以下属性(表一）| 属 性 | 含 意 |
| NAME | 指定文本框的名称，通过它可以在脚本中引用该文本框。 |
| VALUE | 指定单行文本框的初始值。 |
| SIZE | 指定单行文本框的宽度。 |
| MAXLENGTH | 指定允许在文本框内输入的最大字符数。 |
三）实例的代码：
实例1(1.asp)
<html>
<head><title>简单的登录表单</title>
</head>
<body>
<form method="post" name="form1" action="1.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc">
<th colspan="2" align="center">
<font color="#fffff">登录表单</font></th>
</tr>
<tr>
<td align="right" width="150" height="50">用户名：</td>
<td width="350" height="50"><input type="text" name="姓名" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="reset" name="reset1" value="重设数据"> <input type="submit" name="submit1" value="提交数据">
</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="表单的名称" method="get | post" action="URL">
<input type="password" name="字符串" value="字符串" size="整数" maxlength="整数">
</form>其属性有NAME、VALUE、SIZE 和 MAXLENGTH 四项，其含意请参见表一。
二）实例代码：
实例2(2.asp)
<html>
<head><title>简单的登录表单</title>
</head>
<body>
<form method="post" name="form1" action="2.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc">
<th colspan="2" align="center">
<font color="#fffff">登录表单</font></th>
</tr>
<tr>
<td align="center" width="250" height="50">用户名：<input type="text" name="姓名" size="14"></td>
<td align="center" width="250" height="50">密码：<input type="password" name="密码" size="14"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="reset" name="rest1" value="重设数据"> <input type="submit" name="submit1" value="提交数据">
</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="表单的名称" method="get | post" action="URL">
<input type="submit|reset|button" name="字符串" value="字符串" onClick="过程名">
</form>二）属性
按钮控件具有以下属性(表二）| 属 性 | 含 意 |
| NAME | 指定按钮控件的名称。 |
| VALUE | 指定单行按钮控件的初始值。 |
| TYPE | 指定按钮控件的类型，取值有以下三种。 1、submit: 创建一个提交按钮。在表单中添加提交按钮后，站点访问者可以在填写好表单之后提交。当提交表单时，表单数据（包括提交按钮的名称和值）以ASCII文本形式送到由表单的action属性指定的表单处理程序。一般来说，表单中必须有一个提交按钮。 2、reset: 创建一个重置按钮。在表单中添加重写按钮后，站点访问者可以将表单重新设回其默认值。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。但是，如果框中含有默认文本或选项为默认，单击重置按钮将会恢复这些设置值。 3、button: 创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为按钮编写脚本。 |
三）事件：
按钮控件还支持 onClick 事件。
四）实例代码：
实例3(3.asp)
<HTML>
<HEAD><TITLE>在表单中使用按钮控件</TITLE>
<SCRIPT LANGUAGE="VBSCRIPT">
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">
<INPUT TYPE="BUTTON" NAME="BUTTON" VALUE="事件" ONCLICK="MYSUB">
<INPUT TYPE="BUTTON" NAME="BUTTON1" VALUE="网易" ONCLICK="MYSUB1">
</center>
</BODY>
</HTMl>五）代码注解：
1、在表单中定义了二个自定义按钮，并通过单击按钮事件（onClick)分别调用名为MYSUB和名为MYSUB1二个过程。
2、MYSUB()过程的功能是弹出一个信息框。
3、MYSUB1()过程的功能是将当前网页跳转到网易的首页。
4、在表单中添加图形化按钮，格式如下：
一）格式：
<form name="表单的名称" method="get | post" action="URL">
<input type="image" src="URL" name="字符串">
</form>二）属性：
图形化按钮具有以下属性(表三）| 属 性 | 含 意 |
| NAME | 指定图形化按钮的名称。 |
| TYPE="IMAGE" | 表示以一个图像作为提交按钮。 |
| URL | 指定图像的URL地址。 |
三）实例的代码：
实例4(4.asp)
<HTML>
<HEAD><TITLE>图形化按钮的使用</TITLE>
<SCRIPT LANGUAGE="VBSCRIPT">
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">
<input type="image" src=http://tech.ddvip.com/2006-10/"4.jpg" name="image4" value="提交数据" ONCLICK="MYSUB1">
<input type="image" src=http://tech.ddvip.com/2006-10/"5.jpg" name="image5" value="提交数据" ONCLICK="MYSUB2">
<input type="image" src=http://tech.ddvip.com/2006-10/"6.jpg" name="image6" value="提交数据" ONCLICK="MYSUB3">
<form method="post" name="form1" action="4.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc">
<th colspan="2" align="center">
<font color="#ffffff">登录表单</font></th>
</tr>
<tr>
<td align="right" width="150" height="50">用户名：</td>
<td width="350" height="50"><input type="text" name="姓名" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src=http://tech.ddvip.com/2006-10/"1.jpg" name="image1">
<input type="image" src=http://tech.ddvip.com/2006-10/"2.gif" name="image2" ONCLICK="MYSUB4">
</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="表单的名称" method="get | post" action="URL">
<input type="checkbox" name="字符串" value="字符串" [checked] >
</form>二）属性：
单行文本框具有以下属性(表四）| 属 性 | 含 意 |
| NAME | 指定复选框的名称。 |
| VALUE | 指定提交时的值。 |
| TYPE="checkbox" | TYPE属性设置为checkbox,表明是复选框控件。 |
| CHECKED | 可选项，若使用该属性，则当第一次打开表单时该复选框处于选中状态。 |
三）实例的代码：
实例5(5.asp)
<html>
<head><title>使用复选框控件</title>
</head>
<body>
<center>
<h1>使用复选框控件</h1><hr>
<input name="text1" type="text" value="你今天心情好吗？" Style={font:30} Size="20"><p>
斜体<input type="checkbox" name="chk" checked>
粗体<input type="checkbox" name="chk">
下划线<input type="checkbox" name="chk">
删除线<input type="checkbox" name="chk">
</center>
<Script for=chk Event=onClick Language=VBScript>
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="表单的名称" method="get | post" action="URL">
<input type="radio" name="字符串" value="字符串" [CHECKED]>
</form>二）属性：
单行文本框具有以下属性(表五）| 属 性 | 含 意 |
| NAME | 指定单选按钮的名称。 |
| VALUE | 指定提交时的值。 |
| TYPE="radio" | 表明是单选按钮。 |
| CHECKED | 可选项，若使用该属性，则当第一次打开表单时该单选按钮处于选中状态。 |
三）实例的代码：
实例6(6.asp)
<html>
<head><title>熟悉单选按钮的使用</title>
</head>
<body>
<form method="post" name="form1" action="6.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr bgcolor="#0099cc">
<th colspan="2">
<font color="#fffff">登录表单</font></th>
</tr>
<tr>
<td align="right" width="150" height="50">用户名：</td>
<td width="350" height="50"><input type="text" name="姓名" size="20"></td>
</tr>
<tr>
<td align="right" width="150" height="50">性别：</td>
<td width="350" height="50"><input type="radio" name="性别" value="男" checked>男 <input type="radio" name="性别" value="女">女</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="reset" name="rest1" value="重设数据"> <input type="submit" name="submit1" value="提交数据">
</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="表单的名称" method="get | post" action="URL">
<input type="file" name="字符串" value="字符串" size="整数">
</form>二）属性：
文件域具有以下属性(表六）| 属 性 | 含 意 |
| NAME | 指定文本域的名称。 |
| VALUE | 给出文本域的初始值。 |
| SIZE | 指定文本域的宽度。 |
| TYPE="FILE" | 表明是文件域控件。 |
三）实例代码：
实例7(7.asp) 本实例通过一个文本域来选择一个文件的路径和文件名，然后在同一页显示选择文件的绝对路径。
<html>
<head><title>文件域示例</title>
</head>
<body>
<form method="post" name="form1" action="7.asp">
<table align="center" bgcolor="#d6d3ce" width="500">
<tr>
<th colspan="2" bgcolor="#0099cc"><font color="ffffff">文 件 域</font></th>
</tr>
<tr>
<td height="50" align="right"><font color="000000">请选择文件：</font></td>
<td height="50"><input type="file" name="文件名" size="16"></td>
</tr>
<tr>
<td height="50" align="right"><input type="submit" value="提交" name="btnSubmit"></td>
<td height="50"><input type="reset" value="重置" name="btnReset"></td>
</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="表单的名称" method="get | post" action="URL">
<input type="hidden" name="字符串" value="字符串">
</form>二）属性：
文件域具有以下属性(表七）| 属 性 | 含 意 |
| NAME | 指定隐藏域的名称。 |
| VALUE | 给出隐藏域的默认值。 |
| TYPE="hidden" | 表明是隐藏域控件。 |
三）实例：（11.htm)
<html>
<head><title>隐藏域的应用</title></head>
<body>
<br><br><br><br>
<center>
<form name="form1">
<b>下面是你隐藏域的信息:</b>
</center>
<input type="hidden" name="yourhiddeninfo" value="部门=财务处">
</form>
<script>
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>hide</title>
<style type="text/css">
<!--
.STYLE1 {
color: #FFFFFF;
font-size: 24px;
}
.STYLE2 {font-size: 18px}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" align="center">
<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>：
<input name="姓名" type="text" id="姓名" size="10" maxlength="10" /></td>
</tr>
<tr>
<td height="50" align="center" bgcolor="#CCCCCC"><input type="hidden" name="h" value="大成" />
<input type="submit" name="Submit" value="提 交" />
<input type="reset" name="Submit2" value="重 置" /></td>
</tr>
</table>
</form>
<center>
<%
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>
- ››asp.net页面弄成伪静态页面
- ››Asp.net 中将汉字转换成拼音的方法
- ››ASP.NET及JS中的cookie基本用法
- ››ASP.NET获取MS SQL Server安装实例
- ››asp.net实现调用百度pai 在线翻译英文转中文
- ››ASP.NET页面选项进行提示判断
- ››Asp.net定时执行程序
- ››ASP.NET中利用DataList实现图片无缝滚动
- ››ASP.NET验证控件RequiredFieldValidator
- ››ASP.NET中使用System.Net.Mail发邮件
- ››ASP.NET中获取用户控件中控件的ID
- ››ASP.NET中FileBytes写成文件并存档
中查找“ASP入门基础教程-使用输入型表单控件”更多相关内容
中查找“ASP入门基础教程-使用输入型表单控件”更多相关内容
赞助商链接
