HTML <button> disabled Attribute
Last Updated :
11 Mar, 2024
The HTML <button> disabled attribute prevents user interaction with the button, making it unclickable and visually indicating its disabled state. It’s typically used to indicate that a button is inactive or unavailable for interaction.
Syntax:
<button disabled></button>
HTML Button Disabled Attribute Example
Example: This example display implementation of button disabled attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< title >HTML button disabled Attribute</ title >
</ head >
< body style = "text-align:center" >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h2 >HTML button disabled Attribute</ h2 >
< button type = "button" disabled>I am disabled!</ button >
</ body >
</ html >
|
Output:
Explanation:
- In this example we features a disabled button element created using the <button> tag with the text “I am disabled!”.
- The button is disabled using the disabled attribute, preventing user interaction.
- The styling ensures the content is centered on the page using inline CSS for text alignment and color.
HTML button disabled Attribute Use Cases
To specify a button as disabled in HTML5, add the disabled attribute to the <button> tag, like this: <button type=”button” disabled>.
To disable a button dynamically using JavaScript, target the button element and set its disabled property to true, like this: buttonElement.disabled = true;.
The disabled attribute is used to disable a specific input field in an HTML form. It’s applied directly to the input element, like this: <input type=”text” disabled>.
To enable/disable a button using jQuery, select the button element and use the prop() method to set its disabled property to true or false, like this: `$(‘#myButton’).prop(‘disabled’, true/false);.
To remove the “disabled” attribute from an HTML input element using JavaScript, target the element and use the removeAttribute() method, like this: inputElement.removeAttribute(‘disabled’);.
Supported Browsers
The browser supported by <button> disabled attribute are listed below:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...