HTML <button> tag
Using <button> element, you can create clickable buttons like submit, reset, cancel, ok, etc.
Note/Warning/Info It is recommended to set at least 48px width for the button.
It is not mandatory to place a text inside a button. You can also set up an image on a button as well.
It is not mandatory to place a text inside a button. You can also set up an image on a button as well.
Syntax:
<button>Button Name</button>
Example
<button type="button" onclick="document.write('Form submitted')">Submit</button> <button type="button" onclick="document.write('Selected')">Ok</button>
Default CSS Value
NONE
How Browser will display
INLINE.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| None | None | New attributes are added to <button> tag. The important attributes are form, autofocus, formaction and formmethod. The other new attributes which are used less are formnovalidate, formtarget and formenctype |
Attributes used with <button>tag
| Attribute | Description |
|---|---|
| disabled | This attribute disables the input field and user will not be able to edit that field. Simply code the disabled attribute for this. |
| name | Sets the name for the button. |
| type | To define the type of button. It can be button, submit or reset. It is always recommended to set the type attribute. |
| value | To define the initial value of the button in form of text. |
The attributes shown below are added in HTML5.
| Attribute | Description |
|---|---|
| autofocus | To automatically focus the element once the browser loads the form. You need to code the "autofocus" property. |
| form | This attribute uses a form-id to define one or more forms for the elements it belongs to. |
| formaction | This attributes uses a URL to set the path where to send the form data when the user submits the form. This is used for only type="submit" |
| formenctype | For the Input type="submit" or Input type="image" ,this attribute defines the way to encode the form data before it is send to the server. It can take any one among these values - |
| formmethod | For the Input type="submit", it decides which method to use to send the form data. Either it can use the HTTP get method or the HTTP post method. |
| formnovalidate | This instructs the browser not to validate the form when the user sbmits it. |
| formtarget | For the Input type="submit" ,this attribute decides where the user will see the response or message once he/she submits the form. It can take any one ot these values - |
Note/Info:
Different browsers can submit different values for the <button> tag so it is better to use the <input> tag for creating buttons.
It is always better to style your buttons using CSS Buttons.
Global Attributes
The <button> tag supports Global Attributes.
Event Attributes
The <button> tag supports Event attributes.
Supporting Browsers
Related Tags
<input> & <form> tags.