HTML:如何制作一个包含文本+图像的提交按钮?
题
我想要一个包含文本的提交按钮 和 一个图像。这可能吗?
我可以通过如下代码获得我想要的确切外观:
<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
...但我还没有找到一种方法来为我的表单提供其中一个。有没有办法做到这一点
<input type="submit" ...>
元素?或者我被迫去 图片或文字 方式?感谢您的帮助!
解决方案
input type="submit"
是表单中提交按钮的最佳方式。这样做的缺点是你不能把除text之外的任何东西作为它的值。 button元素可以包含其他HTML元素和内容。
尝试将type="submit"
而非type="button"
放在button
元素中(来源一>)。
请特别注意该页面的以下内容:
如果您在HTML表单中使用button元素,则不同的浏览器将提交不同的值。 Internet Explorer将在
<button>
和</button>
标记之间提交文本,而其他浏览器将提交value属性的内容。使用input元素以HTML格式创建按钮。
其他提示
假设您的图片是一个名为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>
这会将图像放在文本的左侧。
以防万一 dingbats/图标字体 是一个选项,您可以使用它们代替图像。
下面使用组合
在 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=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
在CSS中:
.stylish {
font-family: georgia, FontAwesome;
}
注意 font-family
规格:所有字符/代码点将使用 georgia
, ,回落到 FontAwesome
对于任何代码点 georgia
不提供字符。 georgia
不提供任何字符 私人使用 范围, 到底在哪里 FontAwesome
已放置其图标.
你自己真的很接近答案
<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>
我找到了一个非常简单的解决方案!如果您有一个表单并且想要一个自定义提交按钮,则可以使用以下代码:
<button type="submit">
<img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>
或者只是将其指向页面的链接。
<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;" />
根据需要更改输入样式元素。
我希望它有所帮助。
请参阅此链接。您可以使用任何按钮只需使用javascript提交表单
非常有趣。 我已经能够让我的表单工作,但生成的电子邮件显示:
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>
也许这对你和我也有帮助。
: - )
你可以这样做:
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();
}
这是另一个例子:
<button type="submit" name="submit" style="border: none; background-color: white">