HTML Submit Form with Your Own Images

I know this is very simple and easy to make a HTML Submit Form. However I noticed that this question has always been asking in many discussion forums that “I don’t want to use the default submit button. How can I use my own image for the submit button?”.

Let’s take a very simple HTML Form as an example. Here’s the HTML codes of a form:

<form action=”">
Name: <input type=”text” name=”fname” ><br /><br />
<input type=”submit” value=”Submit Form”>
</form>

As we know the form will use the default Submit Button, as shown below:

Now, let’s see how to use our own image for the button. Here’s the HTML codes:

<form action=”">
Name: <input type=”text” name=”fname” ><br /><br />
<input type=”image” src=”button_view_tutorials.gif” />
</form>

What’s the difference? The answer is:

 <input type=”image” src=”button_view_tutorials.gif” />

The form now will looks like:

Now instead of using the default ugly Submit button, we are now using our own image.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>