Feb
09
2010
Image as the submit button in a (X)HTML form
Most times it’s okay to use the default button in a html form. But if you use a elaborate website design it can be good for your style to use a well desiged image as the submit button.
I know it’s very easy to modify a html form code to work with an image, but some people ask me how the code should look like.
Default simple XHTML form code:
-
<form id="yourform" action="search.php" method="post">
-
<input type="text" name="query" id="query" value="" />
-
<input type="hidden" name="hidden_name" id="hidden_name" value="your_value" />
-
<input type="submit" name="submit" id="submit" value="Search" />
-
</form>
Simple XHTML form code, where the submit button is replaced with an image:
-
<form id="yourform" action="search.php" method="post" />
-
<input type="text" name="query" id="query" value="" />
-
<input type="hidden" name="hidden_name" id="hidden_name" value="your_value" />
-
<input type="image" name="submit" id="submit" src="images/image.gif" value="Search" alt="Search" />
-
</form>
As the HTML tags without closing the input tags (“>”) are not the newest standard, I used the XHTML closing tags (” />”).
In all further HTML tutorials I also will use the XHTML tags, without further notice.
Oh I have an idea for my next tutorial. I will describe the difference of some tags between HTML and XHTML.
Thanks a lot for the nice info. Just searched for a way on how to place an image in a html form.
Fascinating piece. Good work! 5 stars.
nice great website yea nice job our review website will soon be adding reviews on blogs and add them to our blogs as the top best 50 websites to visit we also do reviews on Consumer Reports reviews all types of reviews
My name is Piter Jankovich. oOnly want to tell, that your blog is really cool
And want to ask you: is this blog your hobby?
P.S. Sorry for my bad english
Thank you Piter, nice to meet you. Yes, I’m a professional PHP and Web Developer and this blog is my hobby.
Hey, I am checking this site from my iPhone and it looks kinda funky. Thought you’d want to know. It’s a great post though, didn’t mess that up
hi there fine little blog ya have here
I operate the very same design template on my own blog yet for whichever reason it seems to reload more rapid on this web site although your own is carrying a lot more content material. Are you making use of some plugins or widgets that will speed it up? Do you think you might be able to write about the widgets so that I might use them on my personal site so twilight new moon supporters could watch twilight breaking dawn online trailers and films swifter I’d be pleased – thanks ahead of time 
Very good site to learn from. Thanks for sharing.
Understand the differing types of hosts: shared, collocated, unmanaged dedicated, and managed dedicated. Is your site brand new with little traffic? In the event your site is a newer domain, you won’t need the raw power of a dedicated server unless your site is resource intensive which can include: streaming, video’s, proxies and even linking to videos as well can cause a high load on Apache and the CPU(s).
I must say that it’s a very interesting article. I get a lot of knowledge from here. Beside that, your blog is so popular among the searchers from search engines. It means yours is great!
I’ve really enjoyed reading your articles. You obviously know what you are talking about! Your site is so easy to navigate too, I’ve bookmarked it in my favourites. . . . .
this page was exactly what i’ve been searching for! found this blog bookmarked by a friend of mine. I will also share it. Thanks again!
Thanks for your sharing, it’s very useful
Wow lots of good information here, bookmarked!
Thanks for your helpful posts, will add your RSS feed now!
Nice Post. I like your blog.
Great post, thanks! Maybe you could do a follow up article about this?
Hey, Good evening it´s just i totally dig your great blog, i woudl be very glad if you would want me to publish a honest review on your awesome blog on my would you grant me permission?
Say, you got a nice article post.Really looking forward to read more. Keep writing.
Thanks for the interesting post! May I ask where you get your sources from?
Being a complete newbie, all I can say is thanks for sharing this.
Web Development has always been a passion of mine. I’m always trying to learn more and get better. Thanks.
We are currently working on programme for the purpose of my computer course, we are starting to be trained some html coding together with fundamental web site design. I have to build a blog, had been considering using wordpress as the system it appears to be to be typically the most popular. Your blog appears to having a custom theme plus some added coding did you do it yourself or maybe retain the services of a programmer? Is extremely good over-all page layout appears to be incredibly easy to use! Nevertheless I might use your own website as a reference, of course not duplicate it as this is certainly against our course guidelines as well as the law I do believe!
just posted this article on facebook. it is a very interesting read for everyone.
I agree with you and it also definitely likely to help lots of people.