如何制作带有文字图片的提交按钮？

Question

我想要一个包含文本 和 图像的提交按钮。这可能吗？

我可以使用如下代码获得我想要的确切外观：

 <button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>

…但我还没有找到一种方法来为我的表格提供其中一个。有没有办法用

<input type="submit" ...>

元素？还是我被迫采用 图片或文字 方式？

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

input type="submit" 是在表单中添加提交按钮的最佳方式。这样做的缺点是您不能将文本以外的任何内容作为其值。按钮元素可以包含其他 HTML 元素和内容。

尝试将 type="submit" 而不是 type="button" 放入你的 button 元素（ 来源）。

但是，请特别注意该页面中的以下内容：

如果您在 HTML 表单中使用按钮元素，不同的浏览器将提交不同的值。 Internet Explorer 会提交 <button> 和 </button> 标签之间的文本，而其他浏览器将提交 value 属性的内容。使用 input 元素在 HTML 表单中创建按钮。

原文由 adrianbanks 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

假设您的图像是一个名为 icon.png 的 16x16 .png 图标 使用 CSS 的强大功能！

CSS：

 input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

HTML:

 <input type="submit" id="image-button" value="Text"></input>

这会将图像放在文本的左侧。

原文由 Adam Bard 发布，翻译遵循 CC BY-SA 3.0 许可协议