Input Boxes and Submit Buttons

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

<form action=”">
Name: <input type=”text” />
Password: <input type=”password” />
<input type=”submit” value=”Submit” />
</form>

Enhanced Border

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

Name:

Password:

Code

<form action=”">
Name: <input type=”text” class=”input” />
Password: <input type=”password” class=”input” />
<input type=”submit” value=”Submit” class=”input” />
</form>

CSS

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

Enhanced Background

Now we work on the background:

Name:

Password:

Code

<form action=”">
Name: <input type=”text” class=”input” />
Password: <input type=”password” class=”input” />
<input type=”submit” value=”Submit” class=”button” />
</form>

CSS

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

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 <label> tag and add some CSS for these to align them properly.

Name:

Password:

Code

<form action=”">
<label>Name: </label> <input type=”text” class=”input” />
<label>Password: </label> <input type=”password” class=”input” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” class=”button” />
</form>

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

<form action=”">
<label>Name: </label> <input type=”text” class=”input” />
<label>Password: </label> <input type=”password” class=”input” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” class=”button” />
</form>

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

<form action=”">
<label>Name: </label> <input type=”text” class=”input” />
<label>Password: </label> <input type=”password” class=”input” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” class=”button” /> <input type=”submit” value=”Cancel” class=”button” />
</form>

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

<form action=”">
<fieldset>
<legend>My awesome form</legend>
<label>Name: </label> <input type=”text” class=”input” />
<label>Password: </label> <input type=”password” class=”input” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” class=”button” /> <input type=”submit” value=”Cancel” class=”button” />
</fieldset>
</form>

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; }