Html 提交按钮的图像-哪种方式最好？

为了使用图像作为表单的提交按钮，我遇到了两种方法，希望知道哪种方法是正确的/最佳实践

第1版：

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

第2版：

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

我个人认为第一个版本更好，因为它具有语义意义，并且有一种“提交”类型。在第二个版本中，它说输入是“图像”类型的，这对我这个人类来说意义不大

---

我应该选择哪一个？

我个人会将其设置为背景，而不是按钮内的图像。所以你会得到以下结果

<button type="submit" class="styledButton></button>

<style>
       .styledButton {
           background: url('mybutton.jpg') no-repeat;

       }
</style>

---

我个人使用CSS应用图像提交按钮

这背后的原因是：您不需要在任何地方都编写相同的代码，只需调用
css类
就足够了

而不是您提到的上述两个版本

试试这个：

<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>

这只是风格的问题，实际上没有“更好”的方法，使用您觉得代码更干净的方式

我个人的观点是，所有的形式元素都应该是“”，因为这对我来说更自然。我不喜欢做同样的事情（在本例中是表单元素）与使用不同的语法看起来不一样，所以我以我个人的标准声明了这一点

然而，最令人恼火的是，在提交表单时，图像或不会传输name=”“和value=“”，这就是为什么在表单中有多个装饰为图像的“按钮”并且您想知道按下了哪个按钮时，使用这些按钮是不好的

在这种情况下，最好的意见是使用CSS制作一个图像，让它看起来像一个图像

然而，我对这个问题的看法是：以你感觉最好的方式去做，但保持这种方式，不要改变。确定一个“标准”，并始终使用它。将使您的代码更严格、更易于阅读。
您还可以在image onClick事件上使用Javascript提交带有此.submit（）的表单。当您想要使用非标准图像（它无法整齐地装入按钮）时，这会有所帮助。我不喜欢使用图像，也不确定您尝试将按钮设置为什么样式，但如果您的图像包含字形，则可以使用web字体，或者如果您的按钮很花哨，您可以使用CSSI实现一些设计。您认为使用CSS的背景图像是实现这些设计的最佳方式go@Mr.Alien我已经做了。是的，我同意这个版本更好。是的，我同意这个看起来更好
div#submitForm input {
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}