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)
font-family:
font-size:
font-style:
font-weight:

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.

<form>
<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">
</form>

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 sheets (CSS).

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">
</form>

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.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed