HTML Button Disabled
The HTML <button> element has many attributes, one of them is the disabled attribute. The button on which you apply the disabled attribute will not work, or we can say that button becomes an unclickable button.
The disabled attribute is either true or false, which means it is a Boolean attribute. You cannot provide any value to the disabled attribute. You can add the disabled attribute inside the button element without assigning any value to it.
The button element will become a non-clickable or unusable element.
Syntax:
<button type="button" disabled> Click here </button>
Examples of HTML Button Disabled
Example 1:
This example shows the use of the disabled attribute. We will apply the disabled attribute to the login button element to make it unusable.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example 1 of HTML Font Size
</title>
<style>
.container{
width: 250px;
height: 160px;
border: 2px solid brown;
padding: 20px;
background-color: rgb(138, 81, 81);
color: white;
text-align: center;
}
</style>
</head>
<body bgcolor="BurlyWood">
<h1> Login Form </h1>
<form>
<div class="container">
<label> Username : </label>
<input type="text" placeholder="Enter Username" name="Username" required> <br> <br>
<label> Password : </label>
<input type="Password" placeholder="Enter Password" name="Password" required> <br> <br>
<input type="checkbox" checked> Remember me
<button type="Submit" disabled> Login </button>
<button type="Button" class="cancelbutton"> Cancel </button> <br> <br>
Forgot <a href="#"> Password? </a>
</div>
</form>
</body>
</html>
Output:
The output shows a login form with a disabled login button. As you can see, the disabled login button color becomes grey after adding the disabled attribute inside the button element. When you click the login button, it will not work.
Example 2:
We are creating a responsive registration form using HTML and JavaScript in this example. A form consists of input fields: first name, middle name, last name, email, a radio button to specify the gender, and a submit button. We will use the disabled attribute inside the submit button to disable the button element.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example 2 of HTML Button Disabled
</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica;
background-color: rgb(129, 58, 70);
}
.container {
padding: 40px;
background-color: rgb(67, 188, 228);
}
input[type=text] {
width: 100%;
margin: 6px 0 20px 0;
padding: 16px;
border: none;
background: #fff3f3;
display: inline-block;
}
input[type=text]:focus {
background-color: rgb(227, 250, 216);
outline: none;
}
div {
padding: 10px 0;
}
button {
color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>
<h1> Registration Form </h1>
</center>
<label> Firstname: </label>
<input type="text" name="first name" placeholder= "Enter your Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middle name" placeholder="Enter your Middlename" size="15" />
<label> Lastname: </label>
<input type="text" name="last name" placeholder="Enter your Lastname" size="16"required />
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label for="email"> Email: <label>
<input type="text" placeholder="Enter Email ID" name="email-id" required>
In this example, we will use the disabled attribute inside the submit button and disable the submit button. When you click on submit button after filling out the form, the form will not submit.
<button type="submit form" value="submit form" disabled> Submit Form </button>
</form>
</body>
</html>Output:
The output shows a registration form containing various input fields and types of buttons. The submit button is shown as disabled in the below result. The color of the button fades automatically when the disabled attribute is applied. We cannot submit the form after filling the details.
Browser Support:
It supports the following browsers:
- Microsoft Edge
- Mozilla Firefox
- Google Chrome
- Internet Explorer
- Safari
- Opera