So, You Want CSS Commands With Forms, Huh?

Name::

Email::

Choose one:      
     
     

Click on this pop-up box to open it up:     

The background colors
even work with
pop-up boxes.
Cool, huh?

But you can still do it in text areas!

Eeeeew! That’s Gross!

     Agreed. It’s quite bright, but it does the trick for this tutorial. Without looking directly into the awful colors, direct your attention up there one more time. There are four new things you can add to your MSIE guestbook forms:

• Background Color
  
• Separate Text Color
  
• Pop-Up Text Boxes onMouseOver
  
• Colored Buttons
  

     Each of these are created using
Style Sheet commands added right into the form element.

     Let’s take each in pecking order, shall we…?

Background Color

     The background color is added to all of the items above through the background style command. Here’s a basic text box with the command added to it:

     The command that does the trick is that STYLE=”background:00BFFF” deal. Simply add that to any of the form elements, except radio buttons and checkboxes, and you get the color denoted by the hex code. For a whole lot hex codes, see the Goodies Color Chart.

     The reason you can’t get color in the radio buttons or checkboxes is quite scientific and kind of difficult to understand — they don’t have backgrounds to color in. So far, so good? Stunning. Let’s move along….

Separate Text Color

     Notice above again that there is text in the boxes. That’s fairly easy to do, as is changing the color of said text. Let’s use the example above, but add some green text. It looks like this:

     See the two new commands? I added them right after the background commands. They look like this: STYLE=”color:00ff00″ VALUE=”This text appears in the box”

     The VALUE= command denotes the text and the STYLE=”color:—-” denotes the color of the text. Use it for any form item that accepts text and you’re good to go. Okay, is that stuck on a brain cell? Going forward….

Pop-Up Text Boxes onMouseOver

     I think this is the coolest thing in this tutorial — but then, I’m a very boring person. If you haven’t already, go back up to the really loud colors and place your pointer on top of just about any of the items and a little text box pops up. It works the same way as the ALT command does with images. See the height and width tutorial for more on that. But now this….

     The little yellow box is created through a TITLE command. Here’s one of the radio buttons from up above:

     That’s not so tough, huh? It’s a simple trade. You add in the TITLE=”—-” deal and the computer gives you the box. Supply and demand.

Colored Buttons

     I have a whole tutorial on this
here. There was a time when my e-mail was full of requests for colored form buttons. There was no such thing at the time, so I created one through
images and onClick JavaScripts. It’s really involved and might not be worth the trouble. This, however, is so super simple I can’t believe it (plus, I’ve already shown you how to do it)! Here’s the code for the SEND button from up above:

     There you go. It’s a simple submit button with many of the commands from above stuck in for good measure. And it didn’t cost you a thing!

That’s That

     Now, please. I made the color scheme above to prove a point. This is not a contest. Do not attempt to create a form with the worst grouping of hues. If you do, I cannot be held responsible. They’re your eyes.