CSS and Forms--tutorial.jcwcn.com

If you haven't already, you may want to read through my tutorial on Cascading Style Sheets and Forms before you attack this one. They'll help a great deal. That said, let's get started. Dig this fancy guestbook:

(Make a point of placing your pointer on any of the objects!)

Name::
Email::

Choose one:

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

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:

<INPUT TYPE="text" SIZE="50" STYLE="background:00BFFF">

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:

<INPUT TYPE="text" SIZE="20" STYLE="background:00BFFF" STYLE="color:00ff00" VALUE="This text appears in the box">

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:

<INPUT TITLE="This text goes in the little yellow box" TYPE="radio" NAME="stuff" VALUE="choice_one">

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:

<INPUT TITLE="Send it off to me" TYPE="button" STYLE="background:ff00ff" VALUE="Okay -- I'm done -- Send it!">

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.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

CSS and Forms