HTML：如何使在它的文字+图像提交按钮？(HTML: How to make a submit b

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

我能得到确切的外观我想代码，看起来像：

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

......但我还没有找到一个办法让那些对我的形式之一。 有没有办法做到这一点与

<input type="submit" ...> 

元件？ 还是我被迫去的图像或文字的方式？ 谢谢你的帮助！

Answer 1:

input type="submit"是具有的形式的提交按钮的最佳方式。 这种方法的缺点是，你不能把比文本作为其价值的其他东西。 按钮元件可以包含其他HTML元素和内容。

尝试把type="submit" ，而不是type="button"在您的button元素（ 源 ）。

但是要特别注意从该页面的以下内容：

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

Answer 2:

比方说，你的形象是一个16×16的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 3:

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

下面使用的组合

• 一个图标的字体（例如，字体真棒） ，
• 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>

或者，你可以删除该类型属性

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

或者只是把它引导到一个页面的链接。

Answer 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;" /> url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />

只要你想获得您需要的按钮改变输入风格的元素。

我希望这是有益的。

Answer 7:

请参阅此链接。 你可以有你只想使用JavaScript来提交表单的任何按钮

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

Answer 8:

很有意思。 我已经能够让我的形式来工作，但所得的电子邮件显示：

imageField_x：80 imageField_y：17

在我得到的电子邮件的底部。

这里是我的按钮代码。

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

也许这将帮助你和我，以及。

:-)

Answer 9:

你可以这样做：

HTML代码：

    <form action="submit.php" method="get" id="form">        
    <a href="javascript: submitForm()">        
    <img src="save.gif" alt="Save icon"/>        
    <br/>        
    save        
    </a>        
    </form>        

注意：您可以使用和措施，您的选择和Id和HREF =启动任何文本的方法“的javascript：和结束于（）”，但要确保当我输入相同的东西，如ID和你在键入一些文字你更换同一个地方（Java脚本和HTML代码）。

Java脚本代码：

    var form=document.getElementById("form");        
    function submitForm()        
    {        
    form.submit();       
    }         

Answer 10:

下面是一个其他例子：

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

文章来源: HTML: How to make a submit button with text + image in it?