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

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

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

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

一、图片按钮的制作方法

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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年9月28日 下午2:48
下一篇 2018年9月30日 上午9:16

99%的人还看了以下文章

  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    3.6K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    5.8K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.7K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    9120
  • 12款纯CSS3实现的优秀导航菜单(含源码下载)

    选12款纯CSS3实现的优秀面包屑导航,只提供在线演示的面包屑导航,你可以点击在线演示,在打开的Demo页面中,右键另存为网页,即可得到源码。

    2022年5月10日 网页制作
    4.0K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    2.5K0

发表回复

登录后才能评论