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

Question

这个问题在这里已经有了答案:

<button> vs. <input type="button" />. Which to use? (15 个回答)

关闭 8年前。

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

版本 1:

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

版本 2:

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

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

我应该选择哪一个？

Answer 1

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

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

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

       }
</style>