Neatly Styled Forms With CSS

Regular HTML forms may seem too simple and unappealing. They could be too small or have a poor font for your site. Or maybe they just don’t go too well with your design.

All these reasons and more give you the perfect incentive to style your forms. In this tutorial, we will create a comment form out of 3 simple images.

You may download these images (as well as our finialized HTML and CSS files!) here, or just follow along with the rest of this post.

Let’s start off with our HTML in the file index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<title>Form Styling!</title>
</head>
<body>
	<h2>Input Form</h2>
	<form id="input-form" name="input-form">
		<label for="first-name">First Name: </label>
		<input type="text" id="first-name" name="first-name" class="field" />
		<label for="last-name">Last Name: </label>
		<input type="text" id="last-name" name="last-name" class="field" />
		<label for="e-mail">E-mail: </label>
		<input type="text" id="e-mail" name="e-mail" class="field" />
		<label for="text">Message: </label>
		<textarea id="text" name="text" class="field"></textarea>
		<input type="submit" id="submit" name="submit" value="Submit" />
	</form>
</body>
</html>

This markup is creating a form with four input fields for the user’s first name, last name, e-mail, and message. It is also applying labels for each of these fields to ensure the user knows exactly what information to type in.

Now that we have our basis, it is time to style. Let’s begin with the labels:

label {
	display: block;
}

As you can see, the only styling necessary is to display the label as a block. By doing this, we place a new line before and after this element. Thus, the text in the label tag is displayed in its own line above the respective input box.

Moving on to the input boxes and text area:

.field {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 13px;
	margin-bottom: 30px;
	border: 1px solid #ccc;
}

Unfortunately, the default font for input boxes aren’t what most people are looking for. In our first two lines of CSS, we change the font to meet our own needs – Trebuchet MS with a 13px size. Feel free to customize the font to blend with your own site design.

Another common problem at this point is that everything is a bit too close together. We fix this with our next line of CSS by adding a 30px space in-between each of our input boxes. This allows for a user-friendly design.

The last line of our code adds a 1px wide gray border to all input fields for a better overall look. This is especially nice when the user hovers over or clicks on one of these fields, at which point we can switch the border color. With this effect, the user can easily recognize the form element.

To code the above effect, we use the following snippet:

.field:hover {
	border-color: #b8b8b8;
}

.field:focus {
	border-color: #a8a8a8;
}

Now that we have our general properties for all our elements completed, we can move on to specifics:

input.field {
        width: 244px;
	height: 15px;
	padding: 5px 3px;
	background: url(input-top.jpg) repeat-x;
}

The above properties only apply to our <input> tags (excluding the submit button). For each of these tags, we set the dimensions to 244px by 15px. The padding makes sure the text has an offset from the edges of the field. To wrap up, the background that we set adds a gradient to each box.

On to the text area:

textarea.field {
	width: 388px;
	height: 192px;
	padding: 4px 6px;
	background: #fff url(text-bg.jpg) bottom repeat-x;
}

This code has a similar structure to the snippet that was previously used. It sets the dimensions, offsets the text, and adds a gradient to the text area.

And finally our submit button:

#submit {
        float: left;
	width: 70px;
	height: 25px;
	border: none;
	background: url(submit.jpg) no-repeat;
}

This code also sets the dimensions, removes the default border, and adds in a custom background for the submit button.

For a uniform design, it floats the button to the left so that it lines up with the rest of the form elements.

That’s all there is to it. Now we have a neatly styled form which can be viewed here.

Thanks for reading!

Leave a Reply

Neatly Styled Forms With CSS