What is Disabled Button in HTML?

What is Disabled Button in HTML?

A disabled button in HTML prevents the users from clicking the button. By default, disabled buttons are grey. HTML buttons can be disabled using the disabled boolean attribute. All HTML buttons are enabled by default unless specified.

Why Disabled Buttons are Needed?

Disabled button in HTML are needed in some scenarios when we want to prevent the users from clicking the button to prevent the action from being executed. Below are some scenarios when we may disable a button in HTML.

• Disable a button when a form is submitted to prevent the users from clicking it again. For example, when the customer clicks login and waits for it to complete.
• Disable a button until the user enters all the required details. For example, filling all the required details before registration.
• Disable a button when a user is not authorized to click it. For example, disable the delete button for the users without admin access.

Syntax

The HTML syntax to disable a button is given below:

Alternatively, HTML buttons can be disabled/enabled with the JavaScript syntax below:

Examples

Let's create a signup form that accepts name, email, and password. We should disable the signup button until the user enters all the details. We will disable and enable the button through HTML and JavaScript.

HTML

CSS

JavaScript

Output

We disabled the button by default through the HTML attribute <button disabled>. We then controlled the enabling and disabling logic in JavaScript. Whenever the user types some values in the input field, it calls the validate() method that checks if all the values are entered. If yes, the button is enabled; else, disabled.

ARIA to the Rescue

ARIA, Accessible Rich Internet Applications is the set of attributes that we can add to the HTML element to make the web application accessible to users with disabilities who use assistive technologies such as screen readers.

When a button is disabled through the disabled attribute, the screen readers know that the buttons are disabled and communicate it to the user. But HTML buttons can also be disabled through javascript, and the screen readers don't know that the button is disabled. In such scenarios, we can add the aria-disabled="true" attribute to the button element to let the screen reader know that it is disabled.

Example

The button is disabled using JavaScript, and the attribute aria-disabled="true" is added to the button element to let the assistive technologies know that the button is disabled.

HTML

JavaScript

Difference Between Disabled and ARIA-disabled in HTML

Supported Browsers

The disabled and aria-disabled attributes are supported by all major browsers such as Chrome, Internet Explorer, Edge, Firefox, Safari, Opera, etc.

Learn More

Please visit Scaler topic's HTML section to learn more about HTML