Summary -

In this topic, we described about the <button> tag along with detailed example.

Button creates control of the content in HTML documents. The <button> tag is used to represent the button control in an HTML document. The <button> tag defines clickable button.

The <button> tag can be used as individual control or in conjunction with <form> or <input> element. Different browsers will use different default types for <button> tag and its better to provide the default type always.

Any text in between <button>..</button> appears within button. <button> tag can’t be nested.

Syntax -

<button>.. text here.. </button>

Optional Attributes -

autofocus Specifies the button should have focus on page load. HTML5 attributeNone.
disabled Disables the button control. None.
form Specifies the button belonging formid.HTML5 attribute Form_id text.
formaction Specifies where to send the data.Used when type is “submit”. Override form element’s action attribute.HTML5 attribute URL.
formenctype Specifies how to encode the form data.Used when type is “submit”. Override a form element’s enctype attribute.HTML5 attribute Default.text/plain: Basic text.
formmethod Specifies how to send the data.Used when type is submit. Override a form element’s method attribute.HTML5 attribute get: Used for simple data Used for more detailed or secure data sending.
formnovalidate Specifies form not to be validated on submit.Used when type is submit. Override a form element’s novalidate attribute.HTML5 attribute None.
formtarget Specifies where to display the data on submit.Used when type is submit. Override a form element’s target attribute.HTML5 attribute _self: Opens in current window / tab.
_blank: Opens a new window / tab.
name Specifies the button name Text (no spaces).
type Specifies the name of the button submit (default): Submits the form.reset: Resets all the controls in a form to their initial default values.button: Does nothing
value Specifies the button initial value.Used when type is submit. Text.

Example -

<!DOCTYPE html>
		<title> Button element example.. </title>
		<button type="button" onclick="alert('Button Example !')">
		Click here!</button> 

Output -