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

【 tulaoshi.com - Web开发 】

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

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

　　一）格式：

　　form name="表单的名称" method="get | post" action="URL"
　　input type="text" name="字符串" value="字符串" size="整数" maxlength="整数"　　/form

　　二）属性：

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

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

　　三）实例的代码：

　　实例1(1.asp)

　　html　　headtitle简单的登录表单/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="centerb您的姓名为："　　b="/b/center"　　response.write a & t1 & b　　else　　response.write "centerb您还没有输入大名/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　　headtitle简单的登录表单/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="centerb您的姓名为："　　b="/b/center"　　c="centerb您的密码为："　　response.write a & t1 & b & "br"　　response.write c & ps & b　　else　　response.write "centerb您还没有输入大名和密码。/b/center"　　end if　　%　　/body　　/html

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

　　一）格式：

　　form name="表单的名称" method="get | post" action="URL"　　input type="submit|reset|button" name="字符串" value="字符串" onClick="过程名"　　/form

　　二）属性

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

　　指定按钮控件的名称。

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

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

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

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

　　 三）事件：

　　按钮控件还支持 onClick 事件。

　　 四）实例代码：

　　实例3(3.asp)

　　HTML　　HEADTITLE在表单中使用按钮控件/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　　centerH3调用事件过程/H3HR 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

　　二）属性：

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

　　指定图形化按钮的名称。

　　三）实例的代码：

　　实例4(4.asp)

　　HTML　　HEADTITLE图形化按钮的使用/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　　centerH1图形化按钮的使用/H1HR WIDTH="70%" color="#009999"　　input type="image" src="4.jpg" name="image4" value="提交数据" ONCLICK="MYSUB1"　　input type="image" src="5.jpg" name="image5" value="提交数据" ONCLICK="MYSUB2"　　input type="image" src="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="1.jpg" name="image1"　　input type="image" src="2.gif" name="image2" ONCLICK="MYSUB4"　　/tr　　/table　　/form　　%　　dim t1,a,b　　t1=request.form("姓名")　　if t1"" then　　a="centerb您的姓名为："　　b="/b/center"　　response.write a & t1 & b　　else　　response.write "centerb您还没有输入大名/b/center"　　end if　　%　　/center　　/BODY　　/HTMl

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

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

　　一）格式：

　　form name="表单的名称" method="get | post" action="URL"　　input type="checkbox" name="字符串" value="字符串" [checked] 　　/form

　　二）属性：

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

　　指定复选框的名称。

　　三）实例的代码：

　　实例5(5.asp)

　　html　　headtitle使用复选框控件/title　　/head　　body　　center　　h1使用复选框控件/h1hr　　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

　　二）属性：

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

　　指定单选按钮的名称。

　　三）实例的代码：

　　实例6(6.asp)

　　html　　headtitle熟悉单选按钮的使用/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="centerb欢迎"　　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

　　二）属性：

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

　　指定文本域的名称。

　　三）实例代码：

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

　　html　　headtitle文件域示例/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="centerb您选择的文件绝对路径为："　　b="/b/center"　　response.write a & f1 & b　　else　　response.write "centerb您还没有选择文件。/b/center"　　end if　　%　　/body　　/html

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

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

　　一）格式：

　　form name="表单的名称" method="get | post" action="URL"　　input type="hidden" name="字符串" value="字符串"　　/form

　　二）属性：

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

　　指定隐藏域的名称。

　　 三）实例：（11.htm)

　　html　　headtitle隐藏域的应用/title/head　　body　　brbrbrbr　　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" /　　titlehide/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