Form element - input type="image" and CSS
The form can be submited to server by standard button input type="submit", or by help of pictorial element input type="image". If you want to have the same look and feel of submit buttons across all browsers and systems, it is necessary to use the form element image. Disadvantage of the image element is the lack of animation when clicked, so it does not always looks like a real button.
The following live form contains two checkboxes for "disabling" image elements and two image elements for submitting this form: simple icon and animated button. When the form is submitted, server reads each of submitted form elements and list that below the form. At the bottom of the table is listing of code used to format both image elements.
Special type of information is sent when form is submitted by element image as you can see at form test. All browsers submit the coordinates x, y of point where the click occurred. Browsers FireFox, Chrome and Safari submit also the pair name=value (here image=clicked) and so simulate the element submit. In the second element (imageButton) there is no value specified (this is optional attribute) and therefore no pair of name=value is submitted.
When there are more image elements in the form, server can not test which image was clicked by refering to pairs name=value, that would exclude the forms sent from IE and Opera browsers. Detection have to be done accordint to names with coordinates. Remember that PHP scripts replace "dot" character by "underscore" (eg image_y = 18).
Checkboxes are used to set disable status of the image elements with the view of button picture and for testing of stop submitting by disabled element. Take note of submitting checkbox status information. Only when checkbox is checked pair name=on is submitted. When the checkbox is not checked, no information about the checkbox is submitted.
Try to control the form by keyboard keys Tab and Shift + Tab. You can see indication of the element which has got focus. The jagged edge appears arround the element in the browsers IE and FF even when the mouse control was used. Other browsers display a smooth color edge only when it makes sense, therefore, when the form element receives focus by pressing Tab.
Attributes of the element image
<input type="image" name="..." value="..." src="...">
type="image" is a required attribute for this type of a form element.
name="..." is a required attribute and must be filled with a unique name in the form. Part of submitted form data set are substrings name.x=X and name.y=Y, where X,Y are coordinates of image, where mouse click was done (in pixels). In our test form above e.g. imageButton.x=15 and imageButton.y=32 are submitted. In case when Enter key was used to submit form, zero coordinates are filled in, so imageButton.x=0 and imageButton.y=0 are submitted.
value="..." attribute is optional. When used, browsers FireFox, Chrome and Safari submit as part of form data also string name=value, when this image element was activated. When this attribute is missing, no such a string is submitted. IE and Opera browsers never submit such a string, regardless of the attribute value definition. In our test form can be sent a string image=clicked.
src="..." specifies the path to the file that contains a picture which will appear as a submit button.
disabled attribute is optional and force the element into inactive status. That means the element can not receive focus and therefore the form can not be submitted by disabled image element. Without CSS style that attribute causes no visible effect.
Experimental animation of element image
Form button type=submit and type=button successfully simulate mouse click. Although this animation is not completely uniform (in some browsers and systems only the border is changed, otherwise it moves the inside text right and down also), this feedback is very intuitive. In the case of the element image such animation is missing.
To render imageButton, fully transparent gif picture is used and background of that element becomes fully visible. Position of background is set according to actual CSS pseudo class which corresponds to browser and mouse activity. No javascript is required for animation. Background picture is formed by means known as sprites, one picture contains several sub-images, which are used separately by setting the coordinates of background. To simulate the animation of the current button, we need to set the following states:
- basic, idle state
- hover state, which inform user that the image is live and he can click it. Only color of text is changed in this state. I consider it a mistake if in this state appears already pressed button picture. It is somewhat early. The state is set when mouse is over the button.
- active state is set up when the mouse button is pressed over the image. The image gradient is turned and the text is drawn as shifted right and down by 1 pixel. This way pressing the mouse button is simulated.
- disabled state implies eliminated, functionless button. This state have to be set by javascript, or by server script when page is generated. Disabled button indicates e.g. that form was already submitted and prevent multiple form submit. In the case of multiple buttons this state may indicate button which has no meaning in given context.
All modern browsers display all of described states of the imageButton and all browsers submit the form. Some display pain makes IE, as expected. IE6 displays only the basic style of the button, IE7 adds style hover and IE8 is able to display even active style. No IE version is able to display disabled state. Perfect look and animation provides Opera browser.
Why the sprite picture is not used directly in the element image without using a transparent gif? Basically, it is possible, but some issue of focus mark appears. The element have to be enclosed in a container-like div with style overflow: hidden; to make visible only required part of the sprite and that also trim the outline (ugly dotted border around an element) mark.
Longer form is the only one case when it is usefull to control browser by keyboard. Therefore correct focus of form elements is desirable. Correct focus appears only when iniciated by Tab key. Why browsers IE and FF display focus when initiated by pointing device I realy do not know.
Described solution has one disadvantage: this type of image button falls away from printed page. If you are interested why this page can print image button, check source code of this page and look for #printButton element.
updated 12.05.2010