Taking Hold of your Submit Button

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.