How to Disable a Button in HTML?

Last Updated : 14 Oct, 2024

In HTML, buttons can have two primary states: enabled and disabled. When a button is enabled, users can click on it to trigger an action. When a button is disabled, it is grayed out and cannot be clicked. This is often used to prevent users from performing actions that are not currently available or appropriate.

We will discuss different approaches to disable a button in HTML:

Table of Content

Using the disabled Attribute in HTML
Dynamically Disabling a Button Using JavaScript

Using the disabled Attribute in HTML

The simplest and most direct way to disable a button in HTML is by adding the disabled attribute to the <button> element. When this attribute is present, the button becomes unclickable and usually appears grayed out, indicating that it is inactive.

Example 1: Below is an example of disabling a button in html using the disabled attribute.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Disable Button Example</title>
</head>

<body>
    <h1>Disabled Button Example</h1>
    <!-- disabled button -->
    <button disabled>Submit</button>
</body>

</html>

Output:

Example 2: Below is an example of disabling a button.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Disable Button Example</title>
</head>

<body>
    <h1>Disabled Button Example</h1>
    <!-- disabled button -->
    <input type="button" value="Submit" disabled>
</body>

</html>

Output:

Note: We can also add the feature of the disabling the Button by sing the Javascript. So, we are using the JavaScript to show the same.

Dynamically Disabling a Button Using JavaScript

In most practical scenarios, you’ll want to enable or disable a button dynamically based on user input or actions. This can be easily achieved using JavaScript by manipulating the disabled attribute.

Let’s consider a simple form where a button is disabled until the user enters some text into an input field.

We have an input field where users can enter their name.
The "Submit" button is initially disabled.
As the user types in the input field, the JavaScript function toggleButton() is triggered on every keyup event.
If the input field is empty, the button remains disabled; otherwise, it becomes enabled.

Example: below is an example to disable button dynamically using javaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Dynamic Button Disable</title>
    <script>
        function toggleButton() {
            const inputField = document.getElementById("nameInput");
            const submitButton = document.getElementById("submitButton");
            submitButton.disabled = inputField.value.trim() === "";
        }
    </script>
</head>

<body>
    <h1>Dynamic Button Enable/Disable</h1>
    <form>
        <label for="nameInput">Enter your name:</label>
        <input type="text" 
               id="nameInput" 
               onkeyup="toggleButton()">
        <br><br>
        <button id="submitButton" disabled>Submit</button>
    </form>
</body>

</html>