网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

520

凡事预则立,不预则废

导航

 
 
 
 
 

日志

 
 
关于我
预立
文章分类

asp学习笔记01-认识表单  

2010-04-29 12:45:12|  分类： asp学习 |  标签： |举报 |字号大中小 订阅

  下载LOFTER 我的照片书  |
无论是asp,php还是jsp进行网络编程的时候，都离不开和用户的交互。

　　而人机对话的平台，基本上是靠相应的文本、列表框进行输入，然后通过按钮提交送至数据库的。

　　所以学习网络编程就一定要了解这些输入平台相关的东西：表单（form）

　　其基本格式如下：

<form name="form1" action="xxx.asp" method="post">
<input type="text" name="yourname">
<select name="selectwhat">
<option>aaa</option>
<option>aaa</option>
</select>
<textarea name="textinit" rows=5 cols=10></textarea>
</form>


　　可以总结出：表单即包括<form>...</form>之内的相关内容。

　　其中内部可以分三大类：input，select，textarea

　　一．首先看<form>内部参数

　　参数name：用来表示该表单的唯一名称，方便一个页面建立多个表单而不混淆，当然更是为了接受页面的确认关系。

　　参数action：显而易见，是表示当前的表单中所有内容将送交某个页面去处理。处理包括接受信息，数据库比较，添加，修改等。

　　参数method：即表单的提交方法，含两种方法：post和get。post是传输信息内容，get是传输url值，具体用法将会在下一节“内置对象request”中介绍到

　　二．再来看Input相关

　　Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。

　　1．type=text

　　输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。

　　参数name：同样是表示的该文本输入框名称。
　　参数size：输入框的长度大小。
　　参数maxlength：输入框中允许输入字符的最大数。
　　参数value：输入框中的默认值
　　特殊参数readonly：表示该框中只能显示，不能添加修改。

<form>
your name:<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>


　　2．type=password

　　不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。

<form>
your password:<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
</form>

　　3．type=file

　　当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）提供了一个文件目录输入的平台，参数有name，size。

<form>
your file:
<input type="file" name="yourfile" size="30">
</form>


　　4．type=hidden

　　非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。

　　一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。

<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>

　　5．type=button

　　标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。

<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')">
</form>


 

　　6．type=checkbox

　　多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）。其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）

<form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked><br>
b:<input type="checkbox" name="checkit" value="b"><br>
c:<input type="checkbox" name="checkit" value="c"><br>
</form>
name值可以不一样，但不推荐<br>

<form name="form1">
a:<input type="checkbox" name="checkit1" value="a" checked><br>
b:<input type="checkbox" name="checkit2" value="b"><br>
c:<input type="checkbox" name="checkit3" value="c"><br>
</form>

 

　　7．type=radio

　　即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

<form name="form1">
a:<input type="radio" name="checkit" value="a" checked><br>
b:<input type="radio" name="checkit" value="b"><br>
c:<input type="radio" name="checkit" value="c"><br>
</form>

下面是name值不同的一个例子，就不能实现多选一的效果了<br>

<form name="form1">
a:<input type="radio" name="checkit1" value="a" checked><br>
b:<input type="radio" name="checkit2" value="b"><br>
c:<input type="radio" name="checkit3" value="c"><br>
</form>

 

　　8．type=image

　　比较另类的一个，自己看看效果吧，可以作为提交式图片。

<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>


 

　　9．type=submit and type=reset

　　分别是“提交”和“重置”两按钮。submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。

<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

　　Input的Type总结下来有10个，还是不少的，呵呵

 

　　三．接着再来看Select相关

　　Select主要要来做下拉菜单，跳转菜单，（下拉）列表。其本身有内嵌代码<option>...</option>，option参数value值为传递被处理的值，option还有参数selected，表示默认被选中的。

　　1．下拉菜单

　　只是菜单式显示。

<form name="form1">
<select name="selectwhat">
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c" selected>ccc</option>
</select>
</form>

<script>
alert("菜单的默认选取值是 "+document.form1.selectwhat.value)
</script>

　　2．跳转菜单

　　在下拉菜单基础上添加JavaScript成为跳转菜单。

<select onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
<option selected>网站连接……</option>
<option value="http://www.cnbruce.com/">Cn-Bruce</option>
<option value="http://www.blueidea.com/">Blue!dea</option>
<option value="http://www.it365cn.com/">It365cn</option>
</seclect>
　　

　　3．下拉列表

　　和下拉菜单最大的区别就是select多了一个size值，该值并非长度大小，而是列表的上下高度。当然还有更主要的是：菜单只能选一个，而列表可以选多个，该特殊参数为multiple　size=1简直就是一个下拉菜单。

<form name="form1">
<select name="selectwhat" size=1>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>
</select>
</form><br>

size>1你会发现了大不同
<form name="form1">
<select name="selectwhat" size=3>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>
</select>

</form><br>

　　加入了multiple发现可以多个选择了，包括Shift进行快速全选及Ctrl进行点选

<form name="form1">
<select name="selectwhat" size=3 multiple>
<option value="a">aaa</option>
<option value="b">bbb</option>
<option value="c">ccc</option>
</select>
</form><br>


 

　　四．最后关注的Textarea

　　可以将Textarea文本区域理解为扩大化了的文本输入框。其参数没有value，默认值设定在<textarea>...</textarea>之间。其它参数还有rows,表示文本区域的行数；参数cols，表示文本区域的列数。还有参数warp，当warp=off表示该文本区域中的不自动换行，当然不写默认是自动换行的。

<form name="form1">
<textarea name="textinit" rows="5" cols="20" wrap="off">5行20列，不自动换行</textarea>
</form>

 

　　最后总结：input根据type分10类，select从option处又分菜单和列表，textarea有行有列的文本输入区域。

  评论这张
 
阅读(286)| 评论(0)

历史上的今天

评论

<#--最新日志，群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易公司版权所有 ©1997-2018