Can someone help to change this to incorporate an image called BUTTON1.JPG instead of the standard submit button?
<form id='formName' name='formName' onsubmit='redirect();return false;'> <div> <input type='text' id='userInput' name='userInput' value=''> <input type='submit' name='submit' value='Submit'> </div> </form> 6 Answers
Use an image type input:
<input type="image" src="/Button1.jpg" border="0" alt="Submit" /> The full HTML:
<form id='formName' name='formName' onsubmit='redirect();return false;'> <div> <input type='text' id='userInput' name='userInput' value=''> <input type="image" name="submit" src="" border="0" alt="Submit" /> </div> </form> Why not:
<button type="submit"> <img src="mybutton.jpg" /> </button> Use CSS :
input[type=submit] { background:url("BUTTON1.jpg"); } For HTML :
<input type="submit" value="Login"BUTTON1.jpg");"> Just remove the border and add a background image in css
Example:
$("#form").on('submit', function() { alert($("#submit-icon").val()); });#submit-icon { background-image: url(""); /* Change url to wanted image */ background-size: cover; border: none; width: 32px; height: 32px; cursor: pointer; color: transparent; }<script src=""></script> <form> <input type="submit" value="test"> </form><form id='formName' name='formName' onsubmit='redirect();return false;'> <div> <input type='text' id='userInput' name='userInput' value=''> <img src="BUTTON1.JPG" onclick="document.forms['formName'].submit();"> </div> </form> HTML:
<button type="submit" name="submit"> <img src="images/free.png" /> </button> CSS:
.button { } 
