Things To Do With Forms

When I was a beginning webmaster, it was very frustrating trying to get forms to look good. There were no formatting commands, no way to change colors or fonts on buttons or anything like that.

This is your standard, garden-variety button which you get when you use an <INPUT> tag.

And here is the code that creates the button. 

<input type="submit" value="Click Me">

Pretty boring, isn't it? Also, it's very hard to match this kind of button to a site design. It just doesn't look very good.

Colored Button

You surely can spruce things up by changing the color of the button. This is done very simply by adding a style attribute to the <INPUT> tag.

<input style="background-color: #0000FF; color: #FF0000; 
    font-weight: bold" type="submit" value="Click Me">

Here's how that looks.

Button With Background Image

You can be even more fancy and add a background image to the button. An example of code to do this is shown below.

<input style="background-color: #0000FF; color: #FFFFFF; 
font-weight: bold; background-image: url('../images/smile.gif'); 
font-size: 20pt" type="submit" value="Click Me">

Here's how that looks (pretty cool, eh?)

Colored Text Form Box

The same kind of things can be done with text form boxes, as the example code below shows. 

<input style="background-color: #0000FF; color: #FF0000; 
    font-weight: bold" type="text" value="Click Me">

Here's how that looks:

Add color to options in select

You can color the fields in a select statement all the same if you want, as shown by the code below:

<select name="colordemo" style="background-color: #0000FF; 
color: #FFFFFF">
  <option>This is blue</option>
  <option>This is also blue</option>
  <option>It's blue as well</option>
</select>

This comes out as shown below.

This is blue This is also blue It's blue as well

You can also color each element of the select come out in a different color. Some sample code to do this is below.

<select name="colordemo">
  <option>This is blue</option>
  <option>This is also blue</option>
  <option>It's blue as well</option>
</select>

This results in the following:

This is yellow This is red This is green

<input style="background-color: #0000FF; color: #FF0000; 
    font-weight: bold" type="text" value="Click Me">

Changing the Scrollbar

You can even change the scrollbars in the <TEXTAREA> of the form. Here's some code which does that:

<FORM><TEXTAREA COLS="40" ROWS="3" 
STYLE="scrollbar-base-color:red; scrollbar-arrow-color:blue;">
Some text to fill the box line 1
Some text to fill the box line 2
Some text to fill the box line 3
Some text to fill the box line 4
</TEXTAREA></FORM>

And here's how that looks:

Some text to fill the box line 1 Some text to fill the box line 2 Some text to fill the box line 3 Some text to fill the box line 4

Now that's cool!