Question

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

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

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

...但我还没有办法为我的表格提供其中一种。有没有办法用

来做到这一点

<input type="submit" ...>

元素？或者我被迫采用图像或文本的方式？谢谢你的帮助！

Answer 1

假设您的图片是一个名为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>

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

Answer 2

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

尝试在type="submit"元素（source）中添加type="button"而不是button。

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

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

Answer 3

如果dingbats/icon fonts是一个选项，您可以使用它们而不是图像。

以下使用

的组合

在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未在private use range，exactly where FontAwesome has placed its icons中提供任何字符。

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>

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

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;" />

根据需要更改输入样式元素。

我希望它有所帮助。

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

    <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：如何制作包含文字+图片的提交按钮？

10 个答案: