Cascading Style Sheets (CSS); Colorful Forms

If your web page forms are boring, you can spruce them up.

In this article you’ll learn how to make your forms stand out from the crowd and/or to make one of your form fields stand out from the rest of your form.

The instructions include how to modify:

1. Text input fields.
2. Textarea input boxes.
3. Submit buttons.

Checkboxes and radio buttons can have color assigned to them, too. But the effect is different among different browsers. Netscape 6 puts the assigned color inside the checkbox or radio button, for example, and IE5 puts the color on the outside. Because of the inconsistency, we won’t include those form fields. But feel free to experiment.

(For those browsers that don’t recognize CSS styles within form field tags, such as Netscape 4.#, the form simply appears as a regular form. Opera 6 recognizes font family, size, style, and weight, but not font or background color.)

In this article, you’ll learn how to do the following for each of the form fields listed above:

1. Change the background color.
2. Put an image in the background.
3. Change the text color.,/li>
4. Change the text size.
5. Make the text bold.

We’ll use the seven CSS styles listed below to change the form fields from boring to noticeable. These styles are chosen for the dramatic changes they create rather than for acceptable design values. Once you see how it works, you can specify your own values.

The CSS styles specifying colors can be any color you want, specified as the color name or as a hex number.
Example: black or #000000

The CSS font size can be any size you want. Similar with the font family name.

Here is the list we’ll use in examples:

background: yellow;
background-image: url(image.gif);
color: blue;
font-weight: bold;
font-style: italic;
font-size: 36px;
font-family: serif;

The above can be mixed and matched as you please, except the background color and the background image — when you use one, don’t use the other.

Note: When the area to be covered is larger than the area of the image, the image will tile. If the area is smaller than the area of the image, the image will display beginning with the the top-left corner and be cropped at the edges of the area being covered.

EXAMPLES

If your page background color is yellow, make form field backgrounds yellow, too, instead of the light grey many browsers default to:

<input type=”text”
style=”background: yellow;”
name=”whatever”>
<textarea cols=”22″ rows=”7″
style=”background: yellow;”
name=”whatever”>
</textarea>
<input type=”submit”
style=”background: yellow;”
value=”Click Me”>

Make the submit button really big:

<input type=”submit”
style=”font-size: 36px;”
value=”Click Me”>

And yellow, too:

<input type=”submit”
style=”font-size: 36px; background: yellow;”
value=”Click Me”>

Make it big and bold and blue and serif (instead of the usual default sans-serif type face) and with a yellow background:

<input type=”submit”
style=”font-size: 36px;
color: blue;
font-weight: bold;
font-family: serif;
background: yellow;”
value=”Click Me”>

Make a textarea box with an image of the Earth as seen from space. Let the text people type in be big and bold:

What do you want to yell to the world?<br>
<textarea cols=”22″ rows=”7″
style=”font-size: 36px;
font-weight: bold;
background-image: url(image.gif);”
name=”whatever”>
</textarea>

Make a text field with a yellow background so text typed in is big, blue, and italic:

<input type=”text”
style=”background: yellow;
font-style: italic;
color: blue;
font-size: 36px;”
name=”whatever”>

In all of the above examples, the style attribute was of this format:

style=”______________”

Simply put one or more specific styles in place of the underline. Specific styles are of this format:

name: value;

The list of specific styles in the style attribute can be on multiple lines, so long as the line breaks after the semi-colon. When putting specific styles on multiple lines, ensure that a quotation mark leads the first specific style and a quotation mark follows the last.

With what you learned here, you’ll be able to create an almost infinite variety of appearances for your forms.

AN ALTERNATIVE

Instead of using a style attribute in each form field you want to change, you could put a CSS style for the INPUT and TEXTAREA form fields into the HEAD area of your page. All INPUT and TEXTAREA form fields will then get that style, automatically. (You can override the automatic style for individual form fields by using a style attribute as shown above.)

Here is an example CSS style for the HEAD area of a page. You can replace the background color with a background image, if you want. Or make any other changes you desire.

<STYLE TYPE=”text/css”>
<!–
INPUT, TEXTAREA {
background: yellow;
color: blue;
font-weight: bold;
font-style: italic;
font-size: 36px;
font-family: serif;
}
–>
</STYLE>

Try the above with this form in the BODY area of the page:

<form>
<input type=”text”><br>
<textarea cols=”22″ rows=”5″></textarea><br>
<input type=”submit”>
</form>

It’s quite dramatic 🙂

Will Bontrager

“WillMaster Possibilities” ezine
http://willmaster.com/possibilities/
mailto:possibilities@willmaster.com