HTML：如何制作带有文本+图像的提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1621891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: How to make a submit button with text + image in it?
提问by David
I would like to have a submit button which contains text andan image. Is this possible?
我想要一个包含文本和图像的提交按钮。这可能吗？
I can get the exact look I want with code that looks like:
我可以使用如下所示的代码获得我想要的确切外观：
<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
... but I haven't found a way to have one of those for my forms. Is there a way to do that with an
...但我还没有找到一种方法来为我的表格提供其中一个。有没有办法做到这一点
<input type="submit" ...>
element? Or am I forced to go the image or textway? Thanks for your help!
元素？还是我被迫采用图像或文本方式？谢谢你的帮助！
采纳答案by adrianbanks
input type="submit"is the best way to have a submit button in a form. The downside of this is that you cannot put anything other than text as its value. The button element can contain other HTML elements and content.
input type="submit"是在表单中设置提交按钮的最佳方式。这样做的缺点是您不能将文本以外的任何内容作为其值。button 元素可以包含其他 HTML 元素和内容。
Try putting type="submit"instead of type="button"in your buttonelement (source).
尝试将type="submit"而不是type="button"放入您的button元素（source）。
Pay particular attention however to the following from that page:
但是，请特别注意该页面中的以下内容：
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the
<button>and</button>tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
如果在 HTML 表单中使用 button 元素，不同的浏览器将提交不同的值。Internet Explorer 将提交
<button>和</button>标签之间的文本，而其他浏览器将提交 value 属性的内容。使用 input 元素在 HTML 表单中创建按钮。
回答by Adam Bard
Let's say your image is a 16x16 .png icon called icon.png Use the power of CSS!
假设您的图像是一个名为 icon.png 的 16x16 .png 图标 使用 CSS 的强大功能！
CSS:
CSS：
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML:
HTML：
<input type="submit" id="image-button" value="Text"></input>
This will put the image to the left of the text.
这会将图像放在文本的左侧。
回答by Abdull
In case dingbats/icon fontsare an option, you can use them instead of images.
如果dingbats/icon 字体是一个选项，您可以使用它们代替图像。
The following uses a combination of
以下使用组合
- an icon font (e.g. Font Awesome),
- character encodings in HTML (e.g.
) - the Unicode code point of the icon you want to use (e.g.
󰤏or the sign inlogo), - CSS:
In HTML:
在 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=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
In CSS:
在 CSS 中：
.stylish {
font-family: georgia, FontAwesome;
}
Notice the font-familyspecification: all characters/code points will use georgia, falling back to FontAwesomefor any code points georgiadoesn't provide characters for. georgiadoesn't provide any characters in the private userange, exactly where FontAwesomehas placed its icons.
请注意font-family规范：所有字符/代码点都将使用georgia，回退到FontAwesome任何代码点georgia不提供字符。georgia不提供私人使用范围内的任何字符，确切地FontAwesome放置其图标的位置。
回答by elzapp
You're really close to the answer yourself
你自己真的很接近答案
<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
Or, you can just remove the type-attribute
或者，您可以删除类型属性
<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
回答by LucaSpeedStack
I have found a very easy solution! If you have a form and you want to have a custom submit button you can use some code like this:
我找到了一个非常简单的解决方案！如果你有一个表单并且你想要一个自定义的提交按钮，你可以使用这样的代码：
<button type="submit">
<img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>
Or just direct it to a link of a page.
或者只是将其定向到页面的链接。
回答by Abdallah Barghouti
<input type="button" id="btnTexWrapped" style="background:url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />
<input type="button" id="btnTexWrapped" style="background:url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />
Change input style elements as you want to get the button you need.
根据需要更改输入样式元素以获得所需的按钮。
I hope it was helpful.
我希望它有帮助。
回答by user1363516
Please refer to this link. You can have any button you want just use javascript to submit the form
请参考这个链接。您可以拥有任何您想要的按钮，只需使用 javascript 即可提交表单
回答by user2921779
You can do this:
你可以这样做：
HTML code:
HTML代码：
<form action="submit.php" method="get" id="form">
<a href="javascript: submitForm()">
<img src="save.gif" alt="Save icon"/>
<br/>
save
</a>
</form>
note: you can use and action and method of your choice and Id and any text starting from href="javascript: and ending to ()" but make sure that when I type the same things such as id and some text you type in your replacement in the same places(java script and HTML code).
注意：您可以使用您选择的动作和方法以及 Id 和任何从 href="javascript: 开始并以 ()" 结尾的文本，但请确保当我输入相同的内容时，例如 id 和您输入的某些文本在相同的地方替换（java 脚本和 HTML 代码）。
java script code:
java脚本代码：
var form=document.getElementById("form");
function submitForm()
{
form.submit();
}
回答by MoJo
Very interesting. I have been able to get my form to work but the resulting email displays:
很有意思。我已经能够让我的表单工作，但生成的电子邮件显示：
imageField_x: 80 imageField_y: 17
imageField_x: 80 imageField_y: 17
at the bottom of the email that I get.
在我收到的电子邮件的底部。
Here's my code for the buttons.
这是我的按钮代码。
<tr>
<td><input type="image" src="images/sendmessage.gif" / ></td>
<td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td>
</tr>
Maybe this will help you and me as well.
也许这对你我也有帮助。
:-)
:-)
回答by Abdi
Here is an other example:
这是另一个例子：
<button type="submit" name="submit" style="border: none; background-color: white">
