为了让用户通过表单输入数据,可以使用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="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="<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> |