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

或者你也可以包括裏面輸入SYLE：

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