本站首页 设计艺术 绘画艺术 工艺美术 摄影艺术 书法篆刻 表演艺术 精品网址 艺家在线 专题报道 艺术搜索
广
您的位置:首页>>设计艺术>>网页设计>>文章内容 栏目编辑:A君
轻松玩转花样表单
2004-3-22  作者:  来源:blueidea  【字体:

四、表单的常用技巧

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

  1.下拉跳转菜单

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

 样例22
:基于表单的下拉跳转菜单

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

<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类网站上,用的好的话,可以方便用户。

 样例23
:内容自动聚焦

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

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

 样例24:表格和表单的空隙处理

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

这里有空隙

这里没有空隙

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

<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用户)

 样例25:Email提交表单
主题:
内容:
 

  分析:看看我们的表单<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!也可以,大家可以试验一下。


[首页]    [上一页]    [下一页]    [末页]    

版权申明:
  部分特别声明不要转载、或者授权本站独家发布的文章,未经授权不要转载、摘编、复制或建立镜像; 大家可以自由转载本站的文章,但原作者和来自我站的链接必须保留。文章版权归本站和原作者共有。
  六艺中文网(6Art.Net)依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请即时与我们联系, 注明网址及文章,我们会即时处理或删除,感谢您的合作!



支持我们

功夫巨星李小龙

建筑大师贝律铭

艺术大师刘海粟

国画大师张大千

商业画家陈逸飞

当代书法黄学江

摄影大师吴印咸

艺术名家黄敦


相关文章

·风讯模版设计大赛
·网站设计的标准时代
·制作网站的基本原则
·Dreamweaver MX 2004从零开始-用表格定位网页
·关于版权声明的写法
·内容管理系统的设计和选型
·网站设计65条原则
·利用CSS改善网站可访问性
·JS实现浏览器菜单命令
·WEB 技术模拟应用程序
 查找:轻松玩转花样表单相关  【关闭】  【顶部
关于站点 | 联系方法 | 版权隐私 | 南艺创业协会 | 网站地图 | 网站画廊 Copyright © 2003-2010 6Art.net.All rights reserved. 
苏ICP备05000085号.  技术支持:名家画廊在线