首页 » 建站技术 » 浏览内容

玩转花样表单 (4)


2005-05-15 09:42:44 4,362 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

From:http://www.netbei.com/Article/art/art5/200409/2329_4.html

点击查看效果页面:http://netbei.com/demo/js/0906/form.htm 或者 http://a.linji.cn/attachment/1116119826.htm

  2.表单的分支提交

  有的时候,表单需要根据用户的选择,提交到不同的程序,怎么做呢?

  通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例:

  分支提交

  (观看效果页样例21)

  分析:这里首先用到的是form的onSubmit=”TwoSubmit(this)”,然后根据选择的分支,来分别递交到不同的程序,TwoSubmit()函数如下:

<script>
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = “cop.asp”;//这里是分支一
}else{
form.action = “ind.asp”;//这里是分支二
}
form.submit();
}
</script>

  3.用任何元素提交表单

   是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:

  用链接来提交表单

  (观看效果页样例22)

  分析:

  通过onClick=”document.form.submit()”来提交表单;用onClick=”document.form.reset()”来复位表单,这样一来,任何一个元素都可以实现提交表单了。

  四、表单的常用技巧

  这些常用技巧,往往是和事件以及脚本联系在一起,本文注重功能,至于脚本,就不一一详细分析。常见的技巧有:下拉跳转菜单,表单内容的聚焦。
  1.下拉跳转菜单

  在Dreamweaver中,可以很方便地建立基于表单的下拉菜单,为了兼顾非Dreamweaver用户,这里讲述一下这种技巧。

  基于表单的下拉跳转菜单

  (观看效果页样例23)

  分析:实际上,这里用到了一个函数,用于向选择的地址跳转,

<script language=”javascript”>
function FormMenu(targ,selObj,restore){
eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”'”);
if (restore) selObj.selectedIndex=0;
}
</script>

  然后,给下拉选择框赋予一个事件onChange=”FormMenu('parent',this,0)”,就可以了。

  2.表单内容的聚焦

  内容聚焦,常用在Copy&Paste类网站上,用的好的话,可以方便用户。

  内容自动聚焦

  (观看效果页样例24)

  分析:上面分别使用了两个事件,Email的是onFocus=”this.value=''”,自动选择的是onMouseOver=”this.select()”

  3.去掉表格和表单间的空隙

 表格和表单的空隙处理

  (观看效果页样例25)

  表格,我们常用来构架页面,可是,表格里的表单总是和表格的内容有一个空隙。

  分析:为什么没有空隙呢,看看右边的代码就知道了。

<table width=”100%” border=”1″ cellspacing=”1″ cellpadding=”1″>
<tr>
<form name=”form3″ method=”post” action=””>
<td> <input type=”text” name=”textfield2″><br>
<input type=”submit” name=”Submit22″ value=”Submit”>
这里没有空隙 </td>
</form>
</tr>
</table>   

  也就是说,把<form>标签放到<tr>和<td>中间,对应的</form>放在</td>和</tr>中间!

  4.用Email提交表单(只适合Outlook用户,不适合Foxmail用户)

  Email提交表单

  (观看效果页样例26)

  分析:看看我们的表单<form>标签就知道了,格式如下:

  <form name=”…” action=”mailto:xxxxx@xxx.xxx?Subject=表单反馈” enctype=”text/plain” method=”post”>…</form>

  这里的mailto:后面加上要接受信息的地址,?Subject是设置默认的Email标题,
enctype=”text/plain”是必要的,表示信息以文本方式提交,没有任何加密,所以这种方法常用于没有Asp/Php/cgi支持的空间,也只是一个代用的方法,用户必须安装Outlook,并且是默认的邮件程序,才能顺利执行提交,据说TheBat!也可以,大家可以试验一下。

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5064 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14158438 位访客

广告区 Guǎng Gào