14.3. The button forms control

14.3. The `button` forms control

The button element is rendered as a pushbutton. Unlike the input element, you can put content inside the element, such as text or images. Here is the content model:

element button
{ attribute name { text },
  attribute value { text }?,
  attribute type { 'submit' | 'reset' | 'button' }?,
  attribute disabled { 'disabled' }?,
  attribute tabindex { xsd:nonNegativeInteger }?,
  attribute onfocus { text }?,
  attribute onblur { text }?,
  Common.attrib,
  Flow.model
}

name

The button's control name.

value

The value to be sent to the handler script when this button is activated.

type

A value of type='submit', the default value, creates this control as a submit button. A value of type='reset' creates a reset button. Using type='button' creates a pushbutton; use the event attributes to connect such a button with code to handle it. See Section 16, “Event attributes”.

If the type attribute is omitted, the control is created as a submit button.

disabled

If you use disabled='disabled', this control will not respond to user events.

tabindex

Specifies where this control lies in the tab traversal order. See Section 15.7, “The tabindex attribute: Specifying tab traversal order”.

onfocus, onblur

See Section 16, “Event attributes”.

Common.attrib

This control can carry any of the attributes described in Section 15.3, “The common attributes: Common.attrib”.

Flow.model

The content inside a button element can be any mixture of text, inline elements, and block elements. See Section 12, “Flow.model: Arbitrary content”.

Here is an example of a button that displays image file panic.png, and submits the form when clicked.

  <button name='panic-button' value='panic' type='submit'>
    <object data='panic.png' type='image/png'/>
  </button>

Building web pages with XHTML 1.1

14.3. The button forms control

14.3. The `button` forms control