提交按钮的图像 - 哪种方式最好？ [复制]

Posted 2023-02-22

【中文标题】提交按钮的图像 - 哪种方式最好？ [复制]

【英文标题】：Image for a submit button - which way is best? [duplicate]

【发布时间】：2014-11-30 20:36:33

【问题描述】：

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

版本 1：

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

版本 2：

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

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

我应该选择哪一个？

【问题讨论】：

您还可以在图像 onClick 事件上使用 javascript 来使用 this.submit() 提交表单。当您想要使用非标准图片（无法整齐地放入按钮）时，这会有所帮助。

我不喜欢使用图片，不确定您要为按钮设置什么样的样式，但是如果您的图片包含字形，那么您可以使用网络字体，或​​者如果您的按钮很花哨, 你可以使用 CSS 实现一些设计

我认为使用带有 CSS 的背景图片是最好的方法

【参考方案1】：

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

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

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

       
</style>

【讨论】：

是的，我同意这似乎更好

【参考方案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;

【讨论】：

@Mr.Alien 我已经做到了。

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

【参考方案3】：

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

我个人认为所有表单元素都应该是“”，因为这对我来说感觉更自然。我不喜欢做同样事情的事情（在这种情况下是表单元素）看起来与使用不同的语法不同，所以我按照我的个人标准声明了这一点。

然而最烦人的是一个图像，或者 在提交表单时不会传输 name="" 和 value="" ，这就是为什么在你有多个时使用它是不好的“按钮”装饰成表格中的图像，您想知道按下了哪个按钮。

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

但是，我对这个问题的陈述是：按照你感觉最好的方式去做，但要保持这种方式，不要改变方向。决定一个“标准”并始终使用它。将使您的代码更严格，更易于阅读。