HTML/CSS forms can be a bit scary at first. Let’s take a look at a simple HTML form and break it down, tag by tag:

<div class="blueform">
      <form>
        <fieldset>
          <legend>Email Us</legend>
          <div>
            <label>Your Name</label>
            <input type="text" name="your_name" value="" />
          </div>
          <div>
            <label>Email Address</label>
            <input type="text" name="email" value="" />
            <small>Please enter a valid email address</small> </div>
          <div>
            <label>Subject</label>
            <select name="subject">
              <option value="Website Issue">Website Issue</option>
              <option value="Product">Product</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div>
            <label>Message</label>
            <textarea name="message"></textarea>
          </div>
        </fieldset>
        <input type="submit" value="Send Email" />
      </form>
    </div>

The first thing we did was wrap everything in a div with the class of “blueform”. This way, if we have multiple forms throughout our website, we can specify the styles of specific kinds.

Next we use our <form> tag as another container for everything else. The form tag is needed because it let’s the browser know that everything within this tag belong to this specific form and can treat it as such.

Then, the fieldset acts as another container to section out our form. For example if we wanted a section to get information about the user (name, address, email…) that could be contained in one section. Then have another section for the user to fill out fields about a product or service. The legend tag then labels this fieldset.

You can see from here that each question is wrapped in a div tag. This allows us to control the text, input box, and anything else pertaining to that question together.

Inside each div, there is a label. The label simply describes to the user filling out the form what they should be inputting.

Also inside each div is the input element. There are a few different kinds we use here:

• Text - An “input” tag with the type attribute of “text” will show a one-line input text box
• Select - A select tag
• TextArea - A multi-line block for long text input

Notice also that each of these fields contains a name attribute to let the browser know the name of the inputted value to pass to the server

Then finally, once all data is entered, we need a way for them to submit the form. After the fieldset container we have a submit button. Notice it is the same tag as the input text field, the way the browser knows it is a button is by setting the type attribute to “submit”.

So with our form all set, let’s look at some CSS and we can go line by line and see what is going on here:

<style type="text/css">
.blueform {
    margin: 10px;
    padding: 5px;
    background-color: #FFF;
    border: #EEE 1px solid;
}
.blueform form fieldset {
    margin: 10px 0px 10px 0px;
    padding: 10px;
    border: #DDDDDD 1px solid;
}
.blueform form legend {
    font-weight: bold;
    color: #7898c2;
    font-size:15px;
}
.blueform form fieldset div {
    padding: 4px 0px 4px 0px;
}
.blueform label{
    margin-right: 10px;
    padding-right: 10px;
    width: 150px;
    display: block;
    float: left;
    text-align: right;
    font-weight:bold;
    font-size: 14px;
}
.blueform form small {
    margin-left: 170px;
    display:block;
    font-size: 10px;
    color: #333;
}
</style>

Nothing here really consists of anything new, but it’s the combination of all the techniques we have gone over so far that brings this form together.

We start with a style for the main blueform div class.Nothing major, just set the border, background color, margin, and padding. We do the same for the fieldset tag. Nothing major yet. We decorate the legend text a little bit and manage the margin and padding for that as well. Then in the next div style we set the a top and bottom margin, remember, this is the container div for each field.

The .blueform label style is where we start to add some tricks that make this form look nice. The main thing is to set the float to left so that the following input forms wrap next to it, in doing so we also want to make sure that the display is set to a block level element and that we define a width. The remaining changes are cosmetic, we make the text bold, align it to the right, and play with some margin.

The last style we modify is the small tag so that the notes we give will be in a small font underneath our input box. We need to be sure to give it a display of block so that it goes to a new line. We also want a margin-left to push it out enough to be underneath the input box.

There is much more that could be done to the appearance of this form so that it looks a bit nicer so feel free to add your own styles to make this form look good!