HTML Input Type Button

An input type button element in HTML is a clickable button that performs an action using Javascript. You can add a Javascript code to its onclick to activate an action.

Input Type Button Element in HTML Using <input type=”button”>

The button element is useful when you want to create a simple button. You can create this using the syntax given below.

The above syntax shows only the type attribute of the input text. However, there many other attributes of the input type button that you will learn further in this tutorial.

Let’s see the simple example to create a simple input button using the above syntax.

Example

Output

The above example creates a simple input button to use. It contains the two other attributes which are name and value of the input textbox.

How to Add Text Content in Buttons Using Value Attribute

If you want to change the text content of the button element, you have to add or modify the value attribute.

Output

The above example shows the input type button element with changes in text content.

Onclick Attribute with Javascript in Input Type Button

When the user clicks the input button element, it performs no action. However, you can add Javascript to the button element using the onclick attribute. When you add the Javascript to the button element, it executes when someone clicks on it.

Now, suppose that you want to display an alert on a button click. You can use the alert() and add it to the onclick attribute. Now, when the user clicks on the button, it displays the alert box. This is useful when you want to display notifications to your users on a button click.

Output

The above example contains the button element that you can click to get the alert box.

How to Make Button Element Disabled

The disabled button is useful when you want to display a button that does not allows users to click. You can easily create a disabled button element by adding a disabled attribute to the button element.

Output

You can take your mouse to the above button element to check whether it is clickable or not.

Add Link to a Button Element

You can also add a link to the button using the onclick attribute. You have to use the window.open() to the attribute and add a link to it as given below:

Output

Visit SQL Tutorial

When you hover over the above button, it does not display any link. However, when you click the button element, it opens a link in a new tab.