HTML Buttons

An HTML button in its simplest form can be created using code below

<button>Click Me!</button>

Unlike buttons created using the input tag, button tag buttons can contain images and text. The bare bones button above is of very little use. A more complete version would appear like this

<button class="classname" id="AName" type="text" disabled="disabled" onclick="WhenClicked()"

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.
• Buttons have their type attribute set to type="button" by default. It is only necessary to specify this attribute when the button is placed inside a form HTML element. The two relevant values are
  • submit:Causes data entered into the sibling controls - i.e., the other controls in the form - to be submitted to the server using the method specified in the form attributes.
  • reset:Causes the sibling controls to be reset to their initial value. Typically, this would be used to empty text fields, clear checkboxes etc.
• The disabled="disabled" attribute should be specified to place the button in a disabled, non-clickable, state. Typically, the id="name" attribute would be specified too so as to to enable the button to be manipulated using JavaScript.
• When the button isn't intended to be used to submit or reset form data one would usually assign a JavaScript method to the onclick event. The method can, optionally, be given a parameter - such as the id of the button, for instance.

While button elements are amenable to styling, what can be accomplished leaves much to be desired. This limitation can be overcome by abandoning buttons intrinsic to the browser and using CSS + HTML to create your own buttons instead. We discuss this technique in detail here.