Ordinary (enabled) buttons |
|
BUTTON element with text content
<BUTTON name="p" value="y">Click me</BUTTON>
This works correctly. |
|
BUTTON element with IMG content
<BUTTON name="q" value="y"><IMG src="img0.png" alt="Click me"></BUTTON>
This works correctly. |
Disabled buttons |
|
BUTTON element with text content
<BUTTON name="r" value="y" disabled>Click me</BUTTON>
Incorrect visual feedback. Although this button doesn't submit the form, it looks just like an ordinary button and still moves when clicked. |
|
BUTTON element with IMG content
<BUTTON name="s" value="y" disabled><IMG src="img0.png" alt="Click me"></BUTTON>
To all intents and purposes, the "disabled" attribute in this tag has no effect whatsoever. The button looks and functions just like an ordinary button |
Workaround |
|
BUTTON element with text content
<STYLE type="text/css"> BUTTON.d { color: #666; border:2px outset #eee; } </STYLE>
<BUTTON name="t" value="y" disabled class="d">Click me</BUTTON>
A CSS style can be used to override the mousedown effect. |
|
BUTTON element with IMG content
<STYLE type="text/css"> BUTTON.d { color: #666; border:2px outset #eee; } </STYLE>
<BUTTON name="u" value="y" disabled class="d"><IMG src="img0d.png" alt="Click me" onclick="return false;"></BUTTON>
This can be fixed by applying a CSS style to the button and a null "onclick" event handler to the image. Note: The HTML spec also suggests that the contents of disabled objects should be grayed out. Shouldn't this apply to images too? |