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

Question

可以有人帮忙把标准的 submit 按钮换成一个名为 BUTTON1.JPG 的图片吗？

<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> 

- Rolf

---

我只是试图从代码中区分出来，我不知道他们已经这样做了。 - Rolf

Answer 1

使用 image 类型的输入：

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

---

完整的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" alt="Submit" style="width: 50px;" />
  </div>
</form> 

- Devin Burke

---

Justin，最后一个问题，我如何将“userInput”值传递到下一页的表单中，以便可以与下一个表单一起提交。我希望该值是隐藏的。 - Rolf

这是一个非常棘手的问题，因为我不知道你使用的编程语言或框架是什么。最好单独发布一个问题，并提供该信息（例如ASP.NET，ASP，PHP等），这样在该领域专业的人可以帮助您更全面地解决问题。但首先，建议您在网站上看看是否已经有类似的问题被问过了。 - Devin Burke

请注意，在某些情况下，这将在表单上与实际的提交类型输入有所不同。 - TheLegendaryCopyCoder

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

如果您希望实际嵌入img或svg元素，则此方法不起作用。 - ICW

这个答案应该更新一下，不仅要讲清楚如何做，还要解释更多的为什么。正如@ArendE所指出的，这是“官方”的做法。 "<input> elements of type image are used to create graphical submit buttons"。 - rinogo

Answer 2

为什么不呢：

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

- volume one

---

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

将图像映射与作为BUTTON元素内容出现的IMG相关联是非法的。 - Erik Thiart

非常感谢，Stack Overflow 需要一个重要的功能，即显示正确答案和顶部评级以开始统计。这个答案真的很有帮助。其他答案无法胜任，为什么要浪费开发时间呢？ - Mr Coder

Answer 3

CSS的使用：

input[type=submit] {

background:url("BUTTON1.jpg");

}

对于HTML：

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

- Muhammad Talha Akbar

---

我应该把它粘贴到哪里？我需要删除什么？（我不是程序员） - Rolf

观察：对于一个充满程序员的网站来说，教非程序员如何在没有雇佣程序员的情况下生存并不符合长期最佳利益。 - Devin Burke

哈哈哈哈 :P 我也想发布你发布的那个答案，但我认为告诉新程序员使用古老的脚本不是一个好主意！我知道，当我开始使用 Stacky 时，我也不是一个好的帮助者，但现在我变得更好了 :D - Muhammad Talha Akbar

Answer 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>

- user6766561

Answer 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>

- yajakass

Answer 6

如果你需要在Bootstrap中创建一个图标形式的按钮，请按照以下步骤操作：

<button type="submit" style="background-color:unset;border:none;">
    <i class="bi bi-person"></i>
    <p style="margin-top:-0.9em;">Logout</p>
</button>

- God Father

Answer 7

HTML：

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

CSS：

.button {  }

- Shaddy