totn HTML

HTML: <button> tag

This HTML tutorial explains how to use the HTML element called the <button> tag with syntax and examples.

Description

The HTML <button> tag is an element that represents a clickable button. This tag is also commonly referred to as the <button> element.

Syntax

In HTML, the syntax for the <button> tag is:

<body>
<button name="button">Click me</button>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <button> tag:

Attribute Description HTML Compatibility
autofocus Boolean value indicating that the button should have input focus when the page is loaded, unless the user overrides it. HTML5
disabled Boolean value indicating that the user cannot interact with the button. HTML 4.01, HTML5
form Value indicating the form that owns the button. It is the Id of a <form> in the same document. HTML5
formaction URI of a program that will process the information submitted by the button. HTML5
formenctype Type of content that is used to submit the form to the server. It can be one of the following values:

application/x-www-form-urlencoded
multipart/form-data
text/plain		 HTML5
formmethod HTTP method that the browser uses to submit the form. It can be one of the following values: post, get

post - means that the data from the form is included in the body of the form and is sent to the server
get - means that the data from the form is appended to the URI with a '?' separator and the URI is then sent to the server		 HTML5
formnovalidate Boolean value indicating that the form is not to be validated when it is submitted. HTML5
formtarget Name or keyword indicating where to display the response after submitting the form. It can be one of the following values: _self, _blank, _parent, _top

_self - means that the response loads into the current frame or context
_blank - means that the response loads into a new window or context
_parent - means that the response loads into the parent frame or context
_top - means that the response loads into the full, original window		 HTML5
name Name of the button HTML 4.01, HTML5
type Type of the button. It can be one of the following values: submit, reset, button

submit - means that the button submits the form data to the server (default value if type is not specified)
reset - means that the button resets all of the controls
button - means that the button has no default behavior		 HTML 4.01, HTML5
value Initial value of the button HTML 4.01, HTML5

Note

  • The HTML <button> element is found within the <body> tag.
  • The <button> tag can not be a descendant of an <a> tag.

Browser Compatibility

The <button> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <button> tag below, exploring examples of how to use the <button> tag in HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <button> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<button name="button">Click me</button>
</body>

</html>

In this HTML5 Document example, we have created a <button> tag that displays the text "Click me".

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <button> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<button name="button">Click me</button>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created a <button> tag that displays the text "Click me".

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <button> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
<button name="button">Click me</button>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created a <button> tag that displays the text "Click me".

Share on: