输入按钮与图像

Input Button v. Image

本文关键字:图像 按钮 输入      更新时间:2023-09-26

http://jsfiddle.net/Deron/awnqq/9/

我把它放在一个小提琴中来演示。 这只是使用表单输入并呈现结果的简单添加。 这是让我感到困惑的事情...

接受用户输入的两个选项...

<input type="button" value="Get Price" onclick="javascript:add();"><br />
<input type="image"   src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg" onclick="javascript:add();">
为什么如果我使用 type="button",脚本会运行

并在目标输入中显示结果,但如果改用 type="image"(在小提琴中它是按钮(,脚本会运行,显示答案,然后清除表单?

为什么在一种情况下它停在显示屏上,而在另一种情况下,它继续帮助清除答案?

type=button

提交表单。 type=image确实如此。 这是基于根据规范创建的按钮类型

改用这个来覆盖图像顶部的按钮:http://jsfiddle.net/awnqq/15/

或者,您可以制作一个带有图像的div,并使用一些javascript使其可点击。

<button type="button" style="border: 0; background: transparent" onclick="javascript:add();">
    <img src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg"  alt="submit" />
</button>