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 |
---|---|
It is used to specify that the button should get automatically get focus or not when the page loads | |
It is used indicates whether the element is disabled or not. If this attribute is set, the element is disabled. | |
It is used to create a form for user input. There are many elements that> are used within the >form tag. | |
It is used to specify where to send the data of the form. | |
It is used to specify that the Input Element should not be validated when submitting the form. | |
It is used to specify that the form data should be encoded when submitting to the server. | |
It is used to specify the HTTP method used to send data while submitting the form. | |
It is used to specify the name or a keyword which indicates where to display the response after submitting the form. | |
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. | |
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".
<!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>