首页 > 开发 > 综合 > 正文

美化网页表单的提交和重置按钮

2020-09-19 11:06:53

字体：大中小

来源：转载

供稿：网友

为了整个界面美观，我们需要对提交和重置按钮美化一番，可是无论用什么css样式定义按钮，都很难达到满意的效果，只得用js+图片的方式进行处理，下边我是总结出的几种方法：

　　1、用图片代替提交和重置按钮，给图片加onclick事件。

<script language="javascript">
function fsubmit(obj){
　obj.submit();
}
function freset(obj){
　obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名： <input type="text" name="textfield" />
<img src="uploads/200707/30_145425_001.jpg" onclick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg" onclick="javascript:freset(document.form1);">
</form>

　　2、给1的图片加上style，用于弥补方法1鼠标移到图片上无反应，未能给客户好的浏览体验。

<script language="javascript">
function fsubmit(obj){
　obj.submit();
}
function freset(obj){
　obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名： <input type="text" name="textfield" />
<img src="uploads/200707/30_145425_001.jpg" style="cursor:hand;" onclick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg" style="cursor:hand;" onclick="javascript:freset(document.form1);">
</form>

　　3、用图片代替提交和重置按钮，并加上链接，效果同2。

<script language="javascript">
function fsubmit(obj){
　obj.submit();
}
function freset(obj){
　obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名： <input type="text" name="textfield" />
<a href="javascript:fsubmit(document.form1);"><img src="uploads/200707/30_145425_001.jpg" border="0" /></a>
<a href="javascript:freset(document.form1);"><img src="uploads/200707/30_145428_002.jpg" border="0" /></a>
</form>

　　4、使用图像域。由于默认图像域点击时都是提交表单，因而要进行适当的处理：

<script language="javascript">
function fsubmit(obj){
　obj.submit();
}
function freset(obj){
　obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名： <input type="text" name="textfield" />
<input type="image" name="imagefield" onclick="javascript:fsubmit(document.form1);return false;" src="uploads/200707/30_145425_001.jpg">
<input type="image" name="imagefield2" onclick="javascript:freset(document.form1);return false;" src="uploads/200707/30_145428_002.jpg">
</form>

要注意的是js中表单提交和重置事件后必须加()，如submit()和reset()。

上一篇：仿Apple滑动条产品展示效果

下一篇：网页投票系统中的限制

学习交流

windows wamp中配置安装xhprof步骤

windows wamp中配置安装xhprof步骤...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

谷歌为Chromebook应用商店推出优质游戏推荐新版块

2020-09-18 13:06:14

英伟达20GB显存的RTX3080即将发布

2020-09-18 13:04:04

索尼PS5价格公布：399美元起，11月12日开售

2020-09-17 13:37:27

阿里发布首款机器人“小蛮驴” 进军机器人赛道

2020-09-17 13:34:05

消息称快手寻求在香港进行IPO 估值500亿美元

2020-09-17 13:26:10

史玉柱：因游戏作弊陈天桥封了我《传奇》账号一气之下做了《

2020-09-16 13:09:34

疑难解答

图片精选

网友关注