Coding Articles & Tutorials

karinne · June 8 '06, 10:32 AM (#1)

Forms can be boring at times with their default styling, I agree. CSS comes to the rescue once again by spicing it up a bit.

A regular form
So ... lets start with coding our form

HTML Code:

<form action="dothis.php" method="post">

  <p><label for="name">Name:</label><br />
  <input type="text" name="name" id="name" title="Type you name" /></p>

  <p><label for="website">Website:</lable><br />
  <input type="text" name="website" id="website" title="Type in you website" />

  <p><label for="markup">Markup</label><br />
  <select name="markup" id="markup">
    <option value="html">HTML</option>
    <option value="xhtml">XHTML</option>
  </select></p>
	
  <p><label>CSS?</label><br />
  <input type="radio" name="css" value="yes"> Yes<br />
  <input type="radio" name="css" value="no"> No</p>

  <p><label for="description">Describe your site</lable><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

  <input type="submit" value="sumbit" name="submit" />
</form>

Here's what it would look like in your browser (see attachment form-1.jpg)

CSS to the rescue!
If you've been playing around with CSS a bit you'll notice that you can do ALOT of nifty things with backgrounds and changing fonts (all the while using To view the link you have to Register) and colors. Don't think that these changes stops at simple text withing div, span or p To view the link you have to Register. Oh no my friend! You can style input elements with CSS just like anything else. So ... here we go!

input
We'll start by adding a border and a light background to the input elements in our form using CSS

CSS:

HTML Code:

input {
  border: 1px solid #000;
  background-color: #ccc;
}

Nothing is to be changed in the form at all. Since we are using the "input" selector, it will make the changes to "all" input elements on our page.

Here's what this simple change do (see attachement form-2.jpg)

You'll notice that the radio buttons didn't change at all even though they are "input" elements. Radio buttons and checkboxes are the only form elements that cannot be changed with css.

select and textarea
To get the same look with the select and textarea element, we could do this in our css

CSS:

HTML Code:

select {
  border: 1px solid #000;
  background-color: #ccc;
}
textarea {
  border: 1px solid #000;
  background-color: #ccc;
}

but why duplicate code. Let's save a few bytes and put it all in one like this

CSS:

HTML Code:

input, select, textarea {
  border: 1px solid #000;
  background-color: #ccc;
}

Again, no changes need to be made to the html. Now we're getting somewhere. See what the form looks like now (see attachement form-3.jpg)

label
Those labels are kind of boring with the regulat text. Let's bold them up and change the font.

CSS:

HTML Code:

label {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  font-size: 14px;
}

Here's what the labels look like (see attachment form-4.jpg) Ahhh... much better.

That silly looking button
Now ... you may notice that the input button looks like those input boxes. Well... it should because it is an input element but ... it's not very distinguishable is it!? We'll fix that by changing the border, font and background color with CSS by creating a class for our button and applying it to our input.

CSS:

HTML Code:

.submit {
  border: 2px solid #333;
  background-color: #862222;
  font-family: Courier New, Courier New, Courier, monospace;
  color: #fff;
}

Add the submit class to the input element in your html
HTML:

HTML Code:

<input type="submit" value="sumbit" name="submit" class="submit" />

And there we are (see attachement form-5.jpg)! Now that's a better looking form.

We're done

I hope this was helpfull to some. If you have any question about this tutorial feel free to PM me or reply here.

This was intended as a 2 parter so, hopefully I will have time to make part II which wouldl talk about display, fieldsets and customizing that sumbit button with an image created in Photoshop.

Here is the complete HTML sources of the form

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-CA" lang="en-CA">

<head>

  <title>[CSS] Customize your form with CSS - part 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
  <style type="text/css">
  <!--
    input, select, textarea {
      border: 1px solid #000;
      background-color: #ccc;
    }
	
    label {
      font-family: Tahoma, Geneva, sans-serif;
      font-weight: bold;
      font-size: 14px;
    }
    
    .submit {
      border: 2px solid #333;
      background-color: #862222;
      font-family: Courier New, Courier New, Courier, monospace;
      color: #fff;
    }
    -->
  </style>

</head>

<body>

<form action="dothis.php" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" name="name" id="name" title="Type you name" /></p>

  <p><label for="website">Website:</lable><br />
  <input type="text" name="website" id="website" title="Type in you website" />

  <p><label for="markup">Markup</label><br />
  <select name="markup" id="markup">
    <option value="html">HTML</option>
    <option value="xhtml">XHTML</option>
  </select></p>
	
  <p><label>CSS?</label><br />
  <input type="radio" name="css" value="yes"> Yes<br />
  <input type="radio" name="css" value="no"> No</p>

  <p><label for="description">Describe your site</lable><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

  <input type="submit" value="sumbit" name="submit" class="submit" />
</form>

</body>
</html>

**filburt1** · June 8 '06, 10:41 AM (#2)

Please keep the attachments in this thread instead of hosting them on your site.

karinne · June 8 '06, 11:31 AM (#3)

Ok ... no problem. I've taken the disclaimer out. Thanks Filburt

dchesterton · June 9 '06, 02:16 PM (#4)

Although I use a tiny bit of CSS on my forms, I do not think it's a good thing to style them heavily.

I've seen many things with CSS and Javascript which create fancy browser tricks and to be honest I think they put a huge blow in the usability of the site. Users are used to seeing default form's in their browser and OS, and by styling them you are breaking the expected norm of users.

bfsog · June 9 '06, 04:41 PM (#5)

By "breaking" them, are we not defining new normalities for the users of tomorrow?

CSS based forms are more and more on the web.

I agree though, too much of a good thing is a bad thing, but adding some backgrounds to textareas and the like make your form stand out, and forms, by standard, look dull and bland.

**Shadowfiend** · June 13 '06, 09:59 AM (#6)

Great tutorial! A couple of little details were missing or slightly off; for example, Yes/No weren't set as labels for their radio buttons. I find it amazing that about a year ago I didn't even know about the `label' element, but being able to click the label and select the radio button is a huge boon. Something like this:

HTML Code:

<input type="radio" id="yes" name="yesNo" /> <label for="yes">Yes</label><br />
<input type="radio" id="no" name="yesNo" /> <label for="no">No</label>

Which brings me to the second one -- since you named the radio buttons `yes' and `no', they end up selecting separately. A detail, but someone inexperienced could get tripped up by it.

And, finally, though using classes is great, there's also the coolness that is more advanced CSS selectors, such as:

Code:

input[type=submit]
{
     border: 2px solid #333;
     background-color: #862222;
     font-family: "Courier New", "Courier New", Courier, monospace;
     color: #fff;
}

Unfortunately, this doesn't run in anything less than IE7 (thank you so much, Microsoft, for making our lives easier. Really.) Firefox and Safari, however, handle it with aplomb. If nothing else, these are useful to know *about*, even if they can't necessarily be used right now.

Finally, it bears mentioning that radio buttons enjoy behaving strangely with the background-color and border settings when you're in IE. Specifically, the background of the radio button gets styled and it gets a border around it. It's one of those little quirks, but can be worked around by another quick hack where you add the `radio' class to the radio buttons and do this magic:

Code:

input.radio
{
    background: none;
    border: none;
}

Once again, we'd be helped if IE supported input[type=radio], but there we have it.

Again, great tutorial! Sorry if I'm nitpicky, this stuff makes me happy

karinne · June 13 '06, 12:22 PM (#7)

Quote:

Originally Posted by Shadowfiend

Which brings me to the second one -- since you named the radio buttons `yes' and `no', they end up selecting separately. A detail, but someone inexperienced could get tripped up by it.

Yes ... I made a boo-boo in there. I fixed it

HTML Code:

<p><label>CSS?</label><br />
  <input type="radio" name="css" value="yes"> Yes<br />
  <input type="radio" name="css" value="no"> No</p>

Shani · August 20 '06, 10:38 PM (#8)

Nice tutorial, karinne, it could use a bump!

Thanks shadowfiend for the square-bracket stuff, I didn't know that. And I agree that <label>s are great!

I find myself styling forms a lot simply to control the length of textboxes and their alignment. For example a two-column form where the input box is on the same line as the as the label:

HTML Code:

<form>
  <p>
     <label class="lefttext">First name:</label><input type="text" name="first_name" class="leftbox" />
      <label class="righttext">Last name:</label><input type="text" name="last_name" class="rightbox" />
  </p>
  <p>
    <label class="lefttext">Phone Number:</label><input type="text" name="phone" class="leftbox" />
    <label class="righttext">Email:</label><input type="text" name="email" class="rightbox" />
  </p>
e
t
c
.
</form>

CSS:

Code:

.lefttext {position: absolute; /*relative will not work*/ left: 10px;}
.leftbox {position: absolute; left: 100px; width: 120px;}
.righttext {position: absolute; left: 250px;}
.rightbox {position: absolute; left: 360px; width: 120px;}