HTML - <button> Tag

Quiz

Introduction to <button> Tag

The HTML <button> tag is a interactive element that is used to create a clickable buttons on the webpage. It allows to trigger various actions such as submitting a form, executing JavaScript functions. The <button> tag can contain text, images or any other HTML content.

HTML buttons are often styled by using the CSS to improve their appreance and provide visual feedback to the user. By default, the <button> type is submit, which submits the form data. We can also explicitly set the type attribute to button to prevent submission or reset.

Syntax

Following is the syntax of HTML <button> tag −.

<button>button name</button>

Attributes

HTML button tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
autofocus	autofocus	A button getting focus when the page loads
disabled	disabled	Disable a button
form	form_id	One or more forms the button belongs to
formaction	URL	For type="submit". Where to send the form-data when a form is submitted.
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	For type="submit". How form-data should be encoded before sending it to a server.
formmethod	get post	For type="submit". How to send the form-data "
formnovalidate	formnovalidate	For type="submit". The form-data should not be validated on submission.
formtarget	_blank _self _parent _top framename	For type="submit". Where to display the response after submitting the form.
name	name	Specifies a name for the button
type	button reset submit	Specifies the type of button
value	text	Specifies an initial value for the button

Example : Basic Button

Let's look at the following example, where we are going to consider the basic usage of the <button> tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Button</title>
</head>

<body>
   <h1>HTML button</h1>
   <!-- HTML Button -->
   <button>click</button>
</body>

</html>

Example : Disabled Button

Consider the following example, where we are going to use the disabled attribute along with the <button> tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
</head>

<body>
    <h1>HTML button Tag</h1> 
    <strong>Normal HTML Button:</strong>
    <!-- HTML Button -->
    <button>Submit</button> 
    <br><br>
    <strong>Disable HTML Button:</strong>
    <!-- HTML Button -->
    <button disabled>Submit</button> 
</body>

</html>

Example : Applying CSS

In the following example, we are going to use the <button> tag and applying the CSS.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>

<body>
    <h1>HTML button Tag</h1>
    <!-- HTML Button -->
    <button>ClickMe!</button> 
</body>

</html>

Example : Button with Image

Following is the example, where we are going to add the image to the button.

<!DOCTYPE html>
<html>
<body style="text-align:center">
<button>
  <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" style="width: 200px; height: 20px;">
</button>
</body>
</html>

Supported Browsers

Tag
button	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page