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

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

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

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

一、图片按钮的制作方法

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%的人还看了以下文章

  • div+css制作上中下,中间两列的全屏自适应布局

    制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。 上中下结构,中间又分为两列的全屏自适应布局HTML代码: <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…

    2018年8月2日
    4.1K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    6.4K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.3K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    3.7K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    1.2K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    5.4K0

发表回复

登录后才能评论