Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

A CSS Styled Form.

7.18.2007

Why can't clients just tell me when they go live?!? Are the fifty billion little bullet points that ask them to do so not enough? Gah!

Now that I've got that out of my system, I feel it's time I shared some more code with you. I present, the CSS-styled form!




This example is taken from Web Design in a Nutshell, 3rd Edition.

Here's the CSS that gets it done.

<style type="text/css">
form
  { font-family: Arial, Verdana, Helvetica, sans-serif;
    border: solid #FFFFFF 1px;
    width: 28em;
    margin: 5px;
    padding: 5px;
    }
label
  { width: 6em;
    float: left;
    text-align: right;
    margin: .5em 1em;
    clear: both;
    }
input, textarea
  { font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: small;
    margin: .5em 0;
    width: 17em;
    }
input[type="submit"]
  { float: none;
    clear: both;
    width: auto;
    margin-bottom: 1em;
    margin-left: 8em;
    }
br { clear: both; }
</style>

Notes:

Permalink

Tags: accessibility code css html

Authorized users may log-in to leave a comment.

Last Blog: Spontaneous Generation.

Next Blog: He Knew What He Was Doing.