Button Image as Form Input Submit Button

button image as form input submit button?

You could use an image submit button:

<input type="image" src="images/login.jpg" alt="Submit Form" />

How do I use an image as a submit button?

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 class="style7">    <input type='text' id='userInput' name='userInput' value=''>    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />  </div></form> 

How can I make my input type=submit / an image?

input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

Submit Button Image

Edited:

I think you are trying to do as done in this DEMO

There are three states of a button: normal, hover and active

You need to use CSS Image Sprites for the button states.

See The Mystery of CSS Sprites

/*CSS*/
.imgClass { background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);background-position:  0px 0px;background-repeat: no-repeat;width: 186px;height: 53px;border: 0px;background-color: none;cursor: pointer;outline: 0;}.imgClass:hover{   background-position:  0px -52px;}
.imgClass:active{  background-position:  0px -104px;}

<!-- HTML --><input type="submit" value="" class="imgClass" />

Image Submit Button within a Form

you can add a hidden field

<input type="hidden" name="action" value="Submit Form">

and in php you can do this

if($_POST['action'] == "Submit Form"){
 do something 
}

hope this help.

set image as submit button

Change type from input to image and add value as submit:

<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">

Adding an image to submit button using CSS

The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

Using an image as a submit button

You can use appropriate CSS properties such as

border: none;
background: transparent;
cursor: pointer;

to remove the default styles from your input type="submit" button.

---

Related Topics