Home > Abakada: Back to Basics > Language References > HTML Elements > BUTTON Element
| Represents a command button. | HTML 4, 4.01, 5 |
HTML Syntax
<button
command = show-modal | close | request-close | show-popover | hide-popover | toggle-popover
commandfor = element_id
disabled
form = form_id
formaction = url
formenctype = application/x-www-form-urlencoded | multipart/form-data | text/plain
formmethod get | post
formnovalidate
formtarget = _blank | _self | _parent | _top | window_name
name = name
popovertarget = element_id
popovertargetaction = hide | show | toggle
type = button | reset | submit
value = text
>
NOTE: Both start and end tags are required.
The <button> element creates buttons which function like buttons created with the <input> element, but offer richer rendering possibilities.
The button element may have content that is displayed as a label for the button.
<button>Click Me</button>
which would render on web page as
The type attribute specifies the visual appearance and default behavior of the button.
Though button can contain images, it is not valid to associate an image map with an <img> that appears as the contents of a button element.
Conforming browsers typically render button with relief and an up/down motion when clicked.
When the button object is submitted in a form, user agents submit the value, if it exists.
The <button> element supports the following attributes, in addition to global attributes common to all HTML elements.
| autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
| disabled | disabled | Specifies that a button should be disabled |
| form | form_id | Specifies which form the button belongs to |
| formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type="submit" |
| formenctype | application/x-www-form-urlencoded, multipart/form-data, text/plain | Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
| formmethod | get, post | Specifies how to send the form-data (which HTTP method to use). Only for type="submit" |
| formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type="submit" |
| formtarget | _blank, _self, _parent, _top, framename | Specifies where to display the response after submitting the form. Only for type="submit" |
| name | name | Specifies a name for the button |
| popovertarget | element_id | Specifies a which popover element to invoke |
| popovertargetaction | hide, show, toggle | Specifies what happens to the popover element when the button is clicked |
| type | button, reset, submit | Specifies the type of button |
| value | text | Specifies an initial value for the button |
The following example shows submit and reset buttons done with button instead of input.
Below is the HTML fragment for the sample above.
<form>
<table>
...
<tr>
<td><button type="submit"
style="background:#036;color:gold;font:bold">
Send</button></td>
<td><button type="reset"
style="background:#800;color:gold;font:bold">
Reset</button></td></tr>
</table>
</form>
INPUT