把提交按钮换成图片提交的方法

最新推荐文章于 2023-03-22 20:43:52 发布
最新推荐文章于 2023-03-22 20:43:52 发布
阅读量5.4k 收藏 7
点赞数 6
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tarajk05/article/details/43528339
版权

以下是普通按钮html代码：

<input type="submit" value=“提交” />

可以为代码直接添加样式，使提交按钮变为图片:

<input style="background-image:url('背景图片地址')" type="submit" value=“提交” />

tarajk05
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
把图片做成input提交按钮
01-24
<input type="submit" id="submit" align="right" width="80" height="40" url(<%=path %>/img/confirmorder/submitbtn.gif)" />
图片上传在线预览+图片提交
08-14
3. **图片提交**：用户确认无误后，点击提交按钮，前端发送HTTP请求（通常是POST）到后端服务器，将图片数据作为请求体的一部分。为了减少网络传输负担，可以使用Base64编码或者分块上传策略。后端接收到请求后，会...
默认提交按钮改成图片按钮
weixin_33973600的博客
04-12 303
<inputtype="submit"name="BtnLogOn"value="登录"id="BtnLogOn"onclick="Login();"class="inputbutton"/> 这样我们可以进行替换了，对原代码只要修改两处即可，其它的不用动　1、改 type="submit"为 type="image" 　表示为图片按钮　2、补充图片源地址...
怎么把提交按扭改为用图片来代替
weixin_33971130的博客
01-30 315
应用背景： 这段时间在做嵌入式web网站开发的过程中，需要把网页上的数据提交到cgi程序中，但是html不加以美化的提交表单按钮和界面格格不入，于是想到用图片来替换按键，以下是从博客上搜到的解决方法，也经过了本人的验证可行（我用的是第一种方法，比较简单），提交数据的时候还会把点击该图片相对坐标（x，y）的值也相应提交给cgi。原文转自：http://blog.csdn.net/hblxwaz/...
汇总form表单提交替换按钮为图片
Zszen John 的 Blog
07-03 1152
最顽固的是input type="file" 这个按钮, 是无法替换成图片的 替换的办法很多, 试了发现很简单的方法, 将这个按钮设置为隐藏
【图片代替提交按钮】
m0_70684059的博客
03-22 70
图片代替提交按钮
javascript实现点击提交按钮后显示loading的方法
01-19
本文实例讲述了javascript实现点击提交按钮后显示loading的方法。分享给大家供大家参考。具体如下： 这里可以实现点击提交按钮后显示loading，防止用户重复提交 <style> #loading { position:absolute; ...
C#使用jQuery实现无刷新评论提交的方法
09-03
数据返回后，使用`split("|")`方法将其分割成评论数组，再对每个评论进行处理，将其内容插入到表格中。 当用户点击“提交”按钮时，我们需要处理评论的插入和页面的无刷新更新。为此，我们需要创建另一个HTTP处理...
BootStrap 超链接变按钮的实现方法
11-23
Bootstrap提供了一种简便的方法来实现这种转换，通过应用特定的CSS类到`<a>`标签，使其外观和行为更接近于`<button>`元素。下面我们将详细探讨如何实现这个功能，并展示相关的HTML和JavaScript代码示例。 1. **应用...
Javascript 同时提交多个Web表单的方法
12-08
这样，当用户点击提交按钮时，表单会提交到对应的`iframe`中，而不会影响主页面。通过JavaScript，我们可以分别调用每个表单的`submit()`方法来触发提交。这种方法的好处是它支持跨域提交，但缺点是处理返回结果时...
提交按钮设置背景图片，以及鼠标经过换背景图
沫沫酱
08-22 2694
用户名：                           登录密码：                        重复密码：                        服务器：                                 wei
是button按钮实现图片按钮提交
weixin_30553837的博客
08-10 121
　　一般通常我在实现按钮提交事件时，都会使用<input>按钮提交，而当我们在使用图片按钮是使用<input>按钮在写样式或者有时实现enter键盘提交时，有可能会出现不灵的效果，并且也很忙麻烦。然而在使用button按钮来做就要简单了许多。 　　具体做法： 　　先将图片按钮切图出来，保存好，然后使用button按钮，将其类型设成type="submit"提交按钮形式，...
图片按钮提交表单
weixin_33971205的博客
12-27 314
有时候为了达到比较好的视觉效果，有人会使用图片代替按钮来提交或者重置表单数据。 <FORM name=RedForm action=# > 一: <INPUT name=textfield2> <INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0 name=R...
s1html用图片做提交按钮,动手练一练，用 CSS Checkbox Hack 技术制作一个响应式图片幻灯...
weixin_42117267的博客
06-10 253
大家好，今天我们将一起学习下如何从零开始创建一个具有缩略图功能的响应式图片幻灯。这个案例我们无需编写任何 JavaScript 代码，这里主要运用了 CSS checkbox hack 的技术进行实现。这个案例除了运用 CSS checkbox hack 技术之外，还运用了复杂的CSS选择器、以及 flex box 和 Grid 布局的相关特性。一、 首先看看幻灯的效果展示如视频所示，一个功能还算...
input type="submit" 设置背景图片
热门推荐
hc326254970的专栏
02-19 1万+
input[type='checkbox'] 自定义样式（使用自己的按钮图片）
Be myself
09-03 3530
关于 input 按钮自定义样式，碰到过无数次了，有直接使用div标签和img实现的，也有使用 input 然后再替换成自己的图片。 以下，将input替换成自己图片的方法做一个总结，写成一个小栗子，方便参考使用。 html 布局： <div class="shopL"> <label><input type="checkbox" name=...
html怎么定义submit按钮的背景图片
energycore的专栏
03-30 3939
如果有那/，按钮上也有/ 如果没有/，就会变成 该怎么改才会不显示/就能出来 试试如上代码，你的value需要给一个空值：value=''
用图片代替登陆按钮
gwt600的专栏
11-29 2488
在该系统bug时发现了一个input的用法，以前没见过都是用js实现了，现在贴出来，留着长个经验哈哈  一、用input控件，将type设为image即可 二、用JS代码也行三、用JAVASCRIPT代码  http://www.youname.com/bbsxp/Login.asp" method="POST"> 用户名: 密 码: value=进入> value=取消> 
vue3+ant-degin-vue的form表单填写完内容点击提交按钮把刚刚填写的内容添加到接口里并跳回去
最新发布
06-01
好的，针对你的问题，我可以给出一个大概的实现思路： 1. 在页面中引入 ant-design-vue 组件和 axios 库，用于发送请求。 2. 构建一个表单，使用 ant-design-vue 的 Form 组件，并设置相应的数据绑定和校验规则。 3. 在提交按钮的点击事件中，调用 axios 库发送 POST 请求，将表单数据作为请求体发送到接口。 4. 在请求成功的回调函数中，使用 ant-design-vue 的 message 组件提示用户提交成功，并跳转到指定的页面。 下面是一个简单的代码示例，供你参考： ``` <template> <a-form :form="form" @submit="handleSubmit"> <a-form-item label="姓名" :rules="[{ required: true, message: '请输入姓名' }]"> <a-input v-model="form.name" /> </a-form-item> <a-form-item label="邮箱" :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]"> <a-input v-model="form.email" /> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">提交</a-button> </a-form-item> </a-form> </template> <script> import { defineComponent } from 'vue'; import { Form, FormItem, Input, Button, message } from 'ant-design-vue'; import axios from 'axios'; export default defineComponent({ components: { Form, FormItem, Input, Button, }, data() { return { form: { name: '', email: '', }, }; }, methods: { handleSubmit() { axios.post('/api/user', this.form).then(() => { message.success('提交成功'); this.$router.push('/home'); }).catch(() => { message.error('提交失败'); }); }, }, }); </script> ``` 其中，`handleSubmit` 方法中的 `/api/user` 需要替换成你实际的接口地址，`/home` 需要替换成你希望跳转的页面路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值