HTML <button> Tag
Last Updated :
12 Mar, 2024
HTML <button> tag defines a clickable button within a form or standalone. It can contain text or images and triggers an action when clicked, typically associated with JavaScript functions or form submissions.
The <button>
element in HTML allows the inclusion of text and various tags like <i>
, <b>
, <a>
, <span>
,<div>.
Note:
- It is important to always specify the type attribute for a button element to inform the browser what type of button it is.
- The HTML <button> tag supports the Global Attribute and Event Attribute in HTML.
Syntax:
<button type = "button"> Click Me </button>
Attributes:
The various attributes that can be used with the “button” tag are listed below:
Attributes
| Descriptions
|
---|
autofocus
| It is used to specify that the button should get automatically get focus or not when the page loads
|
disabled
| It is used indicates whether the element is disabled or not. If this attribute is set, the element is disabled.
|
form
| It is used to create a form for user input. There are many elements that> are used within the >form tag.Â
|
formaction
| It is used to specify where to send the data of the form.
|
formnovalidate
| It is used to specify that the Input Element should not be validated when submitting the form.
|
formenctype
| It is used to specify that the form data should be encoded when submitting to the server.
|
formmethod
| It is used to specify the HTTP method used to send data while submitting the form.
|
formtarget
| It is used to specify the name or a keyword which indicates where to display the response after submitting the form.
|
type
| It is used to specify the type of button for button elements. It is also used in <input> element to specify the type of input to display.
|
value
| It is used to specify the value of the element with which it is used. It has different meaning for different HTML elements.
|
HTML <button> tag Examples
Example 1:Â In this example, we defines a button that triggers an alert when clicked, displaying the message “Welcome to GeeksforGeeks”.
HTML<!DOCTYPE html>
<html>
<body>
<h3>HTML button Tag</h3>
<!-- Button tag starts from here -->
<button type="button"
onclick="alert('Welcome to GeeksforGeeks')">
Click Here
</button>
<!-- Button tag ends here -->
</body>
</html>
Output:
Example 2: In this example, we defines a styled buttons. It includes buttons styled with different colors for various purposes and hover effects for enhanced user interaction.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Button</title>
<style>
body {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 40px;
border: none;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
/* Button Styles */
.blue {
background-color: #3daaf3;
color: #fff;
}
.green {
background-color: #3bda7d;
color: #fff;
}
.warnning {
background-color: #f08f3b;
color: #fff;
}
.red {
background-color: #e44331;
color: #fff;
}
/* Hover Styles */
button:hover {
background-color: #616161;
}
</style>
</head>
<body>
<div>
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="btn">
</div>
<button class="blue">Primary</button>
<button class="green">Secondary</button>
<button class="warnning">Warning</button>
<button class="red">Danger</button>
</body>
</html>
Output:
Supported Browsers
The browser supported by HTML <button> tag are listed below:
Share your thoughts in the comments
Please Login to comment...