Form elements - submit, image, button and CSS
Submit form button can be created by several ways. Except element <input type="submit" />, it is possible to use graphic button <input type="image" />, or element <button>. Animation is provided for submit and button (image is not supported). Style of animation differs according to type of browser and according to type of element. Somewhere only frame is changed as animation, elsewhere also inner content of button is shifted. Safari changes color of entire buttons.
Screenshots of submit buttons are only examples of styling button type submit, not full-range collection of all possibilities using style. Last row is example of element type button. Screenshots were obtainined by following code.
<input type="submit" />
.size100x22 {width: 100px; height: 22px;}
<input type="submit" class="size100x22" disabled="disabled" />
.background {width: 100px; height: 22px; background: #ffa;}
<button type="button"> ... </button>
Default look without any CSS class or attribute. Size and appearance of element submit depend upon browser type. Light box round some variant of element mark out default margin, consequently needed space, which this element occupies. When attribute value contains very long text, rendering of rounded corners in XP become biased. Expilcit set-up of property width corrects rendering.
Setting dimensions of button by help of style properties do not make problem in any browser. When precision in pixels is not required, then attribute size is good solution for button size setting. Attribute size indicates count "average characters". By this way specified width and height is not uniform in different browsers (in pixels). Safari screenshot displays button in active state.
At set-up attribute disabled legend in button changes to grey as notice, that element status is inactive. This attribute can be set by submit script and by that way report, that form is already submitted as well as state disabled prevents next submitting. Unfortunately state disabled also causes that information of inactivated submit button are not sended to server. More in article form submit.
If property color is set-up in CSS class for element submit (color is not inherited), then change color text to grey is implemented only in browsers IE7 and Opera, other browsers let pre-set color in CSS style property and state disabled is not quite recognizable.
When unified crossbrowser shape of submit button is required, property background switchover the look of button to type of classic, similar in Win2000. Result isn't identical buttons in diverse browsers, but they look quite similar.
Last row of screenshots is created by element Button. This type of element can contain both text and image (icon). Unfortunately incorrect processing of element button at form submitting in IE restricts practical use to form with one submit button, ergo when server script do not test name of submit element.
Atributes of element submit
<input type="submit" name="inpSubm" value="save to database" />
Part of form data set posted to server is also substring name=value of element submit, but only in case when form was sended by help of that button. According to above declaration of element submit it would be substring inpSubm=save to the database. This is helpful when form use more submit buttons and each button has to invoke another action on server. Then each button has unique text in value (and by that also description).
When attribute value is not used, browsers Safari and Opera use English original word Submit. Browsers IE and FireFox use translated word according to national environment.
Atributes of element image
<input type="image" src="...." name="imgSubm" value="send" />
Image button is often used (even misused) when designer wants to create submit button exactly according to his idea. In screenshot list is missing. Mouse click is not accompanied by animation, that is sometimes compensated by JavaScript functions for styling border of image.
Part of submitted form data set are substrings name.x=X and name.y=Y, where X,Y are coordinates of image in pixels, where mouse click was done. According to our tag example above e.g. imgSubm.x=15 and imgSubm.y=32. In case when Enter key was used to form submit, zero coordinates are filled in, so imgSubm.x=0 and imgSubm.y=0. FireFox and Safari in addition sends also string name=value, then imgSubm=send according to our code example, but only in case when attribute value is implemented.
When form contains more image buttons, then each button must hold unique name, to server script could differentiate by which button was form submitted. When Enter key is ussed for form submitting, data of first image button are sent. This type of button cannot display state disabled, but button in this state is inactive. When first image button is disabled and second is functional, then by Enter key it is impossible to submit form in FireFox and Opera, while in IE and Safari form is submitted with data of the second image button.
Element <button> .... </button>
Using element button is inviting and together hard to use. Because of pair character of element, inviting is to insert other HTML elements inside of the button. In practice usable are pictures, icons and formatted text. It is impossible to insert only elements <button>, <select>, <input>, <a>. It is hard to use because of IE, which cannot post correct form data of this element (pair name=value). Basic attribute type determines behavior of element button and can be one of following states:
- type="submit"
Default value for FireFox, Opera and Safari. Mouse click evokes form submitting and well filled in substring name=value of button by which form was submitted is appended. Browser IE posts content of element (e.g. entire image tag), not his value. If there are more elements button type="submit" in form, IE submits data (complete content) of all buttons to server and so it is not possible to determine which button initiated submitting. - type="button"
Default value (when attribute type is skiped) in IE. Mouse click do not invokes form submit in none of tested browsers. It is supposed to use as independent button for calling client scripts, e.g. JavaScript calculator, or menu of application. Form submit is possible only by help of JavaScript. Script can resolve bugged element processing in IE and can provide form validation. Without turned on JavaScript it is impossible to submit such a form. - type="reset"
Form reset already is not used, therefore quite insignificant.
Example of CSS and HTML code for element button according to which screenshots and functional button above were created.
.btn {color: #00f; font: italic bold 15px Times New Roman;
width: 80px; height: 22px; padding: 0 8px;}
.ico {width: 10px; height: 16px; border: 0; float: left;}
<button type="button" name="subm" value="save" class="btn">
<img src="../files/iconExclam.png" class="ico" />
Button
</button>
One remark about using style property float: left; for image. When inside of element are used both image and text, image alignment is performed to typographic lines of text and then property vertical-align does not help to much. Floating image is removed from bindings to typographic lines and can better exploit height of button. The same applies when picture and text is inserted into one table cell. HTML formatting inside of button is far from simple trust. Sometimes it is necessary to write entire code in one line, leave out auxiliary div, span, or define explicit width of button.
updated 29.12.2007