What is the HTML <button> tag?

In HTMLHypertext Markup Language, the <button> element is used to create a button. A button is usually made to submit a form, access different pages of a website, and much more. In short, using a button makes the user experience more exciting.

How to create a simple button

Syntax

<button> button-title </button>

Let’s understand the syntax above with the help of an example.

In the example above, we create a simple button. In place of button-title, you can enter any name you want.

It’s important to name buttons in a way that portrays the purpose of that button.

You can alter the <button> element with different attributes associated with it. Let’s look at some examples.

The disabled attribute

Syntax

<button disabled> button-title </button>

A disabled button is not clickable and is used when a button is only to be enabled for a certain action, so by default, that button is disabled. The example above creates a disabled button with the disabled keyword inside the opening tag of the <button> element.

The form attribute

Syntax

<button form = "form-id"> button-title </button>

In the example above, we create a form. The “Submit” button refers to the form being submitted with form-id = "form1". When clicked, the “Submit” button will submit the form with the corresponding ID. On the backend, the server will process the request and redirect the user to any_action_page upon successful submission of the form. For the sake of this shot, our example produces a confirmation message that your “response has been submitted.”. Normally, the request is processed and feedback is sent to the user if the form is submitted successfully or not.

Many attributes can be used in the <button> element. Below is the list of some attributes, their use, and syntax.

Buttons are one of the most important additions to UI/UXUser Interface/User Experience, as seen in the <button> element in HTML.