38

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

我可以使用如下代码获得我想要的确切外观：

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

...但我还没有找到一种方法来为我的表格提供其中一个。有没有办法做到这一点

<input type="submit" ...>

元素？还是我被迫采用图像或文字方式？

4

9 回答 9

61

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

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

于 2009-10-25T20:28:31.053 回答
30

input type="submit"是在表单中有提交按钮的最佳方式。这样做的缺点是您不能将文本以外的任何内容作为其值。按钮元素可以包含其他 HTML 元素和内容。

尝试将type="submit"而不是type="button"放入您的button元素（source）。

但是，请特别注意该页面中的以下内容：

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

于 2009-10-25T19:56:12.713 回答
11

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

下面结合使用

在 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放置其图标的位置。

于 2013-07-02T15:39:02.357 回答
10

你自己真的很接近答案

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

或者，您可以删除类型属性

<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
于 2009-10-25T20:49:12.210 回答
5

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

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

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

于 2013-01-02T18:13:36.367 回答
2

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

根据需要更改输入样式元素以获得所需的按钮。

我希望它是有帮助的。

于 2012-10-26T01:45:32.610 回答
1

很有意思。我已经能够让我的表单工作，但生成的电子邮件显示：

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>

也许这对你和我也有帮助。

:-)

于 2009-10-27T18:52:33.090 回答
1

你可以这样做：

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();       
    }
于 2013-11-07T04:11:38.690 回答
1

这是另一个例子：

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

于 2017-08-24T18:54:57.957 回答