How to use an image as a submit button
Posted on September 24, 2008, under HTML & CSS, 
Bookmark it
Greetings,
The classical submit buttons aren’t always the best choice for a form’s design. The need customized or replaced with images. In this short tutorial you will see how a submit button can be replaced with an image.
A standard submit button HTML Code will look something like this:
<input type="submit" name="submit" value="Submit">
Here’s a code that uses an image as a submit button:
<input type="image" src="http://www.yoursite.com/images/myimage.gif">
As you can see, the SRC attribute has been added containing the URL address of the image and the TYPE’s value was changed to ‘image’.
Good luck!
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- September 24, 2008
- article by Gabriel C.
- 3 comments
Related Posts
-
Submit your Website to the Most Popular CSS galleries: MeeCSSat July 26, 2009
-
Validating an image uploadat September 8, 2008 with 4 comments
-
Encrypt the POST-GET Data when you Submit a Form: jCryptionat August 9, 2009
-
AJAX Form with CAPTCHA, Realtime Validation and PHP BackendPublished on 09.02.08, 537 replies.
-
Dynamic Dependant DropDown List: US States & CountiesPublished on 11.06.08, 83 replies.
-
An AJAX (jQuery) Username Availability Checker with PHP Back-endPublished on 12.05.08, 61 replies.
-
How to Implement a jQuery AJAX Login Form into a Modal BoxPublished on 04.24.09, 85 replies.
-
How to Add Multi-language Support to a PHP WebsitePublished on 07.23.09, 83 replies.
-
10 Mistakes Info-Marketers Need To Know And Avoid In Order To Succeedby Gabriel C. on February 3, 2012
-
In-Depth Instant CSS Documentation Search: InstaCSS
by Gabriel C. on December 2, 2011
-
Factors to Consider When Choosing a Font
by Gabriel C. on November 15, 2011
-
Bootstrap: Kick-start Development of Webapps and Sites
by Gabriel C. on November 8, 2011
This is a great application. But Gabriel you prommised me a database "updated version" laston February 5th, 2012 by Llewellyn
Also will not work in this example: www.google.com/?secondwebsite.com/site.phpon January 7th, 2012 by dewdwtf2
For people who seem to be receiving auto responder emails twice, the issue can beon December 30th, 2011 by Donina
That include_once 'languages/'.$lang_file; always generates a break line on top of HTML. How can i preventon December 8th, 2011 by M4x1m0v3r
- AJAX (20)
- Design (16)
- Flash (19)
- Freebies (10)
- General (17)
- Graphics (22)
- HTML & CSS (33)
- Frameworks (8)
- JavaScript (142)
- Frameworks (5)
- jQuery (74)
- MooTools (13)
- Photoshop (3)
- PHP (103)
- Reviews (5)
- Statistics (2)
- Web Tools (8)
- Wordpress (16)
- February 2012
- December 2011
- November 2011
- October 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- May 2008
Tag Cloud
- ajax form builder
- ajax login
- alphabetical
- array
- auto grow
- base
- calculate
- captcha
- chart
- charts
- countdown
- css framework
- delimiters
- documents
- dropdown
- extension
- extract
- filename
- fonts
- form
- gd library
- icon set
- iphone
- lightbox
- modal box
- mod_rewrite
- percent
- Photo Gallery
- picker
- random
- remove
- script.aculo.us
- search
- shopping cart
- skin form elements
- slider
- syntax highlighter
- tableless
- to-do
- validate
- web analytics
- web fetch
- WYSIWYG
- zoom
3 Replies to "How to use an image as a submit button"
July 15, 2009 at 11:03 PM
Thanks Gabriel, its suprisingly simple, i was expecting more.
I must admit the standard look button is very boring looking, its amazing how these little changes here and there can make a real difference overall.
July 15, 2009 at 11:31 PM
@Webhostright, at the time I wrote this post (last year) I was thinking that someone may need this, although it’s very simple.
January 18, 2011 at 12:01 AM
great. . . really great
but how with post or get method?