如何制作图片按钮，并为图片按钮添加提交表单和重置表单功能

江山如画 • 2018年9月30日上午8:25 • 网页制作 • 阅读 12739

网页中有表单，表单的默认按钮样式不是很好看，很多人为了美观使用图片做按钮。

今天中国网页设计给大家分享在网页制作中怎么制作图片按钮，并为图片按钮添加提交表单和重置表单功能。

一、图片按钮的制作方法

1、<input type=”image” /> 定义图像形式的提交按钮。

<input type="image" src="图片地址" />

2、用CSS把图片设为按钮的背景

<input  type="button"  style=" width:10px; height:10px;  border:0; background:url(图片路径) no-repeat left top" />

3、作用<button>，设置其background样式

<button style="background: url(img.jpg)"></button>

提示：需要把按钮的宽高设的和图片一样。

小知识

<button>标签定义一个按钮。

在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。

<button>控件与<inputtype="button">相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

二、为图片按钮添加提交表单和重置表单功能

实现submit提交表单功能的图片按钮代码：

<input type="image" name="..." src="..." onClick="document.formName.submit()">

实现reset重置功能的图片按钮代码：

<a href="javascript:document.formName.reset();"><img border=0 src="..." style="cursor:pointer;"></a>

此处用图片代替了按钮，用JS实现按钮的reset重置功能。

<img src="reset.gif" alt="Reset" onclick="javascript:document.formName.reset();" style="cursor:pointer;" />

document.formName.reset(); 将名称为formName的表单重置。

style=”cursor:pointer;” 设置图片悬停时，显示手型光标。

按钮是通过type类型来区分的，submit 为提交按钮，reset 为重置按钮，而type=”image”的按钮，默认操作是提交表单。因此，如果想用图片实现重置按钮，就需要设置onclick=”javascript:this.form.reset(); return false;” 。

<input type="image" name="resetbutton" id="resetbutton" src="reset.jpg" onclick="javascript:this.form.reset(); return false;" />

实例：

<form id="form1" name="form1" method="post" action="">
<label for="textfield">用户名</label>
<input type="text" name="username" id="username" />
<input type="image" name="subbutton" id="subbutton" src="submit.jpg" onclick="this.form.submit()" />
<input type="image" name="resetbutton" id="resetbutton" src="reset.jpg" onclick="javascript:this.form.reset(); return false;" />
</form>

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2721.html