form styles

You might be wondering how you can change the appearance of your forms. White boxes and grey buttons are not the most colourful of combinations, and may not fit the overall style of your site. And what about the fonts?

There is no specific advice that I've been able to find about form styles, so what you've got here is the result of my own experimentation. In other words it's what's known in the trade as a "botch job". Still, that's part of the fun of web design... The exception is the styling of related text and labelling tags. With <legend> and <label>, you can use normal text styling (on this site I have made these simply share the style of the <p> tag, which is probably the best solution). With <fieldset>, you might apply box-related properties to adjust the appearance and size of the border that this tag draws. The default <fieldset> border can sometimes be quite invasive, other times invisible; so if you use this tag it's worth changing it to something that is in keeping with the rest of your site.

Beyond those, however, I haven't found any style sheet properties that are specifically designed for use with form buttons or boxes. But what you can do - at least on some browsers, IE included - is define a general style sheet class; that is, one that is not linked to a particular tag, like this (note the lack of a tag name before the full stop):

.form1 { background-color: #90ee90;
         color: #006600;
         font-weight: bold;
         font-family: Garamond, Times New Roman, serif; }

... then apply that to form elements (<input> tags) via the CLASS attribute, for example:

<input type="text" name="yourname" size="20" class="form1" />
<input type="submit" value="Send details" class="form1" />

Et voilà (try typing in your name to see how it works there too):

Not bad, I guess, although I deliberately left the messy radio boxes there to show you where it doesn't work. That's about the best I can offer you at the moment I'm afraid!

Back to the top

Back to the menu for lesson 9