如何使用图像作为提交按钮？

Posted 2023-05-08

【中文标题】如何使用图像作为提交按钮？

【英文标题】：How do I use an image as a submit button?

【发布时间】：2012-12-21 09:48:47

【问题描述】：

有人可以帮忙更改它以合并一个名为BUTTON1.JPG 的图像，而不是标准的submit 按钮吗？

<form id='formName' name='formName' onsubmit='redirect();return false;'>
    <div class="style7">
        <input type='text' id='userInput' name='userInput' value=''>
        <input type='submit' name='submit' value='Submit'>
    </div>
</form> 

【问题讨论】：

我只是想与代码区分开来。我不知道他们已经这样做了。

【参考方案1】：

使用image 类型输入：

<input type="image" src="/Button1.jpg" border="0"  />

---

完整的 html：

<form id='formName' name='formName' onsubmit='redirect();return false;'>
  <div class="style7">
    <input type='text' id='userInput' name='userInput' value=''>
    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0"  style="width: 50px;" />
  </div>
</form> 

【讨论】：

贾斯汀，最后一个问题，我如何将“userInput”值带入下一页的表单，以便可以与下一个表单一起提交。我希望隐藏该值。

这是一个非常重要的问题，因为我不知道您正在使用什么编程语言或框架。最好将其作为一个不同的问题发布并提供该信息（例如，ASP.NET、ASP、php 等），以便该领域的专家可以更彻底地为您提供帮助。但首先，我会浏览网站，看看以前是否有人问过这个问题。

请注意，在特定条件下，与提交类型的实际输入相比，这在表单上的行为会有所不同。

最佳答案！制作图像提交按钮的官方方法。另见：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

如果您希望实际嵌入 img 或 svg 元素，这将不起作用。

【参考方案2】：

为什么不：

<button type="submit">
  <img src="mybutton.jpg" />
</button>

【讨论】：

对我来说似乎更好，因为它保留了元素触发的动作的基本类型

将图像映射与显示为 BUTTON 元素内容的 IMG 相关联是非法的。

非常感谢，堆栈溢出需要一项重要功能来显示正确的分析器和充值评级以显示统计信息。这个答案真的很有帮助。其他分析器不能，所以为什么要浪费开发时间。

【参考方案3】：

使用 CSS ：

input[type=submit] 

background:url("BUTTON1.jpg");

对于 HTML：

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">

【讨论】：

我在哪里粘贴？我需要删除什么？ （我不是程序员）

观察：教非程序员如何在不雇佣程序员的情况下生存，这不符合一个充满程序员的网站的长期最佳利益......

hahahahha :P 我也打算发布您发布的答案，但我认为告诉新程序员使用古老的脚本不是一个好主意！我知道，在我开始使用 stacky 之前，我也不是一个好帮手，但现在我变得更好了：D

【参考方案4】：

只需去掉边框，在css中添加背景图片

例子：

$("#form").on('submit', function() 
   alert($("#submit-icon").val());
);

#submit-icon 
  background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */
  background-size: cover;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: transparent;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="submit" id="submit-icon" value="test">
</form>

【参考方案5】：

<form id='formName' name='formName' onsubmit='redirect();return false;'>
        <div class="style7">
    <input type='text' id='userInput' name='userInput' value=''>
    <img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();">
</div>
</form>

【参考方案6】：

HTML：

<button type="submit" name="submit" class="button">
  <img src="images/free.png" />
</button>

CSS：

.button