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

Question

为了将图像用作表单提交按钮，我发现有两种方法，并想知道哪一种是正确/最佳实践。

版本1:

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

版本 2：

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

我个人认为第一个版本更好，因为它具有语义意义和“提交”类型。在第二个版本中，它说输入的类型是“image”，这对我作为人类来说并没有太多意义。

我应该选择哪一个？

- volume one

---

您还可以在图像的onClick事件中使用Javascript来提交表单，使用this.submit()。当您想要使用非标准图像（它不适合按钮）时，这很有帮助。 - Tim

我不建议使用图片，不确定你想要把按钮样式设计成什么样子，但如果你的图片包含一个字形图标，那么可以使用Web字体；或者，如果你的按钮很华丽，可以使用CSS实现一些设计效果。 - Mr. Alien

我认为使用CSS背景图是最好的选择。 - volume one

Answer 1

个人建议将其设置为背景，而不是按钮内部的图像。因此，您会得到以下内容。

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

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

       }
</style>

- Edwin

---

是的，我同意这似乎更好。 - volume one

Answer 2

这只是一种风格问题，没有真正的“更好”的方法，使用让你的代码更加整洁的方式。

我个人的看法是所有表单元素都应该是"<input>"，因为这对我来说更自然。我不喜欢当做同样事情（在这种情况下是表单元素）看起来不同或具有不同的语法，因此我将其声明为我的个人标准。

然而，最烦人的事情是图像或<input type="image">在提交表单时不会传递name=""和value=""，所以如果您在一个表单中有多个被装饰成图像的“按钮”，并且想知道按下哪个按钮，那么使用它就不好了。

在这种情况下，最好的选择是使用<input type="submit">，并使用CSS让它看起来像一个图像。

总之，我的声明是：按照你自己的感觉去做，但要坚持一种“标准”，并始终使用它。这将使您的代码更加严格和易于阅读。

- Steini

Answer 3

我个人使用CSS来为提交按钮应用图片

这样做的原因是: 你不需要在每个地方都写相同的代码，只需调用CSS类即可

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

试试这个:

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

CSS (层叠样式表)

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

- Arijit Mukherjee

---

@Mr.Alien 我已经完成了。 - Arijit Mukherjee

是的，我同意这个版本更好。 - volume one