site logo

Forms and CSS, introduction

In this section you can find some way of form elements make-up by the help of CSS, screenshots of styled elements for comparison how that make-up adjustments affect appearance of form elements in common browsers. You will find some JavaScripts for input data validation and multiple form submit preventing and some samples of compact and in-line forms.

Default appearance of form elements is quite attractive as far as they are displayed standalone. When you start to design web applications, or compact form design is required, frames of form elements become restriction and setting the dimension of elements grow into need. Although there is no recommendation, or rule in CSS specification about form elements style properties, some browsers support form elements styling, but support is far from consistency. Some screenshots of styled form elements, the differences and description of used CSS are in following articles. Look to what degree this support is uniform and usable in practice.

Some authors advise not to style forms at all. Provided you have an idea of simple blog, or contact form, containing just a few input fields and form have to be presented in any browser, then it is really better not to style.

In case of intranet, the situation is different. Each application requires another type of form. Sometime form is very large (tens as many as hundreds of elements), next time form have to fit into complex table, where together are displayed table and form data. Not styled pseudo-3d form elements occupy much space and look quite historic.

screenshot of compact form screenshot of in-line edit form

Process, technological and production data are usually entered to the paper form, or right down into the spreadsheet. Web forms and applications, which looks like a part of spreadsheet environment is desired. Classic web forms with large empty space around of each of input cell does not fit into production.

The intention is clear: create web forms which looks like a part of spreadsheet. Minimize margins of form elements, remove their border, insert input elements and titles into the table, enable vertical alignment of form and tabular data in one table. Here presented practice of form styling certainly is not only one correct, nor quite trivial, but I hope that is at least interesting.

Articles in this section are not destined for web usability experts or purists. Such as excel table do not need decorative elements as are fieldset, or legend and nevertheless does not make problems at data entering.

I think that more simpler form means more usable form. Simple form here represents form without any decoration, whistle and bells.

Screenshots originate in IE, FireFox, Opera and Safari browsers running on winXP with motive Classic. Used browser versions were following FireFox 2.0.0.8 - 2.0.0.11, 3b1, Opera 9.2, Safari 3.0.2 with sub-pixel rendering mode. For IE7 screenshots was used PC with winXP, motive XP, ClearType off. IE6 screenshots comes from win2000. If browser types selection is insufficient, I recommend quite full-range screenshots collection on www.456bereastreet.com Styling even more form controls.

 

If you are going to test code samples, do not forget to switch your browser to the standard (X)HTML mode according one of following examples. You avoid of quirks mode problem, which use other box model and form elements are rendered somewhat differently.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

<html>
...

CSS code examples in atricles are not for entire novice and reader should have knowledge how each CSS property affects resulting image of form element.

updated 24.11.2007