HTML-форма с 2 кнопками отправки IMAGE

Question

У меня есть html-форма, и я хочу две кнопки. Когда пользователи нажимают кнопку, он будет отправлять значение (например), когда они нажмут на другую кнопку, он представит другое значение (не нравится).

мне удалось добиться того, что с помощью следующего сценария:

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

Проблема заключается в том, что значение I указано (например,/нелюбовь) не представлено больше ... Есть ли способ обойти это? Благодарю.

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