Problems of form elements
Article recounts an overview of issues and troubles of form elements in different browsers. While there is no standard how form elements would look like and how to behave, you can find a number of issues that complicate the creation of cross-browser forms.
Here is not evaluation of the latest style properties applied to form elements, but rather listing of errors and issues in current browsers. The following table provides a summary of problems that you can meet at form testing. Detailed description of the form elements including live samples, screenshots and CSS using can be found in the relevant articles on the right.
| element | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| type="text" | 2 | 1 | 1 | ||
| textarea | 3 | 1 | 1 | ||
| select | |||||
| type="checkbox", type="radio" | 2 | 1 | 1 | 1 | |
| type="file" | x | x | x | x | x |
| type="submit" | |||||
| type="image" |
input type="text"
Text cursor disappears when text in box is aligned to the right, or when long text (across the entire width of the element) is typed. Failure appears in IE and Opera browsers due to property padding: 0; which is part of many CSS reset frameworks. The problem can be corrected by setting padding: 0 1px 0 0;.
textarea
W3C HTML validator requires usage of attributes cols and rows. The same attribute values create different size of element in different browsers. It is better to unify the size by CSS properties width and height. Empty space around the element in Chrome and Safari can be removed by setting property float. This property is usefull also for removing empty space arround other form elements.
Elements input type = "text" and textarea in IE and FF browsers, when attribute readonly is set up, allow to place text cursor into the element and to move the text cursor by cursor keys. This creates faulty sense that the text can be edited. Moreover, in this condition, when backspace key is hit in IE, browser loads previous page. That is already quite confusing.
select
IE6 and IE7 can not handle border property of select element. There is not possible to set the width, color and type properties, or even remove the border. Moreover, in IE6 this element always flow up, above others elements. Only in IE8 this element can be styled in the same way as in other browsers long time ago. With some restrictions, the border can be removed even in IE6 browser.
input type="checkbox", input type="radio"
Opera is the only one browser in which it is possible to adjust the size and color of these elements. Other browsers display these elements as Windows icons with all the weaknesses (size, appearance and color can not be changed). Event onChange in IE is invoked with delay, not when status is changed, but as late as click outside an element occures (when element lose focus).
input type="file"
Element consists of two parts: textBox and button. When click on any part of this element, a dialog box for file selection is always called up and thus prevent file name editing. In Safari and Chrome only file name is displayed, path is skipped. To edit the file name may be even undesirable, file selected by the dialogue for sure exists and validation is unneeded then. To edit the text of path and file name by keyboard is possible in Opera and IE only.
It seems that the button part of element is useless. Removing the button and activating the file pick dialog, every time this form element is clicked, would simplify the element to level of element type="text". After that it would be possible to use CSS to modify the look of this, otherwise not possible to style, element.
input type="submit"
Changing the look of this element with CSS do not make problem. Empty space around element in older browsers can be removed by property float, (as to the rest of form elements). Small differences are in the button click animation. FF and Opera needs a specific setting to remove the focus (ugly dotted contour).
input type="image"
In all browsers, the image element submits the coordinates x, y point where the click occurred. Browsers FireFox, Chrome and Safari in addition submit also pair name=value to simulate the type="submit" form element (only if value is specified). This fact can not be used for cross-browser solution.
font settings
Font that should be used in form elements have to be set in star notation *{} (universal selector), or in list of form elements, as shown below. Other possible way, is font declaration in specific class which is used in form element. Font declared in html, or body elements has no meaning in form elements.
<style type="text/css"> * {font: normal 13px Arial, SansSerif, Verdana;} input, textarea, select {font: normal 13px Arial, SansSerif, Verdana;} </style>
background
Setting background property in case of form elements usually turnes the design of elements into classic look (pseudo 3D border, without rounded corners). In case of checkbox and radio elements in browsers FF, Chrome and Safari background property has no effect.
focus
Text from keyboard is routed to element which has got focus. Indication of that element is user-friendly and elegantly resolved in Chrome and Safari browsers with help of colored contour. Both browsers distinguish whether an element was activated by pressing Tab key or by mouse click. Then there is no need to draw focus mark for hyperlink which was clicked by mouse.
Other browsers draw ugly dotted outline around some form elements and hyperlinks. Focus for elements type="text" and textarea is indicated by text cursor only. IE, FF and Opera are not able to recognise whether keyboard or mouse was used for browser controlling. Detail description, including live focus example, is in chapter focus elements.
validation
National conventions may cause some problems, not related to the browser type. Float number notation in some countries requires character comma as decimal separator (instead of decimal point). That is why float number validation have to be done with regards to this fact. Also date validation entered as European date differs from validation of US date and time.
rendering of elements
Safari3 and Opera9 used to render their own, browser specific, form elements look. New versions and all others browsers take over Windows form elements. New versions lost so much of its attractiveness, to rely on Windows is step back, indeed.
updated 14.06.2010