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


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 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
js实现随机点名小功能
2017/08/17 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
python pandas模块基础学习详解
2019/07/03 Python
python 线程的五个状态
2020/09/22 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
事业单位辞职信范文
2014/01/19 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
运动员口号
2014/06/09 职场文书
卫生标语大全
2014/06/21 职场文书
承诺书模板
2014/08/30 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
赤壁观后感(2)
2015/06/15 职场文书
高中运动会前导词
2015/07/20 职场文书
小学毕业感言200字
2015/07/30 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python