表单的一些基本用法与技巧


Posted in Javascript onJuly 15, 2006

1、 用图像代替提交按钮
 当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
 <input type="image" name="..." src="url" width="" height="..." border="...">
 除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样的。

 2、用图片代替所有的表单按钮:
 代替submit按钮的图片代码格式是
 <input type="image" name="..." src="..." onClick="document.formName.submit()">
 代替reset按钮的代码图片格式是
 <input type="image" name="..." src="..." onClick="document.formName.reset()">
 注:这里的formName是表单的name属性值。

 3、表单的提交验证:
 <script>
 function CheckDate(){
 //取得输入的数据
 userName = document.RedForm.userName.value;
 userEmail = document.RedForm.userEmail.value;
 //如果没有输入姓名
 if (userName=="") {
 alert("请输入姓名");
 document.RedForm.userName.focus();
 return false;
 }else{
 //如果没有输入Email,或者Email地址错误(不含@)
 if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {alert("请重新输入Email地址");
 document.RedForm.userEmail.focus();
 return false;
 }else return true;
 }
 }
 </script>

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

Javascript 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
Jquery $when done then的用法详解
May 20 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
vue实现循环滚动列表
Jun 30 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
popdiv
Jul 14 #Javascript
游戏人文件夹程序 ver 4.03
Jul 14 #Javascript
游戏人文件夹程序 ver 3.0
Jul 14 #Javascript
表单提交验证类
Jul 14 #Javascript
如何实现浏览器上的右键菜单
Jul 10 #Javascript
载入进度条 效果
Jul 08 #Javascript
让广告代码不再影响你的网页加载速度
Jul 07 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
JS 时间显示效果代码
2009/08/23 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript多线程详解
2015/08/12 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
统计员岗位职责
2013/11/14 职场文书
实习教师自我鉴定
2013/12/12 职场文书
奖学金感谢信
2015/01/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis