Monday, July 13, 2009

CSS Form Element Standards

Having standards set within your code is probably one of the single most effective habits you can have as a developer. Even if your code is bad, having a standard way of executing things you know exactly how your code will be effected, and it makes it easier to improve your code because it's handled consistently across the whole site.  Consistency is key, and that applies in all areas, not just in your user experience.

With us in the middle of redesigning one of our sites we have moved our policy of creating standards to CSS, and really taken it to the next level.

Element Sizes
Form fields should not all be the same size.  Different form elements accept different types of data of varying lengths.  Because consistency is important both within your code and for the user experience we have implemented form standard sizes.

/*
 * Input
 */
.form input.small {
 width: 100px;
}
.form input.medium {
 width: 200px;
}
.form input.large {
 width: 300px;
}
.form textarea.small {
 width: 250px;
 height: 80px;
}
/*
 * Textarea
 */
.form textarea.medium {
 width: 360px;
 height: 120px;
}
.form textarea.large {
 width: 360px;
 height: 220px;
}
.form textarea.xlarge {
 width: 360px;
 height: 350px;
}

This allows us to globally control the size of our forms and our forms to always have consistent sizes so we don't end up with 4-5 different size fields on a single form.

Element Styles
 While it's generally not a good idea to style form elements too much, there are some good things you can do to enhance the user experience.  Web sites are becoming crisper, cleaner, and more interactive - Web 2.0.  To follow this trend we have modified all of our form elements to have a light gray border with 4px padding on the element.  The padding is there to emphasize focus on the content of the element.  By making the select box larger we make it easier to click on and make it easier to read because of the extra spacing between the form element borders and the text itself.


To make our forms for interactive, we use the psuedo class focus to make the border slightly darker.  The objective is to highlight the field but keep the focus on the content itself, thus the border is not solid black, but only a darker gray.

With 47% of the web using Firefox (according to W3Schools), using these styles will work very well in accordance with select boxes.

No comments:

Post a Comment