Forms Presentation
You can keep your forms from slipping into mundanity by substituting the default gray submit button to a colourful graphic of your choosing. You can also use some simple bits of CSS to present your forms better: by adding backgrounds, borders and spacing.
This page was last updated on 2012-08-21
Image Submit Button
| Who are you? | |
|---|---|
| What's your point? | |
You should already know how to construct all the individual parts of a form, and if not, check out the basic forms tutorial. We're just concentrating on the submit button here. The code to get an image in there is
<input type="image" src="media/submit.gif" height="20" width="60" border="0" alt="Submit your info">
It's the same format as the submit button, but with type="submit" changed to type="image". The src, alt, border, height and width attributes are brought through from images proper.
Do make sure that you use all of these attributes to make your forms as usable as possible. The alt tag is particularly important in this instance as if users have images turned off they'll be looking for the submit button and may not know that the image is there in its place.
Styling the Submit
Oftentimes it isn't necessary to use images to get the look you want for your submit buttons. If your aim is primarily to inject a bit of colour into the regular gray buttons, why not try using CSS to do the job? Check out the buttons below — all glossed with some simple CSS code:
They don't need to download to be usable, they work for users with images turned off; and they sink back into the page pleasingly when clicked. They're easily achieved too, I'm just adding style rules right into the tag:
<input type="submit" value="Button" style="background: red; color: orange; font-size: 1.2em">
If you have any experience with stylesheets this should be a doddle: just some backgrounds, text formatting, borders and some spacing rules applied to each one and we've got a troupe of presentable buttons. Try this option before you use an image.
