Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we add a push button to HTML?
Use the <button> tag in HTML to add a push button. The HTML <button> tag is used for creating a button within HTML forms or as standalone interactive elements. You can also use the <input> tag to create similar buttons, but the <button> tag offers more flexibility as it can contain HTML content like images, text formatting, and other elements.
Syntax
Following is the basic syntax for the <button> tag −
<button type="button|submit|reset" name="name" value="value"> Button Content </button>
The button content can be plain text, HTML elements, or a combination of both.
Button Attributes
The following are the key attributes of the <button> tag −
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the button should have input focus when the page loads. |
| disabled | disabled | Specifies that the button is disabled and cannot be clicked. |
| form | form_id | Specifies the form to which the button belongs. |
| formaction | URL | Specifies where to send form data when the button is clicked (for submit buttons). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form data should be encoded before sending to the server. |
| formmethod | get post |
Specifies the HTTP method for sending form data. |
| formnovalidate | formnovalidate | Specifies that form data should not be validated on submission. |
| formtarget | _blank _self _parent _top |
Specifies where to display the response after form submission. |
| name | text | Specifies the name of the button for form submission. |
| type | button submit reset |
Specifies the button type and behavior. |
| value | text | Specifies the initial value sent when the button is clicked. |
Button Types
The type attribute determines the button's behavior −
button − A generic clickable button with no default behavior. Used with JavaScript for custom actions.
submit − Submits form data to the server. This is the default type if no type is specified within a form.
reset − Resets form fields to their initial values.
Basic Button Example
Following example demonstrates a simple push button −
<!DOCTYPE html> <html> <head> <title>HTML Button Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Simple Button Example</h2> <button type="button">Click Me!</button> <button type="button" disabled>Disabled Button</button> </body> </html>
The output shows two buttons − one clickable and one disabled −
Simple Button Example [Click Me!] [Disabled Button] (second button is grayed out)
Form Submit and Reset Buttons
Following example shows different button types within a form −
<!DOCTYPE html>
<html>
<head>
<title>Form Button Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Different Button Types</h2>
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="admin"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="admin@example.com"><br><br>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Custom Action!')">Custom Button</button>
</form>
</body>
</html>
The submit button sends form data to the server, the reset button clears the form, and the custom button triggers a JavaScript action.
Form with Different Button Types Username: admin Email: admin@example.com [Submit Form] [Reset Form] [Custom Button]
Button with HTML Content
Unlike <input> buttons, <button> tags can contain HTML elements like images, icons, and formatted text −
<!DOCTYPE html>
<html>
<head>
<title>Button with HTML Content</title>
<style>
.btn-styled {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.btn-styled:hover {
background-color: #45a049;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Buttons with Rich Content</h2>
<button type="button" class="btn-styled">
<b>Download</b> <i>(PDF)</i>
</button>
<button type="button" style="padding: 10px; font-size: 14px;">
? Rate Us ?
</button>
<button type="button" style="background-color: #f44336; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
? Delete Item
</button>
</body>
</html>
This example shows buttons with formatted text, emojis, and custom styling −
Buttons with Rich Content [Download (PDF)] [? Rate Us ?] [? Delete Item] (First button is green, third button is red)
Button with JavaScript Interaction
Following example demonstrates how to add JavaScript functionality to buttons −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Interactive Button Example</h2>
<p id="message">Click a button to see the result!</p>
<button type="button" onclick="changeText()">Change Text</button>
<button type="button" onclick="showTime()">Show Current Time</button>
<button type="button" onclick="changeColor()">Change Background</button>
<script>
function changeText() {
document.getElementById("message").innerHTML = "Hello from TutorialsPoint!";
}
function showTime() {
var now = new Date();
document.getElementById("message").innerHTML = "Current time: " + now.toLocaleTimeString();
}
function changeColor() {
document.body.style.backgroundColor = document.body.style.backgroundColor === "lightblue" ? "white" : "lightblue";
document.getElementById("message").innerHTML = "Background color changed!";
}
</script>
</body>
</html>
Each button triggers a different JavaScript function to modify the page content dynamically.
Interactive Button Example Click a button to see the result! [Change Text] [Show Current Time] [Change Background]
3K+ Views
