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


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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
理解javascript中的闭包
Jan 11 Javascript
深入理解React高阶组件
Sep 28 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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中动态显示签名和ip原理
2007/03/28 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
jQuery实现可以扩展的日历
2020/12/01 jQuery
python之import机制详解
2014/07/03 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python中包的用法及安装
2020/02/11 Python
美术教学感言
2014/02/22 职场文书
2014年建筑工作总结
2014/11/26 职场文书
实习感想范文
2015/08/10 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js