Coming up with a good method for marking up forms can be one of the more difficult things as a designer/developer. They have a tendency of looking awkward and ugly and can be the low point of any project you’re working on. There have been countless articles written and techniques developed with the new and improved way of marking up forms, some beneficial — and some way out in left field.
The Submit Button Says a Lot
As I was working on a project last week, I came across the need for using an image to represent the submit button of a particular form. It was one of the circumstances in which a custom font was used in the button design and therefore the value of the markup wouldn’t be visible to someone browsing with images enabled.
At first I marked up the submit button as the following:
<input type="submit" id="btn_submit" name="submit" value="Submit" />I then included the buttons image as the background using CSS and checked it out in a browser. For one reason or another it didn’t occur to me at the time that the contents of the value attribute would be completely visible and overlay the designed background image (which already included the phrase “Submit”). It was at that point I was curious as to how many designers/developers would simply remove the contents of the value attribute and go on their way. While it isn’t technically invalid to leave out the value to a submit button (according to The Validator), it isn’t accessible and shouldn’t feel right.
Happening Across a Great Solution
That same day I happened across a great article on Digital Web having to do exactly with this situation. Push My button is an excellent in-depth look at using the almost forgotten button tag to include form buttons that are exponentially more flexible than, say, input type="submit".
Don’t Underrate HTML, it’s Got you Covered
I had used the button tag many times over in the past, but for one reason or another it seemed to fade into the background. This is one of the tags that can be paired with 5 HTML Elements you Probably Never Use. I think that HTML is sometimes underrated by many in it’s power to markup documents. It definitely has some semantic shortcomings, but for the most part, HTML can tackle just about anything you throw at it.
Why button is Better
Essentially it comes down to button type="submit" being more flexible than input type="submit". Using the power of CSS you’re able to control the presentation of your buttons without degrading their semantic value or accessibility level. I strongly suggest you give Push My button a thorough read because it really encompasses all that is good about button.
Comments
I completely agree that the button element is severely underused. I just stumbled upon the very same Push My Button article and walked away scratching my head. Why did I stop using this element? Why? It’s always the little things that stop you in your tracks. The small details which can ultimately make your job a little easier.
You have no idea how well timed this post was. Thank goodness I subscribed to your feed last week. This is the exact situation I found myself in yesterday. Thankyou so much for sharing, my problem is solved!
Just a heads up to everyone reading that Digital Web article: make sure you take a good look at all of the comments on that article. A number of readers have talked about the way IE handles the button element differently than other browsers. While in most situations this won’t be a problem, there are times when you’ll have 2 submit buttons for one form – and this is where IE struggles.
@Derek: You’re absolutely right — when HTML is used to it’s full potential not only is your job quite a bit easier, the end product is much more valuable.
@Sam Rayner: I’m glad I was able to help! Big thanks to Aaron Gustafson for putting together such a great article.
@Jonathan E: Absolutely. I was just about to direct people in that direction but you beat me to the punch — thanks for giving the tip!
Reading things like this reminds me how many gaps I have in my knowledge of forms. Honestly, it seems like one could specialize only in form markup/design and make a good living doing so.
[…] I incorporated a tag I had previously left unused for the submit buttons in forms. I think it was a wise decision as they’ve proven to be much more flexible. […]