Spice Up Your Web Forms with Color and Graphics
By Stephen Bucaro
You've used color and graphics to create a visually exciting Web site. Then you add
a web form with the default font and gray and white colors. You don't have to have
dull Web forms. In this article I show you a few tricks that you can use to spice
up your Web forms.
Spice Up Your Form's Text Boxes
Using inline style to add character to the text on your form is extremely easy.
Almost every html element has style properties that can be applied. Below is a list
of some of the style properties that can be applied to form text boxes.
background: (background color)
color: (foreground or text color)
Style properties are defined using the format property: value;. In this article, I will
not go into great detail about how to use style properties. My purpose is to show you what can be
done and provide you with some example code. For example, the code shown below.
<p style="color: red; font-family: Courier; font-size: 18px; font-style: oblique; font-weight: bold; ">Name:
<input type="text" style="background: yellow; color: blue; font-family: Verdana; font-size: 12px; font-style: italic; font-weight: bold; " value="Blue Text">
Produces the text box shown below.
Examination of the style attributes used in the paragraph tag <p>
and the <input> tag should reveal that style properties are self explanatory
and how to modify them to your requirements should be obvious. That's why I feel providing
you with example code is more helpful than a long winded explanation of cascading style
Spice Up Your Form's Background
In the form shown below, I defined the entire appearance of the form in the style
attribute of the form tag.
The code for this is shown below.
<form style="border-style: double solid; width: 256px; height: 32px; padding: 4px; background: yellow; color: blue; font-family: Verdana; font-size: 12px; font-style: italic; font-weight: bold;">
Name: <input type="text">
You can see that I used many style properties in the forms style attribute. Note the style
properties that I used to give the form a double solid border 256 pixels wide by 32 pixels high.
You don't have to define all those properties in your style attribute, just
the ones you want to control. You don't have to use them in the same order
either, as long as the property: value; pairs stay together.
I placed the form shown below inside a table with a border size of 2,
and gave the table a background image.
Same thing with the form below, except this time the table's border size
is 0 and the background is a 3d image.