[CSS] Customize your form with CSS - part 1 - HTML Forums

karinne · 06-08-2006, 10:57 AM

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:</label><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</label><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

  <input type="submit" value="submit" 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 common fonts) and colors. Don't think that these changes stops at simple text withing div, span or p elements. 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:

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 would 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>

_Aerospace_Eng_ · 06-08-2006, 10:32 PM

Good tutorial karinne. I would like to add to this. Using karinne's code we are going to add a fieldset and a legend. Usually form elements are inside of fieldsets. To do so we add the fieldset element around karinnes code, just starting after the open form tag and closing before the closing form tag. I'll make them green and bold.

Code:

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

  <p><label for="website">Website:</label><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</label><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

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

That will give you something like the first attachment. IE looks cooler than Firefox because it seems to give it a type of curved corners. Firefox makes it look like an inset box. We can make it look the same in IE and FF by specifying a border using CSS for the fieldset. Taking the styles we have already we will add the fieldset style.

Code:

  <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;
    }
    fieldset {
      border:1px solid #333;
    }
    -->
  </style>

We aren't going to give a background color to the fieldset. You can if you want too. Now here comes the legend tag. We will add it just after the fieldset tag.

Code:

  <fieldset><legend>This is the legend</legend>
  <p><label for="name">Name:</label><br />
  <input type="text" name="name" id="name" title="Type you name" /></p>

  <p><label for="website">Website:</label><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</label><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

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

You will get something that looks like the second attachment in this post.

mattr12 · 07-07-2006, 10:19 PM

Nice tutorial! I used the custom buttons on my site