HTML:如何制作包含文字+图片的提交按钮？

Question

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

我可以通过以下代码获得我想要的精确外观:

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

...但我还没有找到办法让我的表格中的一个.有没有办法做到这一点

<input type="submit" ...> 

元件？或者我被迫采取图像或文字方式？谢谢你的帮助!

Answer 1

假设您的图像是一个16x16 .png图标,名为icon.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>

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

Answer 2

input type="submit"是在表单中提交按钮的最佳方式.这样做的缺点是你不能把除text之外的任何东西作为它的值.button元素可以包含其他HTML元素和内容.

尝试把type="submit",而不是type="button"在你的button元素(源).

但请特别注意该页面的以下内容:

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

Answer 3

如果装饰符号/图标字体是一种选择,你可以改用这些图像.

以下使用组合

• 图标字体(例如Font Awesome),
• HTML中的字符编码(例如&#xf090)
• 要使用的图标的Unicode代码点(例如,&#xf090用于登录徽标),
• CSS:

在HTML中:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<form name="signin" action="#" method="POST">
    <input type="text" name="text-input" placeholder="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

在CSS中:

.stylish {
    font-family: georgia, FontAwesome;
}

的jsfiddle

注意font-family规范:所有字符/代码点都将使用georgia,回退到FontAwesome任何代码点georgia都不提供字符.georgia不提供私人使用范围内的任何字符,确切地说FontAwesome是放置其图标的位置.

Answer 4

你自己真的很接近答案

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

或者,您可以删除type-attribute

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

Answer 5

我找到了一个非常简单的解决方案！如果你有一个表单并且你想要一个自定义的提交按钮，你可以使用这样的代码：

<button type="submit">
    <img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>

或者只是将其定向到页面的链接。