ASP编程入门进阶（二）：认识表单

说实话，无论是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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
可以总结出：表单即包括<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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

2，type=password
不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和“type=text”相类似。
<form> your password: <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15 </form>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

3，type=file
当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）
提供了一个文件目录输入的平台，参数有name，size。
<form> your file: <input type="file" name="yourfile" size="30"> </form>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

8，type=image
比较另类的一个，自己看看效果吧，可以作为提交式图片
<form name="form1" action="xxx.asp"> your Imgsubmit: <input type="image" src="../blog/images/face4.gif"> </form>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

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&g <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-3021903444118463" data-ad-slot="2749611331"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <!--endmain--> <div class="tags mt10"> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more">分享到：</a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧">百度贴吧</a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a><a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址">复制网址</a><a href="#" class="bds_print" data-cmd="print" title="分享到打印">打印</a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{"bdSize":16},"image":{"viewList":["qzone","tsina","tqq","weixin","tieba","sqq","copy","print"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> <div class="art_xg"> <h4>您可能想查找下面的文章:</h4><ul> <li><a href="/program/asp/20175/28355.html" title="asp 读取通过表单发送的post数据" target="_blank">asp 读取通过表单发送的post数据</a></li><li><a href="/program/asp/20175/28499.html" title="ASP下批量删除数据的两种方法" target="_blank">ASP下批量删除数据的两种方法</a></li><li><a href="/program/asp/20175/28501.html" title="asp添加数据实现代码" target="_blank">asp添加数据实现代码</a></li><li><a href="/program/asp/20175/28531.html" title="asp 删除数据并同时删除图片的代码" target="_blank">asp 删除数据并同时删除图片的代码</a></li><li><a href="/program/asp/20175/28627.html" title="asp 横排显示数据" target="_blank">asp 横排显示数据</a></li><li><a href="/program/asp/20175/28710.html" title="ASP 千万级数据分页的存储过程" target="_blank">ASP 千万级数据分页的存储过程</a></li><li><a href="/program/asp/20175/28950.html" title="asp实现防止从外部提交数据的三种方法第1/3页" target="_blank">asp实现防止从外部提交数据的三种方法第1/3页</a></li><li><a href="/program/asp/20175/28956.html" title="ASP之处理用Javascript动态添加的表单元素数据的代码" target="_blank">ASP之处理用Javascript动态添加的表单元素数据的代码</a></li><li><a href="/program/asp/20175/28988.html" title="Asp下实现多表单域无组件文件上传的实例" target="_blank">Asp下实现多表单域无组件文件上传的实例</a></li><li><a href="/program/asp/20175/29009.html" title="比较不错的asp单表单字段多条件查询" target="_blank">比较不错的asp单表单字段多条件查询</a></li> </ul> </div> <div class="relatedarticle clearfix mt5"> <H2>相关文章</H2> <ul> <li><span>2017-05-11</span><a href="/program/asp/20175/29240.html" title="web文件管理器的后续开发" target="_blank">web文件管理器的后续开发</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/28514.html" title="asp下以Json获取中国天气网天气的代码" target="_blank">asp下以Json获取中国天气网天气的代码</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/28928.html" title="javascript css 三级目录(简单的)" target="_blank">javascript css 三级目录(简单的)</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/29926.html" title="ASP采集入库生成本地文件的几个函数" target="_blank">ASP采集入库生成本地文件的几个函数</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/29540.html" title="获取远程flash并保存到本地" target="_blank">获取远程flash并保存到本地</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/29848.html" title="实现对Access数据库表重命名的一段代码" target="_blank">实现对Access数据库表重命名的一段代码</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/29123.html" title="飞云写的防CC攻击的ASP程序插件 打包下载" target="_blank">飞云写的防CC攻击的ASP程序插件 打包下载</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/29057.html" title="asp下比较全面的获取IP地址的代码" target="_blank">asp下比较全面的获取IP地址的代码</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/28778.html" title="AJAX简单应用实例-弹出层" target="_blank">AJAX简单应用实例-弹出层</a></li><li><span>2017-05-11</span><a href="/program/asp/20175/28963.html" title="ASP 中 DateDiff 函数详解 主要实现两日期加减操作" target="_blank">ASP 中 DateDiff 函数详解 主要实现两日期加减操作</a></li> </ul> </div> </div> </div><!--endborder--> <!--end fr--> <div class="w300 fr"> <div class="subcate bord"> <div class="asidetit cl"><h3>文章分类</h3></div> <div class="subcatec"> <ul> <li><a href='/program/javascript/javascript.html' title="JavaScript">JavaScript</a></li><li><a href='/program/aspx/aspx.html' title="ASP.NET">ASP.NET</a></li><li><a href='/program/php/php.html' title="PHP">PHP</a></li><li><a href='/program/regular/regular.html' title="正则表达式">正则表达式</a></li><li><a href='/program/ajax/ajax.html' title="AJAX">AJAX</a></li><li><a href='/program/jsp/jsp.html' title="JSP">JSP</a></li><li><a href='/program/asp/asp.html' title="ASP">ASP</a></li><li><a href='/program/flex/flex.html' title="Flex">Flex</a></li><li><a href='/program/xml/xml.html' title="XML">XML</a></li><li><a href='/program/skill/skill.html' title="编程技巧">编程技巧</a></li><li><a href='/program/android/android.html' title="Android">Android</a></li><li><a href='/program/swift/swift.html' title="swift">swift</a></li><li><a href='/program/csharp/csharp.html' title="C#教程">C#教程</a></li><li><a href='/program/vb/vb.html' title="vb">vb</a></li><li><a href='/program/vbnet/vbnet.html' title="vb.net">vb.net</a></li><li><a href='/program/c/c.html' title="C语言">C语言</a></li><li><a href='/program/java/java.html' title="Java">Java</a></li><li><a href='/program/delphi/delphi.html' title="Delphi">Delphi</a></li><li><a href='/program/ef/ef.html' title="易语言">易语言</a></li><li><a href='/program/mfc/mfc.html' title="vc/mfc">vc/mfc</a></li><li><a href='/program/embed/embed.html' title="嵌入式开发">嵌入式开发</a></li><li><a href='/program/game/game.html' title="游戏开发">游戏开发</a></li><li><a href='/program/ios/ios.html' title="ios">ios</a></li><li><a href='/program/faq/faq.html' title="编程问答">编程问答</a></li><li><a href='/program/assembly/assembly.html' title="汇编语言">汇编语言</a></li><li><a href='/program/weixin/weixin.html' title="微信小程序">微信小程序</a></li><li><a href='/program/structure/structure.html' title="数据结构">数据结构</a></li><li><a href='/program/opengl/opengl.html' title="OpenGL">OpenGL</a></li><li><a href='/program/enterprise/enterprise.html' title="架构设计">架构设计</a></li><li><a href='/program/qt/qt.html' title="qt">qt</a></li><li><a href='/program/mpweixin/mpweixin.html' title="微信公众号">微信公众号</a></li> <div class="clearfix"></div> </ul> </div> </div> <div class="tabTitleBar mt10 bgf borderTblue"> <div class="borderTnone pb10 YaHei"> <h4 class="blue">最近更新的内容</h4> <ul class="newsListA"> <ul> <li><a href="/program/asp/20175/28645.html" title="asp 得到动态数组中元素的个数" target="_blank">asp 得到动态数组中元素的个数</a></li> <li><a href="/program/asp/20175/29142.html" title="asp页面下的乱码问题终于解决了" target="_blank">asp页面下的乱码问题终于解决了</a></li> <li><a href="/program/asp/20175/28885.html" title="文件名 正则表达式提取方法" target="_blank">文件名 正则表达式提取方法</a></li> <li><a href="/program/asp/20175/29470.html" title="ASP编程入门进阶（七）：内置对象Server" target="_blank">ASP编程入门进阶（七）：内置对象Server</a></li> <li><a href="/program/asp/20175/28944.html" title="用Asp隐藏文件路径，实现防盗链 的代码" target="_blank">用Asp隐藏文件路径，实现防盗链 的代码</a></li> <li><a href="/program/asp/20175/29051.html" title="kesion科讯V4.0管理员Key工具" target="_blank">kesion科讯V4.0管理员Key工具</a></li> <li><a href="/program/asp/20175/29440.html" title="利用SA FileUp组件进行多文件上传" target="_blank">利用SA FileUp组件进行多文件上传</a></li> <li><a href="/program/asp/20175/29373.html" title="On Error Resume Next 语句" target="_blank">On Error Resume Next 语句</a></li> <li><a href="/program/asp/20175/28905.html" title="asp下利用fso实现文件夹或文件移动改名等操作函数" target="_blank">asp下利用fso实现文件夹或文件移动改名等操作函数</a></li> <li><a href="/program/asp/20175/29004.html" title="asp空间奸商查询系统" target="_blank">asp空间奸商查询系统</a></li> </ul> </ul> </div> </div> </div> </div><!--end fl--> </div><!--end content--> <div id="footer"> <div class="main clearfix"> <p> <a href="http://www.linkedu.com/about/about.html" target="_blank">关于我们</a> - <a href="http://www.linkedu.com/about/linkus.html" target="_blank">联系我们</a> - <a href="http://www.linkedu.com/about/disclaimer.html" target="_blank">免责声明</a> - <a href="http://www.linkedu.com/about/index.html" target="_blank">网站地图</a> </p> <p>©2020-2025 All Rights Reserved. linkedu.com 版权所有 </p> </div> </div><!--end footer--> <script type=text/javascript src="/template/js/common.js"></script> <!--end footer--> </div> </body> </html>