Question

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

版本1：

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

第2版：

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

我个人觉得第一个版本更好，因为它具有语义意义，并且有一种＆＃34;提交＆＃34;。在第二个版本中，它说输入的类型为＆＃34;图像＆＃34;这对我来说并不重要。

我应该选择哪一个？

Answer 1

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

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

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

       }
</style>

Answer 2

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

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

而不是您提到的2个以上版本。

试试这个：

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

Answer 3

这只是风格问题，没有真正的“更好”的方式，使用你觉得你的代码更干净的方式。

我个人认为所有表单元素都应该是“＆lt; input＆gt;”因为这对我来说更自然。我不喜欢它，当做同样的事情（在这种情况下是形式元素）看起来不同有不同的语法，所以我声明这是我个人的标准。

然而，最烦人的是图像，或＆lt; input type =“image”＆gt;在提交表单时不会传输name =“”和value =“”，这就是为什么使用时你有多个“按钮”装饰成表单中的图像而你想知道哪一个被按下了。

在这种情况下，最好的意见是使＆lt; input type =“submit”＆gt;并使用CSS看起来像一个图像。

然而，我对这个问题的陈述是：以你最好的方式做，但保持这种方式，不要转换。决定一个“标准”并始终使用它。将使您的代码更严格，更容易阅读。

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

3 个答案: