Input Boxes and Submit Buttons

Updated by developer on December 29th, 2011

The days of bland web pages with ugly text and layout are long gone, but the parts that make up a form have largely remained unchanged. Here, I am attempting to describe various methods that may be used to enhance the look of your input fields and form buttons.

Basic Form

A very simple form might look like this:

Name:
Password:

Code

    Name:
    Password:
    

Enhanced Border

We can improve on this by firstly changing the border of the form:

Name:
Password:

Code

    Name:
    Password:
    

CSS

.input {     border: 1px solid #006; }

Enhanced Background

Now we work on the background:

Name:
Password:

Code

    Name:
    Password:
    

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.button {
    border: 1px solid #006;
    background: #9cf;
}

CSS Labels and naming your elements

It is good practice to name your elements using the "id" property. Once this is done, you can add a "for" property to your label and anyone clicking on the label will have the cursor placed at the corresponding input space.

Positioning

Typically, a form and its labels are aligned with the help of tables. Tables are generally frowned upon these days for anything other than tabular data so it makes sense to use CSS for form layout.
Here, we'll wrap the labels in the tag and add some CSS for these to align them properly.

Name:
Password:
 

Code

    Name:
    Password:
     

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.button {
    border: 1px solid #006;
    background: #9cf;
}
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }

Hover Effect

We can build on the above to add a hover effect. Simply add another element followed by ":hover":

Name:
Password:
 

Code

    Name:
    Password:
     

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.button {
    border: 1px solid #006;
    background: #ccf;
}
.button:hover {
    border: 1px solid #f00;
    background: #eef;
}
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }

Using images for buttons

Finally, here is an example of using CSS-enhanced images as the background for your buttons. Separate images for the unpressed button, hover effect and a pressed button may be used by simply setting the border to "none" and specifying the URL in the background value:

Name:
Password:
 

Code

    Name:
    Password:
     

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('/forms/down.png') no-repeat top left;
    padding: 2px 8px;
}
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }

Grouping things together

We can also group the elements together and separate them from the rest of the page by using the fieldset and legend elements.

My awesome form

Name:
Password:
 

Code

 

  

My awesome form

    Name:
    Password:
     
 

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('/forms/down.png') no-repeat top left;
    padding: 2px 8px;
}
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }