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