带有 2 个图像提交按钮的 HTML 表单

Question

我有一个 html 表单，我想要 2 个按钮。当用户点击一个按钮时，它会提交一个值（喜欢），当他们点击另一个按钮时，它会提交另一个值（不喜欢）。

我可以通过以下脚本实现这一点：

<input type=”submit” name=”rating” value=”like” />
<input type=”submit” name=”rating” value=”dislike” />

现在我接下来要做的是用漂亮的图像替换 2 个默认提交按钮（灰色框）。我正在尝试：

<input type=”image” name=”rating” value=”like” src=”pic1.png” alt=”submit”   />
<input type=”image” name=”rating” value=”dislike” src=”pic2.png” alt=”submit” />

问题是我指定的值（喜欢/不喜欢）不再提交......有没有办法解决这个问题？谢谢。

Answer 1

使用 CSS

input {
background-image: url('http://www.clker.com/cliparts/3/P/l/W/c/E/orange-rectangle-button-hi.png');
}

<input type="submit" name="rating" value="like" />
<input type="submit" name="rating" value="dislike" />

或者您可以在输入中包含样式：

<input style="background-image: url('http://www.clker.com/cliparts/3/P/l/W/c/E/orange-rectangle-button-hi.png');" type="submit" name="rating" value="like" />
<input style="background-image: url('http://www.clker.com/cliparts/3/P/l/W/c/E/orange-rectangle-button-hi.png');" type="submit" name="rating" value="dislike" />