I was referred to this forum as the place to make my recommebdation, so I have come here to do so. I have been thinking about this for a very long time… years in fact. I
have decided that now is the time to make this recommendation.
Element(s) to be amended: INPUT type=“button”, BUTTON
Behavior modification: addition of attribute to allow for constant-state (always pushed, versus momentarily pushed)
Explanation: In the electronics world there have almost always been two types of push
buttons, momentary throw and toggle throw. Momentary throw is the
behavior mimicked by HTML buttons since their inception.
However, toggle throw (off until pushed on, on until pushed off) has
never been implemented as a part of the button syntax… In earlier
and images. I believe that this method is still
usable today, but I rarely see it in use anymore.
the commonly recommended way to accomplish it uses checkboxes instead of
buttons, and css to make the checkbox look like
a button. I have seen one alternative that uses the push button and a css class named .dotoggle to achieve this, but all it does is change the text and background colors of the button so it is obviously “pushed”,
I believe that none of these methods is preferable. There
should be an attribute (such as ‘toggle’, or a type=“toggle” that would
cause the button to mimic a toggle throw button and use the browser’s built-in “pushed button” to show that the button is in the pushed state. There are many
circumstances where this type of behavior is more
desirable than the momentary method that exists now.
Note that this usage is more likely to be used outside of a form (without a form even on the page) than within a form. While I know some will say, “It is a form element and should not be altered for use outside a form,” push buttons can and are used in this fashion and have been since HTML forms were introduced. Also, the validators do not consider this usage to be invalid, and therefore the usage should be considered valid.
Use case: I have developed a page that uses three push buttons to allow the user to select between three divs. The divs are hidden until the user pushes a button. When a button is pushed, the associated div appears. If the user pushes a different button, the currently selected div is hidden and the newly selected div appears in its place. What I am looking for is the selected push button to appear pushed until the user pushes a different button, or until they push the same button again.
Adding a toggle attribute, or a type=“toggle” type, could accomplish this. The syntax would look as follows:
<INPUT type="toggle" onClick="some function">
<INPUT type="button" toggle onClick="some function">
<BUTTON toggle onClick="some function">