<button> tag

HTML <button> tag

Using <button> element, you can create clickable buttons like submit, reset, cancel, ok, etc.

<button>Button Name</button>


<button type="button" onclick="document.write('Form submitted')">Submit</button>
<button type="button" onclick="document.write('Selected')">Ok</button>

Default CSS Value


How Browser will display


Difference between HTML4.01, XHTML and 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 -

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
  • .
    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 -

  • _blank - Opens the response in a new window/tab

  • _self- Shows the response in the same window/session

  • _parent - To open the response in the parent tab

  • _top - Show the response in the full screen.
  • 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

    supporting-browsers for tags

    Related Tags

    <input> & <form> tags.

    Tutorials for all brains!