html - 在 <input type ="image"> 上方插入文本

Question

下面的代码用于将产品添加到购物车。

我不想在输入中仅使用图像作为购买按钮，而是希望在背景中添加图像或填充物，并在其上方添加 HTML 文本。

<input border="0" src="/images/buy.png" type="image" />

这是完整的代码:

<span class="BuyButton_ProductInfo">
    <table id="BUYSECTION">
        <tbody>
            <tr>
                <td valign="top" align="left">Count<br />
                    <input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
                </td>
                <td>&nbsp;&nbsp;</td>
                <td class="BuyButton_ProductInfo">Buy<br />
                    <input border="0" src="/images/buy.png" type="image" />
                </td>
            </tr>
        </tbody>
    </table>
</span>

Answer 1

您可以在输入元素上方插入文本。我在这项工作中使用了 label 元素。您可以使用 CSS 代码编辑标签元素的位置。

<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>