Form no.
1 - Standard appearance
basic form, only the font is set via the CSS
- you can see in Internet Explorer that the input type "text" (Nick) and "password" (Password) have different width
- selection of sex is a common selection list which has the html attribute size set as size="3"
- you can also note the different appearance of textarea element in different browsers where IE 7 and Opera 10 always display the scrollbar - drawn in grey if inactive - but Mozilla Firefox 3 displays it only if the input text overflows the border of the textarea (the behavior of selection lists is exactly the opposite)
The main problem when styling a web form is (as always) different interpretation
and appearance of forms in different browsers. You can compare this form in IE, FF and Opera and you will find out
that all inputs are displayed differently. On the top of that, this is not only a problem of different browsers but you might face the same problem when using different
operating systems because any browser should ask the operating system to draw those elements so they would appear the same and would not confuse users.
You can see the amount of compliance with this fact (image).
Because of this any complex styling is not recommended.
You can see a deterrent sample - the Crazy appearance. Please check that option and press the button Submit form.
Form no.
1- Crazy appearance
a deterrent example of form where almost all elements are designed via CSS
- you can try the function "hover" which changes the style of element after moving mouse cursor over it - this will move the whole page - however, you can use this function well for highlighting the input field where user currently operates
- if you are using for example Opera 10 or FF 3, you can see flashing descriptions - you can gain this using the css property blink which is quite disturbing and not suitable (note that the first browser which supported it was IE, however, current versions of IE (7,8) do not support it)
- the most important example from this horror is the way browsers draw the background color of input types "radio" and "checkbox"; IE draws a rectangular background around the inputs which makes this property unusable; FF 3 does not draw any background and Opera 10 draws background only in the inner part
- do not style the input type "submit" (button) too - you will get a angular mockery which appears to be archaic instead of nice 3D rounded button
In case you have to use styling, you can see several extended possibilities of styles in the following forms; check "Form no.2" and press the button "Submit form". In case you wanted to see how this form appears without the external css file, check the option "Without styling" and confirm
