una - enviar formulario html

¿Cómo uso una imagen como botón de envío?

Question

¿Puede alguien ayudar a cambiar esto para incorporar una imagen llamada BUTTON1.JPG lugar del botón de submit estándar?

<form id=''formName'' name=''formName'' onsubmit=''redirect();return false;''>
<div class="style7">
<input type=''text'' id=''userInput'' name=''userInput'' value=''''>
<input type=''submit'' name=''submit'' value=''Submit''>
</div>
</form>

Answer 1

HTML:

<button type="submit" name="submit" class="button">
<img src="images/free.png" />
</button>

CSS:

.button { }

Answer 2

Por qué no:

<button type="submit">
<img src="mybutton.jpg" />
</button>

Answer 3

Simplemente quite el borde y agregue una imagen de fondo en css

Ejemplo:

$("#form").on(''submit'', function() {
alert($("#submit-icon").val());
});

#submit-icon {
background-image: url("https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455__340.jpg"); /* Change url to wanted image */
background-size: cover;
border: none;
width: 32px;
height: 32px;
cursor: pointer;
color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" id="submit-icon" value="test">
</form>

Answer 4

Utilice una entrada de tipo de image :

<input type="image" src="/Button1.jpg" border="0" alt="Submit" />

El HTML completo:

<form id=''formName'' name=''formName'' onsubmit=''redirect();return false;''>
<div class="style7">
<input type=''text'' id=''userInput'' name=''userInput'' value=''''>
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</div>
</form>

Answer 5

Utilizar CSS:

input[type=submit] {
background:url("BUTTON1.jpg");
}

Para HTML:

<input type="submit" value="Login" style="background:url("BUTTON1.jpg");">

Answer 6

<form id=''formName'' name=''formName'' onsubmit=''redirect();return false;''>
<div class="style7">
<input type=''text'' id=''userInput'' name=''userInput'' value=''''>
<img src="BUTTON1.JPG" onclick="document.forms[''formName''].submit();">
</div>
</form>