如何制作一个带有文本+图像的提交按钮?

I would like to have a submit button which contains text and an 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

…但是我还没有找到一种方法来制作我的表格。有办法用an来做吗

<input type="submit" ...>

element? Or am I forced to go the image or text way? Thanks for your help!

元素?还是我*用图像或文本的方式?谢谢你的帮助!

10 个解决方案

#1

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.

输入类型="submit"是表单中提交按钮的最佳方式。这样做的缺点是除了文本之外，您不能将其他任何内容作为其值。按钮元素可以包含其他HTML元素和内容。

Try putting type="submit" instead of type="button" in your button element (source).

尝试将type="submit"替换为button元素(source)中的type="button"。

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表单中使用按钮元素，不同的浏览器将提交不同的值。Internet Explorer将提交标签之间的文本，而其他浏览器将提交value属性的内容。使用input元素在HTML表单中创建按钮。

#2

Let's say your image is a 16x16 .png icon called icon.png Use the power of CSS!

假设你的图像是16x16 .png图标。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>

This will put the image to the left of the text.

这将把图像放在文本的左边。

#3

In case dingbats/icon fonts are an option, you can use them instead of images.

如果选择顶球字体/图标字体，你可以用它们代替图片。

The following uses a combination of

下面使用一个组合。

an icon font (e.g. Font Awesome),
一个图标字体(例如，字体很棒)，
character encodings in HTML (e.g. &#xf090)
HTML中的字符编码(例如)
the Unicode code point of the icon you want to use (e.g. &#xf090 for the sign in logo),
您想要使用的图标的Unicode代码点(例如，标志中的符号)，
CSS:
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="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

In CSS:

在CSS中:

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

jsFiddle

jsFiddle

Notice the font-family specification: all characters/code points will use georgia, falling back to FontAwesome for any code points georgia doesn't provide characters for. georgia doesn't provide any characters in the private use range, exactly where FontAwesome has placed its icons.

请注意字体族规范:所有字符/代码点都将使用georgia，对于georgia不提供字符的任何代码点，都可以使用FontAwesome。georgia没有提供任何在私有使用范围内的字符，正是FontAwesome放置它的图标的地方。

#4

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

或者，您可以删除type-attribute

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

#5

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.

或者直接指向页面的链接。

#6

<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.

我希望这能有所帮助。

#7

Please refer to this link. You can have any button you want just use javascript to submit the form

请参考此链接。您可以使用javascript提交表单的任何按钮

http://www.w3schools.com/jsref/met_form_submit.asp

#8

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.

也许这对你我都有帮助。

:-)

#9

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

#10

Here is an other example:

这里还有一个例子:

<button type="submit" name="submit" style="border: none; background-color: white">

#1