为了让用户通过表单输入数据,可以使用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.abc.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.abccom/" end sub SUB MYSUB2() Window.location.href="http://www.abc.com/" end sub SUB MYSUB3() Window.location.href="http://www.abc.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://www.10086web.com/html/wangluobiancheng/aspbiancheng/2010/0528/"4.jpg" name="image4" value="提交数据" ONCLICK="MYSUB1"> <input type="image" src=/uploadfile/201211/25/0C223013909.jpg" name="image5" value="提交数据" ONCLICK="MYSUB2"> <input type="image" src=/uploadfile/201211/25/80223013176.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=/uploadfile/201211/25/CD223013476.jpg" name="image1"> <input type="image" src=/uploadfile/201211/25/66223014626.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.abc.com/index.html" response.redirect file else response.write "您还没有访问此页面的权限" end if %> </center> </body> </html> (责任编辑:admin) |