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

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

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

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

一、图片按钮的制作方法

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制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    3.1K0
  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 header right             left             footer 代码解释…

    2018年7月29日
    2.9K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.7K0
  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 JS实现开关效果,可单选和组选|www.125jz.com

    2018年7月29日
    2.1K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    2.2K0

发表回复

登录后才能评论