除了使用INPUT标记创建输入型表单控件外,也可以使用TEXTAREA标记创建多行文本框,或使用SELECT标记创建选项选单,还可以使用FIELDSET标记以表单中的控件进行分组。 1、在表单中使用多行文本框控件 一)格式: <form name="表单的名称" method="get | post" action="URL"> <TEXTAREA name="字符串" ROWS="整数" COLS="整数" [READONLY] >......</TEXTAREA> </form> 注:在<TEXTAREA></TEXTAREA>中输入的文本将作为该控件的初始值。 二)属性: 多行文本框具有以下属性(表一) 属 性 | 含 意 | NAME | 指定多行文本框的名称。 | ROW | 指定多行文本框的行数。 | COLS | 指定多行文本框的宽度(以字符串为单位)。 | READONLY | 指定多行文本框不能被用户所修改。 |
三)实例的代码: 实例8(8.asp) <html> <head><title>多行文本域</title> <style type="text/css"> body,td,th { font-size: 11pt; color: #000000; line-height: 1.5; } body { margin-top: 50px; margin-bottom: 0px; } </style> </head> <body> <form method="post" name="form1" action="8.asp"> <table align="center" bgcolor="#d6d3ce"> <tr> <th bgcolor="#0099cc"><font color="ffffff">多行文本域</font></th> <tr> <td height="50" align="left"><font color="000000">请您留言:</font></td> </tr> <tr> <td height="50"><textarea name="内容" cols="50" rows="4">赠人玫瑰,手留余香。</textarea></td> </tr> <tr align="center"> <td height="50" align="center"><input type="submit" value="提交" name="btnSubmit"> <input type="reset" value="重置" name="btnReset"></td> </tr> </table> <p><p><center>**********************************************</center> </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> 2、在表单中使用选项控件 一)格式: 使用列表框控件,可以让访问者从列表单中选择选项。 <form name="表单的名称" method="get | post" action="URL"> <SELECT name="字符串" size="整数" [MULTIPLE]> <OPTION [SELECTED] value="字符串">选项1</OPTION> <OPTION [SELECTED] value="字符串">选项1</OPTION> ...... </SELECT> </form> 二)属性: 列表框具有以下属性(表二) 属 性 | 含 意 | NAME | 指定选项控件的名称。 | SIZE | 指定在列表中一次可以看到的选项数目。 | MULTIPLE | 指定是否允许作多项选择。 | SELECTEDINDEX | 返回或设置哪个选项被选取。 | LENGTH | 返回列表框中的选项个数。 | style | 设置列表框的样式,如高度,宽度,字体等 "style=width:100px;height=30px"。 |
OPTION具有以下属性(表三) 属 性 | 含 意 | TEXT | 指定选项文本。 | VALUE | 指定选项的值。 | SELECTED | 可选项,加上本项表示该项是预置的,同一个<SELECT>标记只能有一个。 |
三)实例代码: 实例9(9.asp) <html> <head><title>使用列表框</title> <style type="text/css"> body,td,th { font-size: 11pt; color: #000000; line-height: 1.5; } body { margin-top: 50px; margin-bottom: 0px; } </style> </head> <body> <center><h3>使用列表框</h3><hr width="50%"> <Select size=2 style="width:100px;" name="select1"> <option value="Bei jings">北京</option> <option value="Shang hai">上海</option> <option value="Tian jin">天津</option> <option value="Chong qing">重庆</option> </Select> <p> 列表框中的选项个数:<input type="text" name="text1" size=3></p> 选定项的Value值为:<input type="text" name="text2" size=10></p> 选定项的text值为:<input type="text" name="text3" size=10></p></center> <Script for="select1" event="onClick" Language="VBScript"> i=select1.selectedindex text1.value=select1.length text2.value=select1.options(i).value text3.value=select1.options(i).text </Script> </body> </html> 四)代码注解: 1、本例通过<select></select>标记定义了一个名为select1的列表框,并通过<option></option>标记定义各个选项。 2、在同一页面处理该表单,并显示各项值。 3、对表单控件分组 为了便于管理,可以将表单中的各控件进行分组。用<FIELDSET>标记必须以LEGEND标记开头,以指定控件组的标题,在LEGEND标记之后可以跟其他表单控件,也可以嵌套LEGEND标记。 一)格式: <form name="表单的名称" method="get | post" action="URL"> <FIELDSET> <LEGEND>控件组标题</LEGNED> 组内表单控件 </FIELDSET> </form> 二)实例代码: 实例10(10.asp) <html> <head><title>控件组件实例</title></head> <body> <form> <table align="center"> <tr><td> <fieldset> <legend><b>个人资料</b></legend> <table bgcolor="#d6d3ce" width="400" align="center"> <tr> <td align="right">姓名:</td> <td><input type="text" name="t1" size="20"></td> </tr> <tr> <td align="right">性别:</td> <td><input type="radio" name="r1" checked value="男">男 <input type="radio" name="r1" value="女">女</td> </tr> <tr><td align="right">出生日期:</td> <td><input type="text" name="t2" size="20"></td> </tr> <tr> <td valign="top" align="right">个人特长:</td> <td><textarea rows="3" name="s1" colos="20"></textarea></td> </tr> </table> </fieldset> </td> </tr> <tr> <td> <!-- ***************************************** --> <fieldset> <legend><b>专业与课程</b></legend> <table bgcolor="#d6d3ce" width="400" align="center"> <tr> <td valign="top" align="right">所学专业:</td> <td><select size="1" name="d1"> <option selected>计算机及应用</option> <option>计算机网络技术</option> <option>计算机软件</option> </select></td></tr> <tr><td valign="top" align="right">所学课程:</td> <td><select size="3" name="22" multiple> <option>计算机应用基础</option> <option>办公软件</option> <option>数据库应用基础</option> <option>Visual BASIC程序设计</option> <option>ASP动态网页设计</option> </select></td> </tr> </table> </fieldset> <p align="center"> <input type="submit" value="提交" name="b1"> <input type="reset" value="全部重写" name="b2"></p> </td> </tr> </table> </form> </body> </html> 三)代码注解: 1、本实例是一个在表单内套了一个二行一列的表格,第一行和第二行分别嵌入一个表单分组控件。第一个分组控件用于组织提交“个人资料”的控件。第二个分组控件用于组织提交“专业与课程”的控件。 2、表单内那个二行一列的表格,只是为设定表单的宽度。 查看全套"ASP入门基础"教程>>>>> (责任编辑:admin) |