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

Question

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

39

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

我可以通过以下代码获得精确的外观:

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

...但是我还没有找到一种方法来为我的表单添加一个类似的东西。有没有一种方法可以做到这一点？

<input type="submit" ...>

我需要用元素表示这个内容吗？还是只能使用图片或文本的方式呢？

- David

https://dev59.com/7Wox5IYBdhLWcg3wLhai#12435570 - Armel Larcier

10个回答

30

input type="submit" 是在表单中添加提交按钮的最佳方式。但它的缺点是，你不能在其值中除了文本以外加入其他内容。而 button 元素可以包含其他 HTML 元素和内容。

尝试将 button 元素中的 type="button" 改为 type="submit" (来源)。

然而，请特别注意该页面中以下内容：

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

- adrianbanks

11

如果可以使用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字体，如果georgia字体没有提供私用区范围中的字符，将会回退到FontAwesome字体。正好是FontAwesome放置其图标的位置。

- Abdull

10

你自己已经离答案非常近了

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

或者，您可以直接删除type属性

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

- elzapp

5

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

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

或者将其直接指向一个页面链接。

- LucaSpeedStack

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

您可以更改输入框的样式元素，以获得所需的按钮。

希望这对您有所帮助。

- Abdallah Barghouti

1

Here is an other example:

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

- Abdi

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>

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

:-)

- MoJo

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和一些文本）时，您将替换它们放在相同的位置（JavaScript和HTML代码）。

JavaScript代码：

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

- Supermath101

0

使用SVG：

input#image-button {
  background: url( "data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E" ) no-repeat  5px /* image padding */;
padding-left: 16px; /* select the indentation to the text */
}

图片位置调整

SVG编码器

- Igor Lebedev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Bard · Accepted Answer

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

这将把图像放置在文本左侧。