Introduction
Within an HTML document, we have the ability to define a button using the button attribute value. This will render as a button element within the web browser. The default styles of these button elements may differ across various browsers.
Syntax for button type attribute:
To define the attribute for the type of button, we can utilize the following syntax:
<button type="button|submit|reset">
Attribute Values
Three types of attribute values are used in the button tag. With the help of this type of attribute value, we can specify the work of the button tag.
- Submit: with the help of this attribute value, we can specify that it is a submit button. It is the default value for the submit button for all browsers except for Internet Explorer.
- Button: with the help of this attribute value, we can specify that it is a clickable button. It is the default value for the Internet Explorer.
- Reset: with the help of this attribute value, we can specify that it is a reset button. It is used to change the previous data from the form.
Let's take an example for each attribute value.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example for button attribute value</title>
</head>
<body>
<form action="#" method="get">
<label for="fname">Enter Your First name:</label>
<input
type="text"
id="fname"
name="fname"
placeholder="Enter your first name"
/>
<label for="lname">Enter Your Last name:</label>
<input
type="text"
id="lname"
name="lname"
placeholder="Enter your last name"
/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, a form is generated to gather user input. Upon clicking the submit button, the server will capture and retain all entered data.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example for button attribute value</title>
</head>
<body>
<form action="#" method="get">
<label for="fname">Enter Your First name:</label>
<input
type="text"
id="fname"
name="fname"
placeholder="Enter your first name"
/><br>
<label for="lname">Enter Your Last name:</label>
<input
type="text"
id="lname"
name="lname"
placeholder="Enter your last name"
/><br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, a form is established to gather user input. Upon clicking the submit button, the server will store all input values. Conversely, clicking the reset button will result in the entire page being cleared.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example for button attribute value</title>
</head>
<body>
<form action="#" method="get">
<label for="fname">Enter Your First name:</label>
<input
type="text"
id="fname"
name="fname"
placeholder="Enter your first name"
/><br>
<label for="lname">Enter Your Last name:</label>
<input
type="text"
id="lname"
name="lname"
placeholder="Enter your last name"
/><br>
<input type="submit" value="Submit" />
<input type="reset" value="Reset">
<button type="button" value="Click me">Sign Up</button>
</form>
</body>
</html>
Output:
Explanation:
Within the provided code snippet, a form is established to gather user input. Upon clicking the submit button, the server will store all entered values. Alternatively, selecting the reset button will clear the entire page. Additionally, a button element has been implemented to enable users to sign in to the webpage by clicking on it.
Supported Browsers
The browsers supported by HTML <button> type attribute are listed below:
- Google Chrome
- Edge 12
- Internet Explorer
- Firefox
- Safari
- Opera