Button HTML

HTML <button> Tag

To create a clickable button, the <button> tag is used. It is usually required within an HTML form. Contents like text or image can be placed within the <button> tag. The “type” attribute needs to be specified for a <button> tag because for the <button> tag, different browsers can have different default type. When the HTML <button> tag is used inside the form, it works as a submit button or as a reset button. However, when the HTML <button> tag is used outside the form, it is used to call a JavaScript function on it.

Example: To display button.

<!DOCTYPE html>
<html>
<body>
<h2>Click the button below:</h2>
<button type="button" onclick="alert('Thank you!')">Click Me</button>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, an alert message is displayed on clicking the button.

Example: Calling JavaScript Function.

<!DOCTYPE html>
<html>
<body>
<h2>Click the button below:</h2>
<button type="button" onclick="thanks()">Click Me</button>
<script>  
function thanks(){  
alert("Thank you!");  
}  
</script>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are calling a Javascript function on clicking the button.

Example: Submit Form.

<!DOCTYPE html>
<html>
<body>
<h4>Fill the form below.</h4>
<form>  
UserName: <input type="text" name="name"><br><br>    
<button>Submit</button>  
</form>  
</body>
</html>

Output:

Explanation:

In the above example, we are submitting a form on clicking the button.

Example: Reset Form.

<!DOCTYPE html>
<html>
<body>
<h4>Fill the form below.</h4>
<form>  
UserName: <input type="text" name="name"><br><br>    
<button type="reset">Reset</button>  
</form>  
</body>
</html>

Output:

Explanation:

In the above example, we are resetting the entered value on clicking the button.

Tag specific Attributes:

Attribute Uses
autofocus Used to specify that a button should automatically get focus while page loading.
disabled Used to specify that a button should be disabled.
form Used to specify a form.
formaction Used for the submit type to specify where to send the data of the form when the form is submitted.
formmethod Used to specify the way to send the data of the form.
formenctype Used to specify the way in which form-data should be encoded before submitting to the server.
formnovalidate Used to specify that the data of the form should not be validated on submission.
formtarget Used to specify where to display the response after submitting the form.
name Used to specify the name of the button.
type Used to specify the type of the button.
value Used to specify the value of the button.

Global Attributes:

All the Global attributes are supported by the HTML <button> tag.

Event Attributes:

All the Event attributes are supported by the HTML <button> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share